Xamarin.Android CardView

Widget Cardview je komponenta uživatelského rozhraní, která zobrazuje obsah textu a obrázku v zobrazeních, která se podobají kartám. Tato příručka vysvětluje, jak používat a přizpůsobit CardView v aplikacích Xamarin.Android při zachování zpětné kompatibility se staršími verzemi Androidu.

Přehled

Widget Cardview , představený v Androidu 5.0 (Lollipop), je komponenta uživatelského rozhraní, která v zobrazeních podobných kartám prezentuje text a obsah obrázku. CardView je implementován jako pomůcka FrameLayout se zaoblenými rohy a stínem. CardView Obvykle se používá k prezentaci jedné položky řádku ve ListView skupině nebo GridView ve skupině zobrazení. Například následující snímek obrazovky je příkladem aplikace pro cestovní rezervaci, která implementuje CardViewcestovní cílové karty založené na posouvání ListView:

Example app using a CardView for each travel destination

Tato příručka vysvětluje, jak přidat CardView balíček do projektu Xamarin.Android, jak přidat CardView do rozložení a jak přizpůsobit vzhled CardView aplikace. Tato příručka navíc obsahuje podrobný seznam CardView atributů, které můžete změnit, včetně atributů, které vám pomůžou používat CardView ve verzích Androidu starších než Android 5.0 Lollipop.

Požadavky

K používání nových funkcí Androidu 5.0 a novějších (včetně CardView) v aplikacích založených na Xamarinu je potřeba následující:

  • Xamarin.Android – Xamarin.Android 4.20 nebo novější musí být nainstalovaný a nakonfigurovaný s Visual Studio nebo Visual Studio pro Mac.

  • Android SDK – Android 5.0 (API 21) nebo novější musí být nainstalován prostřednictvím Správce sady Android SDK.

  • Java JDK 1.8 – JDK 1.7 se dá použít, pokud cílíte konkrétně na rozhraní API úrovně 23 a starší. JDK 1.8 je k dispozici od Oracle.

Aplikace musí také obsahovat Xamarin.Android.Support.v7.CardView balíček. Xamarin.Android.Support.v7.CardView Přidání balíčku do Visual Studio pro Mac:

  1. Otevřete projekt, klikněte pravým tlačítkem na Balíčky a vyberte Přidat balíčky.

  2. V dialogovém okně Přidat balíčky vyhledejte CardView.

  3. Vyberte Xamarin Support Library v7 CardView a potom klikněte na Přidat balíček.

Xamarin.Android.Support.v7.CardView Přidání balíčku do Visual Studio:

  1. Otevřete projekt, klikněte pravým tlačítkem na uzel Reference (v podokně Průzkumník řešení) a vyberte Spravovat NuGet balíčky....

  2. Když se zobrazí dialogové okno Spravovat NuGet Balíčky, do vyhledávacího pole zadejte CardView.

  3. Jakmile se zobrazí knihovna podpory Xamarin v7 CardView , klepněte na tlačítko Nainstalovat.

Informace o konfiguraci projektu aplikace pro Android 5.0 najdete v tématu Nastavení Project androidu 5.0. Další informace o instalaci balíčků NuGet naleznete v tématu Návod: Zahrnutí NuGet do projektu.

Představujeme CardView

Výchozí hodnota CardView se podobá bílé kartě s minimálně zaoblenými rohy a mírným stínem. Následující příklad Rozložení Main.axml zobrazí jeden CardView widget, který obsahuje TextView:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:padding="5dp">
    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="245dp"
        android:layout_gravity="center_horizontal">
        <TextView
            android:text="Basic CardView"
            android:layout_marginTop="0dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:gravity="center"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentEnd="true" />
    </android.support.v7.widget.CardView>
</LinearLayout>

Pokud tento kód XML použijete k nahrazení existujícího obsahu Main.axml, nezapomeňte zakomentovat veškerý kód v souboru MainActivity.cs , který odkazuje na prostředky v předchozím XML.

Tento příklad rozložení vytvoří výchozí CardView s jedním řádkem textu, jak je znázorněno na následujícím snímku obrazovky:

Screenshot of CardView with white background and line of text

V tomto příkladu je styl aplikace nastavený na světlý materiálový motiv (Theme.Material.Light), aby CardView byly stíny a hrany přehlednější. Další informace o motivech aplikací pro Android 5.0 najdete v tématu Material Theme. V další části se dozvíte, jak přizpůsobit CardView aplikaci.

Přizpůsobení karty CardView

