Kapsayıcı özelliklerini ayarlama

Farklı ekran boyutlarına ve içerik türlerine yanıt veren esnek düzenler oluşturmak için bir ızgara kapsayıcı yapılandırması tanımlayabilirsiniz. Bu sayfada aşağıdakilerin nasıl yapılacağı açıklanmaktadır:

• Izgara tanımlama: Satır ve sütunların temel yapısını oluşturun.
• Öğeleri ızgaraya yerleştirme: Öğelerin ızgara hücrelerine nasıl yerleştirildiğini ve akış yönünün nasıl değiştirileceğini öğrenin.
• Parça boyutunu yönetme: Parça boyutlarını ayarlamak için sabit, kesirli, esnek ve doğal boyutlandırma kullanın.
• Boşlukları ayarlama: Satırlar ve sütunlar arasındaki "olukları" yönetin.

Izgara tanımlama

Izgara, sütun ve satırlardan oluşur. Grid composable'ı, GridConfigurationScope içinde sütunları ve satırları tanımlamak için lambda kabul eden bir config parametresine sahiptir. Aşağıdaki örnekte, her biri Dp içinde belirtilen sabit boyuta sahip üç satır ve iki sütundan oluşan bir ızgara tanımlanmaktadır:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
}
DefineGrid.kt

Öğeleri ızgaraya yerleştirme

Grid, content lambda'sındaki kullanıcı arayüzü öğelerini alır ve bunları ızgara hücrelerine yerleştirir. Izgara, satırları ve sütunları açıkça tanımlayıp tanımlamadığınızdan bağımsız olarak öğeleri yerleştirir. Varsayılan olarak, Grid bir kullanıcı arayüzü öğesini satırdaki kullanılabilir ızgara hücresine yerleştirmeye çalışır; başarılı olamazsa bir sonraki satırdaki kullanılabilir ızgara hücresine yerleştirir. Boş hücre yoksa Grid yeni bir satır oluşturur.

Aşağıdaki örnekte, ızgarada altı ızgara hücresi bulunuyor ve her birine bir kart yerleştiriliyor (Şekil 1). Her ızgara hücresi 160dp x 90dp boyutundadır. Bu nedenle, toplam ızgara boyutu 320dp x 270dp olur.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
DefineGrid.kt

Şekil 1. Üç satır ve iki sütundan oluşan bir ızgaraya altı kart yerleştirilmiştir.

Bu varsayılan davranışı sütuna göre doldurma olarak değiştirmek için flow özelliğini GridFlow.Column olarak ayarlayın.

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp)
        flow = GridFlow.Column // Grid tries to place items to fill the column
    },
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridItem.kt

Şekil 2. GridFlow.Row (sol) ve GridFlow.Column (sağ).

Parça boyutlandırmasını yönetme

Satırlar ve sütunlar toplu olarak ızgara parçası olarak adlandırılır. Bir ızgara parçasının boyutunu aşağıdaki yöntemlerden birini kullanarak belirtebilirsiniz:

• Sabit (Dp): Belirli bir boyutu (ör. column(180.dp)) ayırır.
• Kesirli (Float): Toplam kullanılabilir alanın 0.0f ile 1.0f arasındaki bir yüzdesini ayırır (ör. %50 için row(0.5f)).
• Esnek (Fr): Sabit ve kesirli parçalar hesaplandıktan sonra kalan alanı orantılı olarak dağıtır. Örneğin, iki satır 1.fr ve 3.fr olarak ayarlanırsa ikincisi kalan yüksekliğin% 75'ini alır.
• İçerik tabanlı: Parçayı içindeki içeriğe göre boyutlandırır. Daha fazla bilgi için Izgara parçasının boyutunu doğal olarak belirleme başlıklı makaleyi inceleyin.

Aşağıdaki örnekte, satır yüksekliklerini tanımlamak için farklı parça boyutlandırma seçenekleri kullanılmaktadır:

Grid(
    config = {
        column(1f)

        row(100.dp)
        row(0.2f)
        row(1.fr)
        row(GridTrackSize.Auto)
    },
    modifier = Modifier.height(480.dp)
) {
    PastelRedCard("Fixed(100.dp)")
GridTrackSize.kt

Şekil 3. Satır yükseklikleri, Grid adresindeki dört temel parça boyutlandırma seçeneği kullanılarak tanımlanır.

Kılavuz yol boyutunu doğal olarak belirleme

Düzenin sabit bir kapsayıcıya zorlanmak yerine içeriğe uyarlanmasını istediğinizde Grid için içsel boyutlandırma kullanabilirsiniz. Izgara parçası boyutu aşağıdaki değerlerle belirlenir:

• GridTrackSize.MaxContent: İçeriğin maksimum doğal boyutunu kullanın (ör. genişlik, kaydırma içermeyen bir metin bloğundaki metnin tam uzunluğuna göre belirlenir).
• GridTrackSize.MinContent: İçeriğin minimum doğal boyutunu kullanın (ör. genişlik, bir metin bloğundaki en uzun tek kelimeye göre belirlenir).
• GridTrackSize.Auto: Kullanılabilir alana göre uyum sağlayan bir parça için esnek boyut kullanın. Varsayılan olarak MaxContent gibi davranır ancak içeriğini üst kapsayıcıya sığacak şekilde küçültür ve sarar.

Aşağıdaki örnekte iki metin yan yana yerleştirilmiştir. İlk metnin sütun boyutu, metni görüntülemek için gereken minimum genişliğe göre belirlenir. İkinci sütunun genişliği ise metnin gereken maksimum genişliğine bağlıdır.

Grid(
    config = {
        column(GridTrackSize.MinContent)
        column(GridTrackSize.MaxContent)
        row(1.0f)
    },
    modifier = Modifier.width(480.dp)
) {
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
    Text("Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras imperdiet." )
}
GridTrackSize.kt

Şekil 4. Sütunlarda belirtilen doğal boyutlar.

Satırlar ve sütunlar arasındaki boşlukları ayarlama

Izgara parçalarınız boyutlandırıldıktan sonra, parçalar arasındaki boşluğu hassaslaştırmak için ızgara boşluğunu değiştirebilirsiniz. Sütun aralığını columnGap işleviyle, satır aralığını ise rowGap ile belirtebilirsiniz. Aşağıdaki örnekte, her satır arasında 16dp, her sütun arasında ise 8dp boşluk vardır (Şekil 5).

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        rowGap(16.dp)
        columnGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt

5. Şekil Satırlar ve sütunlar arasındaki boşluklar.

Aynı sütun ve satır boyutundaki boşlukları tanımlamak ve tek bir işlev kullanarak sütun ve boşluk boyutlarını ayrı ayrı tanımlamak için gap kolaylık işlevini de kullanabilirsiniz. Aşağıdaki kod, ızgaraya 8dp boşlukları ekler:

Grid(
    config = {
        repeat(2) {
            column(160.dp)
        }
        repeat(3) {
            row(90.dp)
        }
        gap(8.dp) // Equivalent to columnGap(8.dp) and rowGap(8.dp)
    }
) {
    Card1()
    Card2()
    Card3()
    Card4()
    Card5()
    Card6()
}
GridGap.kt