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

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

تحتاج التطبيقات غالبًا إلى عرض بيانات في حاويات ذات تصميم مشابه، مثل الحاويات التي تحتوي على معلومات حول العناصر في قائمة. يوفّر لك النظام واجهة برمجة التطبيقات 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.