غالبًا ما تحتاج التطبيقات إلى عرض البيانات في حاويات ذات تصميم مشابه، مثل
الحاويات التي تحتوي على معلومات عن العناصر في قائمة. يقدّم النظام CardView
API لكي تتمكّن من عرض المعلومات في بطاقات ذات مظهر متّسق على المنصة. على سبيل المثال، تتمتع البطاقات بإرتفاع تلقائي فوق مجموعة العرض التي تحتوي عليها، لذلك يرسم النظام ظلالًا تحتها. توفر البطاقات وسيلة لتضمين مجموعة من
مع توفير نمط ثابت للحاوية.
إضافة التبعيات
تطبيق 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 نفسها:
يتم رسم البطاقة في هذا المثال على الشاشة بارتفاع تلقائي، ما يؤدي إلى رسم ظل تحتها. يمكنك تقديم مسقط رأسي مخصص
لبطاقة تتضمّن السمة card_view:cardElevation
بطاقة في متجر أعلى
المسقط الرأسي له ظل أكثر وضوحًا، وبطاقة عند ارتفاع منخفض
ظلاً أفتح. يستخدم تطبيق CardView
الارتفاع الحقيقي والظلال الديناميكية على الإصدار 5.0 من نظام التشغيل Android (المستوى 21 لواجهة برمجة التطبيقات) والإصدارات الأحدث.
استخدِم هذه السمات لتخصيص مظهر التطبيق المصغّر CardView
:
- لضبط نصف قطر الزاوية في التنسيقات، استخدِم سمة
card_view:cardCornerRadius
. - لضبط نصف قطر الزاوية في الرمز، استخدِم الطريقة
CardView.setRadius
. - لضبط لون خلفية بطاقة، استخدِم سمة
card_view:cardBackgroundColor
.