Základní atributy můžete upravit CardView tak, aby se přizpůsobil vzhled CardView aplikace. Například zvýšení výšky CardView může být zvýšeno tak, aby přetypování většího stínu (což zdálo, že karta je plovoucí nad pozadím). Také je možné zvětšit poloměr rohu, aby rohy karty byly zaokrouhlenější.

V dalším příkladu rozložení se vlastní CardView nastavení použije k vytvoření simulace tiskové fotografie ("snímek"). Do zobrazení obrázku se přidá CardView an ImageView a TextView umístí se pod ImageView název obrázku. V tomto ukázkovém rozložení CardView má následující přizpůsobení:

  • Zvýší se cardElevation na 4dp, aby se přetypil větší stín.
  • Zvýší se cardCornerRadius na 5dp, aby se rohy zobrazily zaokrouhleněji.

Vzhledem k tomu CardView , že je poskytována knihovnou podpory Android v7, jeho atributy nejsou dostupné z android: oboru názvů. Proto musíte definovat vlastní obor názvů XML a použít tento obor názvů jako předponu atributu CardView . V následujícím příkladu rozložení použijeme tento řádek k definování oboru názvů s názvem cardview:

    xmlns:cardview="http://schemas.android.com/apk/res-auto"

Tento obor názvů card_view můžete volat nebo i myapp v případě, že zvolíte (je přístupný jenom v rámci oboru tohoto souboru). Bez ohledu na to, co zvolíte pro volání tohoto oboru názvů, musíte ho použít k předponě atributu CardView , který chcete upravit. V tomto příkladu cardview rozložení je obor názvů předponou a cardCornerRadiuscardElevation :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:cardview="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:gravity="center_horizontal"
    android:padding="5dp">
    <android.support.v7.widget.CardView
        android:layout_width="fill_parent"
        android:layout_height="245dp"
        android:layout_gravity="center_horizontal"
        cardview:cardElevation="4dp"
        cardview:cardCornerRadius="5dp">
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="240dp"
            android:orientation="vertical"
            android:padding="8dp">
            <ImageView
                android:layout_width="fill_parent"
                android:layout_height="190dp"
                android:id="@+id/imageView"
                android:scaleType="centerCrop" />
            <TextView
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:textAppearance="?android:attr/textAppearanceMedium"
                android:textColor="#333333"
                android:text="Photo Title"
                android:id="@+id/textView"
                android:layout_gravity="center_horizontal"
                android:layout_marginLeft="5dp" />
        </LinearLayout>
    </android.support.v7.widget.CardView>
</LinearLayout>

Pokud se tento příklad rozložení používá k zobrazení obrázku v aplikaci pro prohlížení fotek, CardView má vzhled snímku fotky, jak je znázorněno na následujícím snímku obrazovky:

CardView with an image and caption below the image

Tento snímek obrazovky pochází z ukázkové aplikace RecyclerViewer , která pomocí RecyclerView widgetu prezentuje seznam CardView obrázků pro prohlížení fotek. Další informace o RecyclerViewnástroji RecyclerView naleznete v příručce k nástroji RecyclerView .

Všimněte si, že v CardView oblasti obsahu může zobrazit více než jedno podřízené zobrazení. Například ve výše uvedeném příkladu aplikace pro prohlížení fotek se oblast obsahu skládá z ListView oblasti, která obsahuje a ImageView .TextView I když CardView jsou instance často uspořádané svisle, můžete je také uspořádat vodorovně (viz Vytvoření vlastního stylu zobrazení pro příklad snímku obrazovky).

Možnosti rozložení CardView

CardView Rozložení je možné přizpůsobit nastavením jednoho nebo více atributů, které ovlivňují jeho odsazení, zvýšení, poloměr rohu a barvu pozadí:

Diagram of CardView attributes

Každý atribut lze také dynamicky změnit voláním metody protějšek CardView (další informace o CardView metodách naleznete v referenčních informacích ke třídě CardView). Všimněte si, že tyto atributy (s výjimkou barvy pozadí) přijímají hodnotu dimenze, což je desetinné číslo následované jednotkou. 11.5dp Například určuje 11,5 pixelů nezávislých na hustotě.

Odsazení

CardView nabízí pět atributů odsazení pro umístění obsahu na kartě. Můžete je nastavit ve formátu XML rozložení nebo můžete v kódu volat analogické metody:

Diagram of CardView padding attributes

Atributy odsazení jsou vysvětleny takto:

  • contentPadding – Vnitřní odsazení mezi podřízeným zobrazením CardView a všemi okraji karty.

  • contentPaddingBottom – Vnitřní odsazení mezi podřízeným zobrazením CardView a dolním okrajem karty.

  • contentPaddingLeft – Vnitřní odsazení mezi podřízeným zobrazením CardView a levým okrajem karty.

  • contentPaddingRight – Vnitřní odsazení mezi podřízeným zobrazením CardView a pravým okrajem karty.

  • contentPaddingTop – Vnitřní odsazení mezi podřízeným zobrazením CardView a horním okrajem karty.

