این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

یک طرح مبتنی بر کارت ایجاد کنید

برنامه‌ها اغلب نیاز دارند داده‌ها را در محفظه‌هایی با استایل مشابه نمایش دهند، مانند محفظه‌هایی که اطلاعات موارد موجود در فهرست را در خود نگه می‌دارند. این سیستم CardView API را برای شما فراهم می‌کند تا اطلاعات را در کارت‌هایی که ظاهری ثابت در سراسر پلتفرم دارند نشان دهید. به عنوان مثال، کارت‌ها دارای ارتفاع پیش‌فرض بالای گروه نمای حاوی خود هستند، بنابراین سیستم سایه‌هایی را در زیر آنها ترسیم می‌کند. کارت‌ها راهی برای حاوی گروهی از نماها ارائه می‌کنند و در عین حال یک سبک ثابت برای ظرف ارائه می‌دهند.

تصویری که نگاهی اجمالی به رابط کاربری اپلیکیشن بر اساس کارت‌ها را نشان می‌دهد — **شکل 1.** رابط کاربری برنامه بر اساس کارت.

وابستگی ها را اضافه کنید

ویجت CardView بخشی از AndroidX است. برای استفاده از آن در پروژه خود، وابستگی زیر را به فایل build.gradle ماژول برنامه خود اضافه کنید:

شیار

dependencies {
    implementation "androidx.cardview:cardview:1.0.0"
}

کاتلین

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>

قطعه کد قبلی چیزی شبیه به زیر تولید می کند، با این فرض که شما از همان تصویر آرم اندروید استفاده می کنید:

تصویری که یک کارت را نشان می دهد — **شکل 2.** یک مثال اساسی از چیدمان مبتنی بر CardView.

کارت در این مثال با یک ارتفاع پیش فرض به سمت صفحه کشیده شده است که باعث می شود سیستم سایه ای را زیر آن بکشد. می توانید یک ارتفاع سفارشی برای کارت با ویژگی card_view:cardElevation ارائه دهید. کارتی که در ارتفاع بالاتر قرار دارد سایه روشن‌تری دارد و کارتی در ارتفاع پایین‌تر سایه روشن‌تری دارد. CardView از ارتفاع واقعی و سایه‌های پویا در اندروید 5.0 (سطح API 21) و بالاتر استفاده می‌کند.

از این ویژگی ها برای سفارشی کردن ظاهر ویجت CardView استفاده کنید:

برای تنظیم شعاع گوشه در طرح‌بندی‌های خود، از ویژگی card_view:cardCornerRadius استفاده کنید.
برای تنظیم شعاع گوشه در کد خود، از روش CardView.setRadius استفاده کنید.
برای تنظیم رنگ پس‌زمینه کارت، از ویژگی card_view:cardBackgroundColor استفاده کنید.