Xamarin.Android CardView

Widżet Cardview to składnik interfejsu użytkownika, który przedstawia zawartość tekstu i obrazu w widokach przypominających karty. W tym przewodniku wyjaśniono, jak używać i dostosowywać element CardView w aplikacjach platformy Xamarin.Android przy zachowaniu zgodności z poprzednimi wersjami systemu Android.

Omówienie

Widżet Cardview wprowadzony w systemie Android 5.0 (Lollipop) to składnik interfejsu użytkownika, który przedstawia zawartość tekstu i obrazu w widokach przypominających karty. CardView jest implementowany jako FrameLayout widżet z zaokrąglonymi rogami i cieniem. Zazwyczaj element jest CardView używany do prezentowania pojedynczego elementu wiersza w grupie widoków ListView lub GridView . Na przykład poniższy zrzut ekranu to przykład aplikacji rezerwacji podróży, która implementuje CardViewkarty docelowe podróży oparte na przewijaniu ListView:

W tym przewodniku CardView wyjaśniono, jak dodać pakiet do projektu platformy Xamarin.Android, jak dodać CardView go do układu i jak dostosować wygląd CardView aplikacji. Ponadto ten przewodnik zawiera szczegółową listę atrybutów CardView , które można zmienić, w tym atrybuty ułatwiające korzystanie z CardView wersji systemu Android starszych niż Android 5.0 Lollipop.

Wymagania

Do korzystania z nowych funkcji systemu Android 5.0 i nowszych (w tym CardView) w aplikacjach opartych na platformie Xamarin wymagane są następujące elementy:

• Xamarin.Android — program Xamarin.Android 4.20 lub nowszy musi być zainstalowany i skonfigurowany przy użyciu programu Visual Studio lub Visual Studio dla komputerów Mac.

• Zestaw Android SDK — system Android 5.0 (interfejs API 21) lub nowszy musi być zainstalowany za pośrednictwem Menedżera zestawu ANDROID SDK.

• Zestaw Java JDK 1.8 — zestaw JDK 1.7 może być używany, jeśli jest przeznaczony dla interfejsu API poziom 23 i starszych wersji. Zestaw JDK 1.8 jest dostępny w programie Oracle.

Aplikacja musi również zawierać Xamarin.Android.Support.v7.CardView pakiet. Aby dodać Xamarin.Android.Support.v7.CardView pakiet w Visual Studio dla komputerów Mac:

1. Otwórz projekt, kliknij prawym przyciskiem myszy pozycję Pakiety i wybierz polecenie Dodaj pakiety.

2. W oknie dialogowym Dodawanie pakietów wyszukaj wartość CardView.

3. Wybierz pozycję Biblioteka pomocy technicznej platformy Xamarin w wersji 7 CardView, a następnie kliknij pozycję Dodaj pakiet.

Aby dodać Xamarin.Android.Support.v7.CardView pakiet w programie Visual Studio:

1. Otwórz projekt, kliknij prawym przyciskiem myszy węzeł Odwołania (w okienku Eksplorator rozwiązań) i wybierz polecenie Zarządzaj pakietami NuGet....

2. Po wyświetleniu okna dialogowego Zarządzanie pakietami NuGet wprowadź wartość CardView w polu wyszukiwania.

3. Gdy pojawi się widok CardView biblioteki pomocy technicznej platformy Xamarin w wersji 7, kliknij przycisk Zainstaluj.

Aby dowiedzieć się, jak skonfigurować projekt aplikacji dla systemu Android 5.0, zobacz Konfigurowanie projektu systemu Android 5.0. Aby uzyskać więcej informacji na temat instalowania pakietów NuGet, zobacz Przewodnik: dołączanie pakietu NuGet w projekcie.

Wprowadzenie do obiektu CardView

Wartość domyślna CardView przypomina białą kartę z minimalnie zaokrąglonymi rogami i lekkim cieniem. Poniższy przykładowy układ Main.axml wyświetla pojedynczy CardView widżet zawierający element 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>

Jeśli używasz tego kodu XML, aby zastąpić istniejącą zawartość pliku Main.axml, pamiętaj, aby oznaczyć jako komentarz dowolny kod w MainActivity.cs , który odwołuje się do zasobów w poprzednim kodzie XML.

Ten przykład układu tworzy wartość domyślną CardView z pojedynczym wierszem tekstu, jak pokazano na poniższym zrzucie ekranu:

W tym przykładzie styl aplikacji jest ustawiony na jasny motyw materiału (Theme.Material.Light), dzięki czemu CardView cienie i krawędzie są łatwiejsze do zobaczenia. Aby uzyskać więcej informacji o motywach aplikacji systemu Android 5.0, zobacz Temat materiału. W następnej sekcji dowiesz się, jak dostosować CardView aplikację.