Atributy odsazení obsahu jsou relativní k hranici oblasti obsahu, nikoli k žádnému danému widgetu umístěnému v oblasti obsahu. Pokud by se například contentPadding v aplikaci pro prohlížení fotek dostatečně zvýšilo, CardView ořízlo by obrázek i text zobrazený na kartě.

Zvýšení

CardView nabízí dva atributy zvýšení oprávnění k řízení jeho zvýšení a v důsledku toho velikost stínu:

Diagram of CardView elevation attributes

Atributy zvýšení oprávnění jsou vysvětleny takto:

  • cardElevation – Výška osy Z (představuje její osu CardView Z).

  • cardMaxElevation – Maximální hodnota CardViewzvýšení výšky.

Větší hodnoty cardElevation zvětšení velikosti stínu se zdají být CardView plovoucí nad pozadím. Atribut také určuje pořadí výkresu překrývajících se zobrazení. To cardElevation znamená, že CardView se bude kreslit pod jiným překrývajícím se zobrazením s vyšším nastavením zvýšení oprávnění a nad všemi překrývajícími se zobrazeními s nižším nastavením zvýšení oprávnění. Toto cardMaxElevation nastavení je užitečné, když se aplikace dynamicky změní na zvýšení oprávnění – zabrání tomu, aby stín rozšiřil za limit, který definujete pomocí tohoto nastavení.

Rohový poloměr a barva pozadí

CardView nabízí atributy, které můžete použít k řízení jeho poloměru rohu a jeho barvy pozadí. Tyto dvě vlastnosti umožňují změnit celkový styl CardView:

Diagram of CardView corner radious and background color attributes

Tyto atributy jsou vysvětleny následujícím způsobem:

  • cardCornerRadius – Rohový poloměr všech rohů CardView.

  • cardBackgroundColor – Barva CardViewpozadí .

V tomto diagramu cardCornerRadius je nastaveno na zaokrouhlenější 10dp a cardBackgroundColor je nastavená na "#FFFFCC" (světle žlutá).

Kompatibilita

Můžete použít CardView ve verzích Androidu starších než Android 5.0 Lollipop. Protože CardView je součástí knihovny podpory androidu v7, můžete použít CardView s Androidem 2.1 (úroveň 7 rozhraní API) a novějším. Balíček však musíte nainstalovat Xamarin.Android.Support.v7.CardView , jak je popsáno v části Požadavky výše.

CardView vykazuje mírně odlišné chování na zařízeních před Lollipopem (úroveň rozhraní API 21):

  • CardView používá programovou implementaci stínu, která přidává další odsazení.

  • CardView nevystřižuje podřízená zobrazení, která protínají CardViewzaoblené rohy.

Pokud chcete pomoct se správou těchto rozdílů kompatibility, CardView najdete několik dalších atributů, které můžete nakonfigurovat ve svém rozložení:

  • cardPreventCornerOverlap – Nastavte tento atribut tak, aby true se při spuštění aplikace v dřívějších verzích Androidu přidal odsazení (úroveň rozhraní API 20 a starší). Toto nastavení zabraňuje CardView protínání obsahu se CardViewzaoblenými rohy.

  • cardUseCompatPadding – Tento atribut nastavte tak, aby true se přidal odsazení, když je vaše aplikace spuštěná ve verzích Androidu nebo vyšší než rozhraní API úrovně 21. Pokud chcete použít CardView na zařízeních před Lollipop a mít ho na lollipopu (nebo novějším), nastavte tento atribut na true. Pokud je tento atribut povolený, přidá další odsazení, CardView které při spuštění na zařízeních s předlipopem nakreslí stíny. To pomáhá překonat rozdíly v odsazení, které jsou zavedeny při programových implementacích stínu před Lollipop.

Další informace o zachování kompatibility se staršími verzemi Androidu najdete v tématu Zachování kompatibility.

Souhrn

Tento průvodce představil nový CardView widget zahrnutý v Androidu 5.0 (Lollipop). Ukázala výchozí CardView vzhled a vysvětlila, jak přizpůsobit CardView změnou jeho zvýšení úrovně, zaokrouhlování rohů, odsazení obsahu a barvy pozadí. CardView Uvádí atributy rozložení (s referenčními diagramy) a vysvětlil, jak používat CardView na zařízeních s Androidem starším než Android 5.0 Lollipop. Další informace o nástroji CardView naleznete v referenčních informacích keCardView třídě CardView.