Xamarin.Android CardView

Widget Cardview je komponenta uživatelského rozhraní, která zobrazuje obsah textu a obrázků v zobrazeních, která se podobají kartám. Tato příručka vysvětluje, jak používat a přizpůsobovat CardView v aplikacích Xamarin.Android a současně zachovat zpětnou kompatibilitu 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, která se podobají kartám, zobrazuje obsah textu a obrázků. CardView se implementuje jako FrameLayout widget se zaoblenými rohy a stínem. Obvykle se používá CardView k zobrazení jedné řádkové položky ve ListView skupině zobrazení nebo GridView . Například následující snímek obrazovky je příkladem aplikace pro cestovní rezervace, která v posouvání implementuje cílové cestovní karty CardView založené na ListView :

Příklad aplikace, která používá CardView pro každý cíl cesty

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

Požadavky

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

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

  • Android SDK – Android 5.0 (API 21) nebo novější musí být nainstalovaný přes Správce sady Android SDK.

  • Java JDK 1.8 – JDK 1.7 je možné použít, pokud výslovně cílíte na rozhraní API úrovně 23 a starší. JDK 1.8 je k dispozici od Oracle.

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

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

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

  3. Vyberte Xamarin Support Library v7 CardViewa pak klikněte na Přidat balíček.

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

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

  2. Když se zobrazí NuGet balíčky karet, zadejte do vyhledávacího pole CardView.

  3. Jakmile se zobrazí Xamarin Support Library v7 CardView, klikněte na Install (Nainstalovat).

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

Představení CardView

Výchozí nastavení CardView se podobá bílé kartě s minimálními zaoblené rohy a drobným stínem. Následující příklad rozložení Main.axml zobrazí jeden 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 okomentovat jakýkoli kód v souboru MainActivity.cs, který odkazuje na prostředky v předchozím kódu XML.

Tento příklad rozložení vytvoří výchozí hodnotu CardView s jedním řádkovém textem, jak je znázorněno na následujícím obrázku:

Snímek obrazovky cardview s bílým pozadím a řádkovým textem

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

Přizpůsobení ovládacího prvku CardView

Můžete upravit základní atributy a přizpůsobit tak vzhled objektu CardViewCardView v aplikaci. Například zvýšením oprávnění lze zvýšit přetypování většího stínu (kvůli kterému se zdá, že je karta plovoucí nad CardView pozadím). Poloměr rohu je také možné zvýšit, aby se rohy karty zaoblely.

V dalším příkladu rozložení se k vytvoření simulace tiskové fotografie (snímku) používá CardView přizpůsobená fotografie. Objekt se přidá do pro zobrazení obrázku a je umístěn pod polem pro zobrazení ImageViewCardView názvu TextViewImageView obrázku. V tomto rozložení CardView příkladu má následující přizpůsobení:

  • Zvýší cardElevation se na 4dp pro přetypování většího stínu.
  • Zvýší cardCornerRadius se na 5dp, aby se rohy zdály zaoblenější.

Vzhledem CardView k tomu, že poskytuje knihovna podpory Android v7, její atributy nejsou dostupné z oboru android: názvů . Proto musíte definovat vlastní obor názvů XML a použít tento obor názvů jako CardView předponu atributu. 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ů můžete volat, nebo i v případě, že zvolíte (je přístupný pouze card_view v rámci oboru tohoto myapp souboru). Ať už se rozhodnete tento obor názvů volat, musíte ho použít k předponě CardView atributu, který chcete upravit. V tomto příkladu rozložení je cardview obor názvů předponou pro a cardElevationcardCornerRadius :

<?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, má vzhled snímku fotografie, jak je znázorněno na CardView následujícím snímku obrazovky:

CardView s obrázkem a titulkem pod obrázkem

Tento snímek obrazovky je pořízený z ukázkové aplikace RecyclerViewer, která používá widget k zobrazení posouvání seznamu obrázků pro prohlížení CardView fotek. Další informace o najdete RecyclerView v příručce RecyclerView

Všimněte si, že objekt může v oblasti obsahu zobrazit CardView 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 typu , který obsahuje ListViewImageView objekt a TextView . I když jsou instance často uspořádané svisle, můžete je také uspořádat vodorovně (příklad snímku obrazovky najdete v části Vytvoření vlastního CardView stylu zobrazení). CardView

