Xamarin.Android CardView

  • Artikel

Das Cardview-Widget ist eine Benutzeroberflächenkomponente, die Text- und Bildinhalte in Ansichten darstellt, die Karten ähneln. In diesem Leitfaden wird erläutert, wie Sie CardView in Xamarin.Android-Anwendungen verwenden und anpassen und gleichzeitig die Abwärtskompatibilität mit früheren Android-Versionen aufrechterhalten.

Übersicht

Das Cardview in Android 5.0 (Lollipop) eingeführte Widget ist eine Ui-Komponente, die Text- und Bildinhalte in Ansichten darstellt, die Karten ähneln. CardView wird als FrameLayout Widget mit abgerundeten Ecken und einem Schatten implementiert. In der Regel wird verwendetCardView, um ein einzelnes Zeilenelement in einer Ansichtsgruppe oder GridView anzuzeigenListView. Der folgende Screenshot ist beispielsweise ein Beispiel für eine Reisereservierungs-App CardView, die -basierte Reisezielkarten in einem scrollbaren ListViewimplementiert:

Beispiel-App, die eine CardView für jedes Reiseziel verwendet

In diesem Leitfaden wird erläutert, wie Sie das CardView Paket zu Ihrem Xamarin.Android-Projekt hinzufügen, Ihrem Layout hinzufügen CardView und wie Sie die Darstellung von CardView in Ihrer App anpassen. Darüber hinaus enthält dieser Leitfaden eine detaillierte Liste der CardView Attribute, die Sie ändern können, einschließlich Attributen, die Ihnen bei der Verwendung CardView in Android-Versionen vor Android 5.0 Lollipop helfen.

Anforderungen

Für die Verwendung neuer Android 5.0- und höher-Features (einschließlich CardView) in Xamarin-basierten Apps ist Folgendes erforderlich:

  • Xamarin.Android – Xamarin.Android 4.20 oder höher muss mit Visual Studio oder Visual Studio für Mac installiert und konfiguriert werden.

  • Android SDK – Android 5.0 (API 21) oder höher muss über den Android SDK Manager installiert werden.

  • Java JDK 1.8 – JDK 1.7 kann verwendet werden, wenn Sie speziell die API-Ebene 23 und früher als Ziel verwenden. JDK 1.8 ist bei Oracle verfügbar.

Ihre App muss auch das Xamarin.Android.Support.v7.CardView Paket enthalten. So fügen Sie das Xamarin.Android.Support.v7.CardView Paket in Visual Studio für Mac hinzu:

  1. Öffnen Sie Ihr Projekt, klicken Sie mit der rechten Maustaste auf Pakete, und wählen Sie Pakete hinzufügen aus.

  2. Suchen Sie im Dialogfeld Pakete hinzufügen nach CardView.

  3. Wählen Sie Xamarin Support Library v7 CardView aus, und klicken Sie dann auf Paket hinzufügen.

So fügen Sie das Xamarin.Android.Support.v7.CardView Paket in Visual Studio hinzu:

  1. Öffnen Sie Ihr Projekt, klicken Sie mit der rechten Maustaste auf den Knoten Verweise (im Bereich Projektmappen-Explorer), und wählen Sie NuGet-Pakete verwalten... aus.

  2. Wenn das Dialogfeld NuGet-Pakete verwalten angezeigt wird, geben Sie CardView in das Suchfeld ein.

  3. Wenn Xamarin Support Library v7 CardView angezeigt wird, klicken Sie auf Installieren.

Informationen zum Konfigurieren eines Android 5.0-App-Projekts finden Sie unter Einrichten eines Android 5.0-Projekts. Weitere Informationen zum Installieren von NuGet-Paketen finden Sie unter Exemplarische Vorgehensweise: Einschließen eines NuGet-Pakets in Ihr Projekt.

Einführung in CardView

Die Standardeinstellung CardView ähnelt einem weißen Karte mit minimal abgerundeten Ecken und einem leichten Schatten. Das folgende Beispiellayout main.axml zeigt ein einzelnes CardView Widget an, das einen TextViewenthält:

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

Wenn Sie diesen XML-Code verwenden, um den vorhandenen Inhalt von "Main.axml" zu ersetzen, müssen Sie code in MainActivity.cs auskommentieren, der sich auf Ressourcen im vorherigen XML-Code bezieht.

In diesem Layoutbeispiel wird eine Standardeinstellung CardView mit einer einzelnen Textzeile erstellt, wie im folgenden Screenshot gezeigt:

Screenshot von CardView mit weißem Hintergrund und Textzeile

In diesem Beispiel wird der App-Stil auf das helle Materialdesign (Theme.Material.Light) festgelegt, sodass die CardView Schatten und Kanten leichter zu erkennen sind. Weitere Informationen zum Design von Android 5.0-Apps finden Sie unter MaterialDesign. Im nächsten Abschnitt erfahren Sie, wie Sie eine Anwendung anpassen CardView .

Anpassen von CardView

