יצירת פריסה שמבוססת על כרטיסים

רוצה לנסות את שיטת הכתיבה?
'Jetpack פיתוח נייטיב' היא ערכת הכלים המומלצת לממשק המשתמש ל-Android. הסבר איך עובדים עם פריסות ב'כתיבה'.

לעיתים קרובות אפליקציות צריכות להציג נתונים בקונטיינרים בעלי סגנון דומה, כמו מאגרי תגים שמאחסנים מידע לגבי הפריטים ברשימה. המערכת מספקת את CardView API להציג מידע בכרטיסים בעלי מראה עקבי בכל הפלטפורמה. עבור לדוגמה, כברירת מחדל לכרטיסים יש גובה ברירת מחדל מעל לקבוצת התצוגות המפורטות שלהם, כך המערכת משרטטת מתחתיהם צללים. כרטיסים מספקים דרך להכיל קבוצה של צפיות תוך שמירה על סגנון עקבי עבור המאגר.

תמונה שמציגה הצצה לממשק המשתמש של האפליקציה על סמך כרטיסים
איור 1. ממשק משתמש של האפליקציה שמבוסס על כרטיסים.

מוסיפים את יחסי התלות

הווידג'ט CardView הוא חלק מ-AndroidX. כדי להשתמש בה ב צריך להוסיף את התלות הבאה ל-build.gradle של מודול האפליקציה file:

Groovy

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

Kotlin

dependencies {
    implementation("androidx.cardview:cardview:1.0.0")
}

יצירת כרטיסים

כדי להשתמש בקובץ CardView, צריך להוסיף אותו לקובץ הפריסה. להשתמש בה כקבוצת תצוגה מפורטת, מכילים תצוגות אחרות. בדוגמה הבאה, השדה CardView מכיל ImageView וכמה TextViews כדי להציג למשתמש מידע:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="16dp"
    android:background="#E0F7FA"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <androidx.cardview.widget.CardView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <androidx.constraintlayout.widget.ConstraintLayout
            android:padding="4dp"
            android:layout_width="match_parent"
            android:layout_height="match_parent">

            <ImageView
                android:id="@+id/header_image"
                android:layout_width="match_parent"
                android:layout_height="200dp"
                android:src="@drawable/logo"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent" />

            <TextView
                android:id="@+id/title"
                style="@style/TextAppearance.MaterialComponents.Headline3"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a title"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/header_image" />

            <TextView
                android:id="@+id/subhead"
                style="@style/TextAppearance.MaterialComponents.Subtitle2"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a subhead"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/title" />

            <TextView
                android:id="@+id/body"
                style="@style/TextAppearance.MaterialComponents.Body1"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginTop="4dp"
                android:text="I'm a supporting text. Very Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toBottomOf="@id/subhead" />
        </androidx.constraintlayout.widget.ConstraintLayout>
    </androidx.cardview.widget.CardView>
</androidx.constraintlayout.widget.ConstraintLayout>

קטע הקוד הקודם מפיק משהו שדומה לזה, בהנחה משתמשים באותה תמונת לוגו של Android:

תמונה שמוצג בה כרטיס אחד
איור 2. דוגמה בסיסית לפריסה מבוססת-כרטיס.

הכרטיס בדוגמה הזו מצויר למסך עם גובה ברירת מחדל, גורם למערכת לצייר צל מתחתיו. אפשר לספק גובה מותאם אישית. לכרטיס עם המאפיין card_view:cardElevation. כרטיס בסכום גבוה יותר בקשר גובה-רוחב יש צל בולט יותר, ולכרטיס בגובה נמוך יותר יש צל בהיר יותר. CardView משתמש בגובה אמיתי ובאזורים כהים דינמיים ב-Android 5.0 (רמת API 21) ואילך.

המאפיינים הבאים מאפשרים לכם להתאים אישית את המראה של הווידג'ט CardView:

  • כדי להגדיר את רדיוס הפינות של הפריסות בפריסות, יש להשתמש במאפיין card_view:cardCornerRadius .
  • כדי להגדיר את רדיוס הפינות בקוד, צריך להשתמש בשיטה CardView.setRadius.
  • כדי להגדיר את צבע הרקע של כרטיס, צריך להשתמש בcard_view:cardBackgroundColor .