إنشاء تنسيق مستند إلى بطاقة

تجربة طريقة ComposeAllowed

‫Jetpack Compose هي مجموعة أدوات واجهة المستخدم المُقترَحة لنظام التشغيل Android. تعرَّف على كيفية العمل مع التنسيقات في ميزة "الإنشاء".

البطاقة في المادة 3 →

ملاحظة: لتحسين تجربة المستخدم، يمكنك الاطّلاع على بطاقات تصميم المواد.

غالبًا ما تحتاج التطبيقات إلى عرض البيانات في حاويات ذات تصميم مشابه، مثل الحاويات التي تحتوي على معلومات عن العناصر في قائمة. يوفّر لك النظام واجهة برمجة تطبيقات CardView لعرض المعلومات في البطاقات ذات المظهر المتناسق على المنصة. على سبيل المثال، يكون للبطاقات مسقط رأسي افتراضي أعلى من مجموعة العرض التي تحتوي عليها، لذلك يرسم النظام ظلاً أسفلها. توفّر البطاقات طريقة لاحتواء مجموعة من العروض مع توفير نمط متّسق للحاوية.

الشكل 1. واجهة مستخدم التطبيق المستندة إلى البطاقات

إضافة التبعيات

أداة CardView هي جزء من AndroidX. لاستخدامها في مشروعك، أضِف التبعية التالية إلى ملف build.gradle وحدة تطبيقك:

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. مثال أساسي لتنسيق يستند إلى CardView

يتم رسم البطاقة في هذا المثال على الشاشة بارتفاع تلقائي، ما يؤدي إلى رسم ظل تحتها. يمكنك تقديم ارتفاع مخصّص للبطاقة التي تحتوي على السمة card_view:cardElevation. تُظهر البطاقة التي تكون على ارتفاعٍ أعلى ظلًّا أكثر وضوحًا، بينما تُظهر البطاقة التي تكون على ارتفاعٍ أدنى ظلًّا أخفّ. يستخدم CardView مسقط رأسي حقيقي وظلال ديناميكية على Android 5.0 (المستوى 21 من واجهة برمجة التطبيقات) والإصدارات الأحدث.

استخدِم السمات التالية لتخصيص مظهر تطبيق CardView المصغّر:

• لضبط نصف قطر الزاوية في التنسيقات، استخدِم السمة card_view:cardCornerRadius.
• لضبط نصف قطر الزاوية في الرمز، استخدِم الطريقة CardView.setRadius.
• لضبط لون خلفية بطاقة، استخدِم سمة card_view:cardBackgroundColor.