Sie können die grundlegenden CardView Attribute ändern, um die Darstellung von CardView in Ihrer App anzupassen. Beispielsweise kann die Höhe des CardView erhöht werden, um einen größeren Schatten zu werfen (wodurch die Karte höher über dem Hintergrund zu schweben scheint). Außerdem kann der Eckenradius vergrößert werden, um die Ecken des Karte abgerundeter zu machen.

Im nächsten Layoutbeispiel wird eine angepasste CardView verwendet, um eine Simulation eines Druckfotos (ein "Momentaufnahme") zu erstellen. Ein ImageView wird zum CardView Anzeigen des Bilds hinzugefügt, und ein TextView wird unter dem ImageView positioniert, um den Titel des Bilds anzuzeigen. In diesem Beispiellayout weist die CardView folgenden Anpassungen auf:

  • Die cardElevation wird auf 4dp erhöht, um einen größeren Schatten zu werfen.
  • Die cardCornerRadius wird auf 5dp erhöht, damit die Ecken abgerundeter erscheinen.

Da CardView von der Android v7-Supportbibliothek bereitgestellt wird, sind ihre Attribute nicht im android: Namespace verfügbar. Daher müssen Sie Ihren eigenen XML-Namespace definieren und diesen Namespace als CardView Attributpräfix verwenden. Im folgenden Layoutbeispiel wird diese Zeile verwendet, um einen Namespace namens cardviewzu definieren:

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

Sie können diesen Namespace card_view oder sogar myapp aufrufen, wenn Sie auswählen (der Zugriff ist nur innerhalb des Bereichs dieser Datei möglich). Unabhängig davon, wie Sie diesen Namespace aufrufen, müssen Sie ihn verwenden, um dem CardView Attribut, das Sie ändern möchten, ein Präfix zu setzen. In diesem Layoutbeispiel ist der cardview Namespace das Präfix für cardElevation und 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>

Wenn dieses Layoutbeispiel verwendet wird, um ein Bild in einer Fotoanzeige-App anzuzeigen, hat das CardView Aussehen eines Fotos Momentaufnahme, wie im folgenden Screenshot dargestellt:

CardView mit einem Bild und Untertitel unterhalb des Bilds

Dieser Screenshot stammt aus der RecyclerViewer-Beispiel-App , die ein RecyclerView Widget verwendet, um eine Bildlaufliste mit Bildern zum Anzeigen von CardView Fotos anzuzeigen. Weitere Informationen zu RecyclerViewfinden Sie im Leitfaden zu RecyclerView .

Beachten Sie, dass mehrere CardView untergeordnete Ansichten in seinem Inhaltsbereich angezeigt werden können. Im obigen Beispiel für die Fotoanzeige-App besteht der Inhaltsbereich beispielsweise aus einem ListView , der eine ImageView und eine TextViewenthält. Obwohl CardView Instanzen oft vertikal angeordnet sind, können Sie sie auch horizontal anordnen (ein Beispielscreenshot finden Sie unter Erstellen eines benutzerdefinierten Ansichtsstils ).

CardView-Layoutoptionen

CardView Layouts können angepasst werden, indem ein oder mehrere Attribute festgelegt werden, die sich auf die Abstands-, Höhen-, Eckenradius und Hintergrundfarbe auswirken:

Diagramm der CardView-Attribute

Jedes Attribut kann auch dynamisch geändert werden, indem eine Entsprechungsmethode CardView aufgerufen wird (weitere Informationen zu CardView Methoden finden Sie in der CardView-Klassenreferenz). Beachten Sie, dass diese Attribute (mit Ausnahme der Hintergrundfarbe) einen Dimensionswert akzeptieren, bei dem es sich um eine Dezimalzahl gefolgt von der Einheit handelt. Gibt beispielsweise 11.5dp 11,5 dichteunabhängige Pixel an.

Auffüllen

CardViewbietet fünf Auffüllungsattribute zum Positionieren von Inhalten innerhalb der Karte. Sie können sie in Ihrem Layout-XML festlegen oder analoge Methoden im Code aufrufen:

Diagramm der CardView-Abstandsattribute

Die Auffüllungsattribute werden wie folgt erläutert:

  • contentPadding– Innere Auffüllung zwischen den untergeordneten Ansichten der CardView und allen Rändern des Karte.

  • contentPaddingBottom– Innenabstand zwischen den untergeordneten Ansichten des CardView und des unteren Rands des Karte.

  • contentPaddingLeft– Innenabstand zwischen den untergeordneten Ansichten des CardView und des linken Rands des Karte.

  • contentPaddingRight– Innenabstand zwischen den untergeordneten Ansichten des CardView und des rechten Rands des Karte.

  • contentPaddingTop– Innenabstand zwischen den untergeordneten Ansichten der CardView und dem oberen Rand des Karte.

