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 boyutu (ö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.
  • İçerik tabanlı: 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 adresindeki 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 değerine 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, LazyColumn ve LazyRow gibi bileşenleri destekleyen SubcomposeLayout öğesinin doğal boyutlarının sorgulanmasını yasaklar.

Standart bir esnek parça 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("LazyColumn 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 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ş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()
}

Adlandırılmış alanlarla kılavuz alanlarını tanımlama

Adlandırılmış alanlar, kılavuz alanları olarak adlandırılan kılavuz hücre gruplarına adlar eklemenize olanak tanır. Kullanıcı arayüzü öğelerini ızgaraya yerleştirirken koordinat dizinleri yerine bu adları kullanabilirsiniz.

Adlandırılmış alanlar kullanmanın kod okunabilirliği açısından iki temel avantajı vardır:

  • Izgara düzeni tanımlanırken beklenen içeriğin amacı ve yerleşimi net olmalıdır.
  • İçerik eklenirken bu içeriğin amacı net olmalıdır.

Karmaşık düzenleri net bir şekilde düzenlemek için semantik ızgara alanları tanımlayarak fiziksel ızgara yapınızı alt yerleşimden ayırabilirsiniz.

config lambda'sının içinde, ızgarada adlandırılmış alanları kaydetmek için GridConfigurationScope'deki area işlevini kullanın. Ardından, ilgili alan tanımlayıcısıyla birlikte gridItem değiştiricisini kullanarak alt composable'ları bu alanlara atayabilirsiniz. area işlevi, bir anlamsal tanımlayıcıyı (ör. enum sınıf değeri veya dize anahtarı) bir dizi fiziksel ızgara koordinatıyla eşler. Izgara çizgileri ve dizinler 1 tabanlıdır (yani ilk satır 1, ilk sütun ise 1'dır).

Örneğin, dört alan kimliğine sahip bir ızgara tanımladığınızı varsayalım:

/**
 * An enum representing the IDs for named areas within the grid.
 */
enum class GridAreaNames {
    Area1,
    Area2,
    Area3,
    Area4
}

areaId parametresini kullanarak alanın adını, hücre koordinatları ve aralıklarıyla birlikte belirtin. gridItem değiştiricisi, her alt öğeyi belirlenen ızgara alanına atamak için anahtar olarak areaId öğesini kullanır. Bu durum, aşağıdaki örnekte gösterilmiştir:

Grid(
    config = {
        // Define a single column that takes all available width.
        repeat(2) { column(0.5f) }

        // Define four rows, each taking 25% of the total height.
        repeat(4) { row(0.25f) }

        // Define named grid areas by associating an areaId with specific row and column indices.
        // Row and column indices are 1-based.
        area(areaId = GridAreaNames.Area1, row = 1, column = 1, columnSpan = 2)
        area(areaId = GridAreaNames.Area2, row = 2, column = 1, rowSpan = 3)
        area(areaId = GridAreaNames.Area3, rows = 2..3, columns = 2..2)
        area(areaId = GridAreaNames.Area4, row = 4, column = 2)

        gap(4.dp)
    },
    modifier = Modifier.size(360.dp)
) {
    PastelRedCard(
        "Area 1",
        // Use Modifier.gridItem(areaId) to place this composable into the
        // grid area defined with the matching ID in the config block.
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area1)
    )
    PastelGreenCard(
        "Area 2",
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area2)
    )
    PastelBlueCard(
        "Area 3",
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area3)
    )
    PastelYellowCard(
        "Area 4",
        modifier = Modifier.gridItem(areaId = GridAreaNames.Area4)
    )
}

Adlandırılmış alanları kullanarak, alt composable'ların sırasını veya parametrelerini değiştirmeniz gerekmeden config lambda'da fiziksel düzen ızgarasını (ör. satırları, sütunları veya parça boyutlarını değiştirme) yeniden düzenleyebilir ya da ayarlayabilirsiniz.

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