برنامهها اغلب نیاز دارند دادهها را در محفظههایی با استایل مشابه نمایش دهند، مانند محفظههایی که اطلاعات موارد موجود در فهرست را در خود نگه میدارند. این سیستم 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>
قطعه کد قبلی چیزی شبیه به زیر تولید می کند، با این فرض که شما از همان تصویر آرم اندروید استفاده می کنید:
کارت در این مثال با یک ارتفاع پیش فرض به سمت صفحه کشیده شده است که باعث می شود سیستم سایه ای را زیر آن بکشد. می توانید یک ارتفاع سفارشی برای کارت با ویژگی card_view:cardElevation
ارائه دهید. کارتی که در ارتفاع بالاتر قرار دارد سایه روشنتری دارد و کارتی در ارتفاع پایینتر سایه روشنتری دارد. CardView
از ارتفاع واقعی و سایههای پویا در اندروید 5.0 (سطح API 21) و بالاتر استفاده میکند.
از این ویژگی ها برای سفارشی کردن ظاهر ویجت CardView
استفاده کنید:
- برای تنظیم شعاع گوشه در طرحبندیهای خود، از ویژگی
card_view:cardCornerRadius
استفاده کنید. - برای تنظیم شعاع گوشه در کد خود، از روش
CardView.setRadius
استفاده کنید. - برای تنظیم رنگ پسزمینه کارت، از ویژگی
card_view:cardBackgroundColor
استفاده کنید.