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

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

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

صورة تعرض لمحة عن واجهة مستخدم التطبيق استنادًا إلى بطاقات
الشكل 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. .