Dostosowywanie kontrolki CardView

Możesz zmodyfikować podstawowe CardView atrybuty, aby dostosować wygląd CardView aplikacji. Na przykład podniesienie wysokości CardView obiektu można zwiększyć, aby rzutować większy cień (co sprawia, że karta wydaje się unosić się wyżej nad tłem). Ponadto promień rogu można zwiększyć, aby narożniki karty bardziej zaokrąglone.

W następnym przykładzie układu dostosowany CardView jest używany do tworzenia symulacji fotografii drukowanej (migawki). Element ImageView jest dodawany do elementu do CardView wyświetlania obrazu, a element TextView znajduje się poniżej ImageView elementu do wyświetlania tytułu obrazu. W tym przykładowym układzie są CardView następujące dostosowania:

• Zwiększa cardElevation się do 4dp, aby rzucić większy cień.
• Zwiększa cardCornerRadius się do 5dp, aby narożniki wydawały się bardziej zaokrąglone.

Ponieważ CardView jest udostępniana przez bibliotekę obsługi systemu Android w wersji 7, jego atrybuty nie są dostępne w android: przestrzeni nazw. W związku z tym należy zdefiniować własną przestrzeń nazw XML i użyć tej przestrzeni nazw jako prefiksu atrybutu CardView . W poniższym przykładzie układu użyjemy tego wiersza do zdefiniowania przestrzeni nazw o nazwie cardview:

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

Możesz wywołać tę przestrzeń nazw card_view , a nawet myapp w przypadku wybrania opcji (jest ona dostępna tylko w zakresie tego pliku). Niezależnie od tego, co zdecydujesz się wywołać tę przestrzeń nazw, należy użyć jej do prefiksu atrybutu CardView , który chcesz zmodyfikować. W tym przykładzie cardview układu przestrzeń nazw jest prefiksem dla cardElevation i cardCornerRadius:

<?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>

Gdy ten przykład układu służy do wyświetlania obrazu w aplikacji do wyświetlania zdjęć, CardView ma wygląd migawki zdjęcia, jak pokazano na poniższym zrzucie ekranu:

Zwróć uwagę, że w CardView obszarze zawartości może być wyświetlanych więcej niż jeden widok podrzędny. Na przykład w powyższym przykładzie aplikacji do wyświetlania zdjęć obszar zawartości składa się z obiektu ListView zawierającego element ImageView i TextView. Mimo że CardView wystąpienia są często rozmieszczone w pionie, można je również rozmieścić w poziomie (zobacz Tworzenie niestandardowego stylu widoku na przykładowy zrzut ekranu).

Opcje układu Elementu CardView

CardView Układy można dostosować, ustawiając co najmniej jeden atrybut, który ma wpływ na jego dopełnienie, podniesienie uprawnień, promień rogu i kolor tła:

Każdy atrybut można również zmieniać dynamicznie, wywołując metodę odpowiednika CardView (aby uzyskać więcej informacji na CardView temat metod, zobacz odwołanie do klasy CardView). Należy pamiętać, że te atrybuty (z wyjątkiem koloru tła) akceptują wartość wymiaru, która jest liczbą dziesiętną, po której następuje jednostka. Na przykład 11.5dp określa 11,5 pikseli niezależnych od gęstości.

Dopełnienie

CardView oferuje pięć atrybutów dopełnienia, aby umieścić zawartość na karcie. Można je ustawić w formacie XML układu lub wywołać podobne metody w kodzie:

Atrybuty dopełnienia są wyjaśnione w następujący sposób:

• contentPadding – Wewnętrzne dopełnienie między widokami podrzędnymi CardView i wszystkich krawędzi karty.

• contentPaddingBottom – Wewnętrzne dopełnienie między widokami podrzędnymi a CardView dolną krawędzią karty.

• contentPaddingLeft – Wewnętrzne dopełnienie między widokami podrzędnymi a CardView lewą krawędzią karty.

• contentPaddingRight – Wewnętrzne dopełnienie między widokami podrzędnymi CardView a prawą krawędzią karty.

• contentPaddingTop – Wewnętrzne dopełnienie między widokami podrzędnymi i CardView górną krawędzią karty.

Atrybuty dopełnienia zawartości są względne względem granicy obszaru zawartości, a nie do dowolnego widżetu znajdującego się w obszarze zawartości. Jeśli na przykład contentPadding aplikacja do wyświetlania zdjęć została wystarczająco zwiększona, CardView przycina zarówno obraz, jak i tekst wyświetlany na karcie.

