Karta dayalı düzen oluşturma

Oluşturma yöntemini deneyin

Jetpack Compose, Android için önerilen kullanıcı arayüzü araç setidir. Compose'da düzenlerle nasıl çalışacağınızı öğrenin.

Materyal 3’teki kart → 'nı inceleyin.

Not: Daha iyi bir kullanıcı deneyimi için Materyal Tasarım Kartları başlıklı makaleyi inceleyin.

Uygulamaların genellikle verileri benzer tarzda kapsayıcılarda (ör. bir listedeki öğelerle ilgili bilgileri içeren kapsayıcılar) göstermesi gerekir. Sistem, bilgileri platform genelinde tutarlı bir görünüme sahip kartlarda göstermeniz için CardView API'sini sağlar. Örneğin, kartlar içeren görüntü grubu üzerinde varsayılan bir yüksekliğe sahiptir. Bu nedenle sistem, kartların altına gölgeler çizer. Kartlar, yüksek riskli kullanıcıların görüntüleme sayısını artırırken kapsayıcı için tutarlı bir stil sağlar.

Şekil 1. Kartlara dayalı bir uygulama kullanıcı arayüzü.

Bağımlılıkları ekleme

CardView widget'ı AndroidX'in bir parçasıdır. Bunu şurada kullanmak için: aşağıdaki bağımlılığı uygulama modülünüzün build.gradle parametresine ekleyin dosya:

Eski

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

Kotlin

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

Kart oluştur

CardView kullanmak için düzen dosyanıza ekleyin. Diğer görünümleri içerecek bir görünüm grubu olarak kullanın. Aşağıdaki örnekte, CardView bir ImageView ve kullanıcıya bazı bilgileri göstermek için birkaç TextViews içerir:

<?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>

Önceki kod snippet'i, aynı Android logo resmini kullandığınız varsayılarak aşağıdakine benzer bir sonuç verir:

Şekil 2. CardView tabanlı düzene ilişkin temel bir örnek.

Bu örnekteki kart, ekrana varsayılan bir yükseklikle çizilmiştir. bu, sistemin bunun altında bir gölge çizmesine neden olur. Özel bir yükseklik belirleyebilirsiniz card_view:cardElevation özelliğine sahip bir kart için. Daha yüksek değerde bir kart yükseklik daha fazla gölgeye, daha düşük yükseklikteki bir karta ise daha açık gölge. CardView, Android'de gerçek yükseklik ve dinamik gölgeler kullanır 5.0 (API düzeyi 21) ve sonraki sürümler.

CardView widget'ının görünümünü özelleştirmek için aşağıdaki özellikleri kullanın:

• Düzenlerinizde köşe yarıçapını ayarlamak için card_view:cardCornerRadius kullanın özelliğini gönderin.
• Kodunuzda köşe yarıçapını ayarlamak için CardView.setRadius yöntemini kullanın.
• Bir kartın arka plan rengini ayarlamak için card_view:cardBackgroundColor özelliğini kullanın.