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

تجربة طريقة ComposeAllowed

Jetpack Compose هي مجموعة أدوات واجهة المستخدم التي ننصح بها لنظام التشغيل Android. تعرَّف على كيفية استخدام التنسيقات في Compose.

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

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

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

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

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

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

رائع

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.