Elevation

CardView oferuje dwa atrybuty podniesienia uprawnień, aby kontrolować jego podniesienie i w rezultacie rozmiar cienia:

Atrybuty podniesienia uprawnień są wyjaśnione w następujący sposób:

• cardElevation — wysokość CardView (reprezentuje oś Z).

• cardMaxElevation – Maksymalna wartość CardViewwysokości obiektu .

Większe wartości zwiększenia rozmiaru cardElevation cienia, aby CardView wydawać się unosić się wyżej nad tłem. Atrybut cardElevation określa również kolejność rysowania nakładających się widoków; oznacza to, że CardView zostanie narysowany w innym nakładający się widok z wyższym ustawieniem podniesienia i powyżej wszystkich nakładających się widoków z niższym ustawieniem wysokości. To cardMaxElevation ustawienie jest przydatne w przypadku dynamicznego zmieniania podniesienia uprawnień przez aplikację — uniemożliwia rozszerzenie cienia przed limitem zdefiniowanym za pomocą tego ustawienia.

Promień rogu i kolor tła

CardView oferuje atrybuty, których można użyć do kontrolowania promienia rogu i koloru tła. Te dwie właściwości umożliwiają zmianę ogólnego stylu elementu CardView:

Te atrybuty są wyjaśnione w następujący sposób:

• cardCornerRadius — promień rogu wszystkich narożników obiektu CardView.

• cardBackgroundColor — kolor tła elementu CardView.

Na tym diagramie cardCornerRadius ustawiono bardziej zaokrąglony 10dp i cardBackgroundColor jest ustawiony na "#FFFFCC" wartość (jasnożółty).

Zgodność

Można użyć CardView w wersjach systemu Android starszych niż Android 5.0 Lollipop. Ponieważ CardView jest częścią biblioteki obsługi systemu Android w wersji 7, można używać z CardView systemem Android 2.1 (poziom 7 interfejsu API) i nowszym. Należy jednak zainstalować pakiet zgodnie z opisem Xamarin.Android.Support.v7.CardView w sekcji Wymagania powyżej.

CardView wykazuje nieco inne zachowanie na urządzeniach przed Lollipop (poziom 21 interfejsu API):

• CardView używa programowej implementacji w tle, która dodaje dodatkowe dopełnienie.

• CardView nie przycina widoków podrzędnych, które przecinają się z CardViewzaokrąglonymi rogami.

Aby ułatwić zarządzanie tymi różnicami zgodności, CardView udostępnia kilka dodatkowych atrybutów, które można skonfigurować w układzie:

• cardPreventCornerOverlap — ustaw ten atrybut, aby true dodać dopełnienie, gdy aplikacja jest uruchomiona we wcześniejszych wersjach systemu Android (poziom 20 i starsze). To ustawienie uniemożliwia CardView przecięcie zawartości za CardViewpomocą zaokrąglonych narożników.

• cardUseCompatPadding — ustaw ten atrybut na wartość , aby true dodać dopełnienie, gdy aplikacja jest uruchomiona w wersjach systemu Android w wersji lub nowszej niż poziom 21 interfejsu API. Jeśli chcesz używać CardView na urządzeniach wstępnych Lollipop i mieć to samo na Lollipop (lub nowszym), ustaw ten atrybut na truewartość . Po włączeniu tego atrybutu dodaje dodatkowe dopełnienie w CardView celu rysowania cieni podczas uruchamiania na urządzeniach przed lollipop. Pomaga to przezwyciężyć różnice w dopełnianiu, które są wprowadzane, gdy implementacje w tle przed Lollipop są w mocy.

Aby uzyskać więcej informacji na temat zachowania zgodności z wcześniejszymi wersjami systemu Android, zobacz Obsługa zgodności.

Podsumowanie

W tym przewodniku wprowadzono nowy CardView widżet dołączony do systemu Android 5.0 (Lollipop). Pokazano w nim domyślny CardView wygląd i wyjaśniono, jak dostosować CardView , zmieniając jego wysokość, zaokrąglenie rogu, dopełnienie zawartości i kolor tła. Wymieniono CardView w nim atrybuty układu (z diagramami referencyjnymi) i wyjaśniono, jak używać CardView na urządzeniach z systemem Android w wersji starszej niż Android 5.0 Lollipop. Aby uzyskać więcej informacji na temat CardViewklasy , zobacz dokumentację klasy CardView.

Linki powiązane

• Wprowadzenie do lollipop
• Dokumentacja klasy CardView