Inhaltsabstandsattribute sind relativ zur Grenze des Inhaltsbereichs und nicht zu einem bestimmten Widget innerhalb des Inhaltsbereichs. Wenn z. BcontentPadding. in der Fotoanzeige-App ausreichend erhöht wurde, würde sowohl CardView das Bild als auch der Text, der auf der Karte angezeigt wird, zuschneiden.

Elevation

CardView bietet zwei Höhenattribute, um die Höhe und somit die Größe des Schattens zu steuern:

Diagramm der CardView-Rechteattribute

Die Rechteerweiterungsattribute werden wie folgt erläutert:

  • cardElevation – Die Höhe des CardView (stellt seine Z-Achse dar).

  • cardMaxElevation – Der maximale Wert der CardView-Höhe des -Werts.

Größere Werte erhöhen cardElevation die Schattengröße, damit CardView sie höher über dem Hintergrund schweben. Das cardElevation -Attribut bestimmt auch die Zeichnungsreihenfolge von sich überlappenden Sichten. Das heißt, die CardView wird unter einer anderen überlappenden Ansicht mit einer einstellung mit höherer Höhe und über allen sich überlappenden Ansichten mit einer einstellung mit niedrigerer Höhe gezeichnet. Die cardMaxElevation Einstellung ist nützlich, wenn ihre App die Rechte dynamisch ändert. Dadurch wird verhindert, dass der Schatten den grenzwert überschreitet, den Sie mit dieser Einstellung definieren.

Eckenradius und Hintergrundfarbe

CardView bietet Attribute, mit denen Sie den Eckenradius und die Hintergrundfarbe steuern können. Mit diesen beiden Eigenschaften können Sie den Gesamtstil von CardViewändern:

Diagramm der Attribute für Eck-Radious und Hintergrundfarbe von CardView

Diese Attribute werden wie folgt erläutert:

  • cardCornerRadius – Der Eckenradius aller Ecken von CardView.

  • cardBackgroundColor – Die Hintergrundfarbe von CardView.

In diesem Diagramm cardCornerRadius ist auf eine gerundete 10dp cardBackgroundColor und auf "#FFFFCC" (hellgelb) festgelegt.

Kompatibilität

Sie können auf Android-Versionen vor Android 5.0 Lollipop verwenden CardView . Da CardView Teil der Android v7-Supportbibliothek ist, können Sie mit Android 2.1 (API-Ebene 7) und höher verwenden CardView . Sie müssen das Xamarin.Android.Support.v7.CardView Paket jedoch installieren, wie oben unter Anforderungen beschrieben.

CardView weist auf Geräten vor Lollipop ein etwas anderes Verhalten auf (API-Ebene 21):

  • CardView verwendet eine programmgesteuerte Schattenimplementierung, die zusätzliche Auffüllung hinzufügt.

  • CardView schneidet keine untergeordneten Ansichten ab, die sich mit den CardViewabgerundeten Ecken des S überschneiden.

Um diese Kompatibilitätsunterschiede zu verwalten, stellt mehrere zusätzliche Attribute bereit, CardView die Sie in Ihrem Layout konfigurieren können:

  • cardPreventCornerOverlap – Legen Sie dieses Attribut auf fest true , um den Abstand hinzuzufügen, wenn Ihre App in früheren Android-Versionen ausgeführt wird (API-Ebene 20 und früher). Diese Einstellung verhindert, dass CardView sich Inhalte mit den CardViewabgerundeten Ecken des Inhalts überschneiden.

  • cardUseCompatPadding – Legen Sie dieses Attribut auf fest true , um den Abstand hinzuzufügen, wenn Ihre App in Android-Versionen mit oder größer als API-Ebene 21 ausgeführt wird. Wenn Sie auf Pre-Lollipop-Geräten verwenden CardView möchten und auf Lollipop (oder höher) gleich aussehen möchten, legen Sie dieses Attribut auf fest true. Wenn dieses Attribut aktiviert ist, fügt zusätzliche Auffüllung hinzu, CardView um Schatten zu zeichnen, wenn es auf Vor-Lollipop-Geräten ausgeführt wird. Dies hilft, die Unterschiede beim Auffüllen zu überwinden, die eingeführt werden, wenn programmgesteuerte Schattenimplementierungen vor Lollipop wirksam sind.

Weitere Informationen zur Aufrechterhaltung der Kompatibilität mit früheren Android-Versionen finden Sie unter Verwalten der Kompatibilität.

Zusammenfassung

In diesem Leitfaden wurde das neue CardView Widget in Android 5.0 (Lollipop) vorgestellt. Sie veranschaulichte die Standarddarstellung CardView und erläuterte, wie sie durch Ändern der Höhe, der Eckenrunde, der Inhaltsauffüllung und der Hintergrundfarbe angepasst CardView werden. Es wurden die CardView Layoutattribute (mit Verweisdiagrammen) aufgelistet und die Verwendung CardView auf Android-Geräten vor Android 5.0 Lollipop erläutert. Weitere Informationen zu CardViewfinden Sie in der Referenz zur CardView-Klasse.