Možnosti rozložení CardView

CardView Rozložení lze přizpůsobit nastavením jednoho nebo více atributů, které mají vliv na odsazení, zvýšení oprávnění, poloměr rohu a barvu pozadí:

Diagram atributů CardView

Každý atribut lze také dynamicky měnit voláním metody protějšku (další informace o metodách najdete v referenčních CardViewCardViewCardView). Všimněte si, že tyto atributy (s výjimkou barvy pozadí) přijímají hodnotu dimenze, což je desetinné číslo následované jednotkou. Určuje například 11.5dp 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 volat podobné metody v kódu:

Diagram atributů odsazení CardView

Atributy odsazení jsou vysvětleny takto:

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

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

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

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

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

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

Zvýšení

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

Diagram atributů zvýšení oprávnění CardView

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

  • cardElevation – Zvýšení oprávnění objektu CardView (představuje jeho osu Z).

  • cardMaxElevation – Maximální hodnota zvýšení CardView oprávnění

Větší hodnoty cardElevation zvětšuje velikost stínu, aby se CardView zdál, že nad pozadím je plovoucí. Atribut také určuje pořadí kreslení překrývajících se zobrazení. To znamená, že se bude nakreslit pod jiným překrývajícím se zobrazením s vyšším nastavením zvýšení oprávnění a nad překrývajícími se zobrazeními s nižším nastavením cardElevationCardView zvýšení oprávnění. Toto nastavení je užitečné, když aplikace mění zvýšení oprávnění dynamicky – brání stínu v rozšíření nad limit, který cardMaxElevation definujete tímto nastavením.

Poloměr rohu a barva pozadí

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

Diagram rohových přepínačů CardView a atributů barvy pozadí

Tyto atributy jsou vysvětleny takto:

  • cardCornerRadius – Poloměr rohu všech rohů CardView .

  • cardBackgroundColor – Barva pozadí pro CardView .

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

Kompatibilita

Můžete použít ve CardView verzích Androidu starších než Android 5.0 Lollipop. Vzhledem k tomu, že je součástí knihovny podpory androidu v7, můžete použít s CardViewCardView Androidem 2.1 (rozhraní API úrovně 7) a vyššími verzemi. Je však nutné nainstalovat balíček, Xamarin.Android.Support.v7.CardView jak je popsáno v části Xamarin.Android.Support.v7.CardViewvýše.

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

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

  • CardView neumožňuje vystřihnout podřízená zobrazení, která se protínají s CardView zaoblenými rohy.

K usnadnění správy těchto rozdílů v této kompatibilitě CardView poskytuje několik dalších atributů, které lze konfigurovat v rozložení:

  • cardPreventCornerOverlap – Tento atribut nastavte na true , pokud chcete přidat odsazení, když vaše aplikace běží na dřívějších verzích Androidu (rozhraní API úrovně 20 a starší). Toto nastavení brání v CardView průsečíku obsahu s CardView zaoblenými rohy.

  • cardUseCompatPadding – Tento atribut nastavte na true , pokud chcete přidat odsazení, když vaše aplikace běží ve verzích Androidu na nebo vyšší než rozhraní API úrovně 21. Pokud chcete použít CardView na zařízeních se systémem pre-Play a podívá se na stejný stav na typu Lupa (nebo novější), nastavte tento atribut na true . Když je tento atribut povolený, CardView přidá další odsazení k vykreslování stínů při spuštění na zařízeních s pre-Play. To pomáhá překonat rozdíly v odsazení, které jsou představeny v případě, že jsou platné programové implementace před rozdílným stínem.

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

Souhrn

Tato příručka zavedla nové CardView widgety zahrnuté v androidu 5,0 (Lupa). Ukázala se výchozí CardView vzhled a vysvětluje, jak přizpůsobit CardView změnou jeho zvýšení oprávnění, zaoblení rohů, odsazení obsahu a barvy pozadí. Uvádí CardView atributy rozložení (s referenčními diagramy) a vysvětluje, jak používat CardView na zařízeních s Androidem starších než Android 5,0 Lupa. Další informace o naleznete v CardView tématu CardView.