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

Izgara, sütun ve satırlardan oluşur. Grid composable'ı, GridConfigurationScope içinde sütunları ve satırları tanımlamak için bir lambda kabul eden 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)
        }
    }
) {
}

Öğ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 var 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()
}

Üç satır ve iki sütundan oluşan bir ızgaraya altı kart yerleştirilmiştir.
Ş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()
}

Akış işlevi, öğeleri yerleştirme yönünü değiştirir.
Ş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 boyut (ör. column(180.dp)) ayırır.
  • Yüzde (Float): 0.0f'ten 1.0f'e toplam kullanılabilir alanın bir yüzdesini ayırır (ör. %50 için row(0.5f)).
  • Esnek (Fr): Sabit ve yüzdelik 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.
  • Doğal: Parçayı içindeki içeriğe göre boyutlandırır. Daha fazla bilgi için Izgara parça 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)")
        PastelGreenCard("Percentage(0.2f)")
    PastelBlueCard("Flex(1.fr)")
        PastelYellowCard("Auto")

}

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

Esnek kılavuz parçaları için minimum boyutu ayarlama

Bir ızgara kapsayıcısında yer kalmadığında standart esnek parça 0.dp'ya kadar küçülebilir. Bunu önlemek ve içeriğin sıkıştırılmamasını sağlamak için GridTrackSize.MinMax kullanarak parçayı esnek tutarken açık bir minimum boyut uygulayın.

Aşağıdaki örnekte ilk satıra en az 100.dp ayrılıyor:

Grid(
    config = {
        column(1f)
        // The first row has a minimum height of 100.dp and can expand to 
        // the half of the remaining space.
        row(GridTrackSize.MinMax(100.dp, 1.fr))
        // The second row takes the half of the remaining space.
        row(1.fr)
        // The third row has a fixed height of 200.dp.
        row(200.dp)
    },
    modifier = Modifier.size(360.dp) // Total grid height is 360.dp
) {
    PastelRedCard("MinMax(100.dp, 1.fr)")
        PastelGreenCard("Flex(1.fr)")
    PastelBlueCard("Fixed(200.dp)")
}

Dört temel parça boyutlandırma seçeneği kullanılarak tanımlanan satır yükseklikleri.
Şekil 4. İlk satırın yüksekliği en az 100.dp olmalıdır.

Lazy listeleri yerleştirmek için minimum kılavuz yolu boyutunu ayarlayın

Standart esnek parçalar, temel bir boyut oluşturmak için alt öğelerinin doğal boyutlarını otomatik olarak sorgular. Ancak Jetpack Compose, SubcomposeLayout öğesinin doğal boyutlarının sorgulanmasını yasaklar. Bu öğe, LazyColumn ve LazyRow gibi bileşenleri destekler.

Standart esnek bir parçanın içine tembel liste yerleştirmek IllegalStateException kilitlenmesine neden oluyor. Tembel listeleri esnek bir ızgara parçasının içine güvenli bir şekilde yerleştirmek için MinMax ile açık bir minimum boyut (ör. 0.dp) kullanarak dahili ölçüm adımını atlayın.

Grid(
    config = {
        column(1f)
        // The first row's height is determined by the height of the Text composable.
        row(GridTrackSize.Auto)
        // The second row occupies the remaining space, allowing the LazyColumn to scroll.
        row(GridTrackSize.MinMax(0.dp, 1.fr))

        gap(8.dp)
    },
    modifier = Modifier.size(width = 170.dp, height = 240.dp)
) {
    Text("Lazy column in a Grid")
    // The LazyColumn is placed in the second row, filling the remaining space.
    LazyColumn(verticalArrangement = Arrangement.spacedBy(4.dp)) {
        items(100) { number ->
            PastelGreenCard("Card $number")
        }
    }
}

Dört temel parça boyutlandırma seçeneği kullanılarak tanımlanan satır yükseklikleri.
5. Şekil LazyColumn bir tablo hücresinde.

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çerik boyutlandırmayı 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: Mevcut 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.")
}

Sütunlarda belirtilen doğal boyutlar.
5. Şekil 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()
}

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

Aynı sütun ve satır boyutundaki boşlukları tanımlamak için gap kolaylık işlevini de kullanabilirsiniz. Ayrıca, tek bir işlev kullanarak sütun ve boşluk boyutlarını ayrı ayrı tanımlayabilirsiniz. Aşağıdaki kod, ızgaraya 8dp boşluk 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()
}

Önceki
Başlama
Sonraki
Öğe özelliklerini ayarlama