Oluşturma düzeniyle ilgili temel bilgiler

Jetpack Compose, uygulamanızın kullanıcı arayüzünü tasarlamayı ve oluşturmayı çok daha kolay hale getirir. Oluşturma işlevi, aşağıdakiler aracılığıyla durumu kullanıcı arayüzü öğelerine dönüştürür:

1. Öğelerin bileşimi
2. Öğelerin düzeni
3. Öğelerin çizimi

Bu dokümanda, öğelerin düzenine odaklanılarak Compose'un kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olmak için sunduğu bazı yapı taşları açıklanmaktadır.

Oluşturma'daki düzenlerin hedefleri

Jetpack Compose'un sayfa düzeni sistemi uygulamasının iki ana hedefi vardır:

• Yüksek performans
• Özel düzenler kolayca yazabilme

Birleştirilebilir işlevler hakkında temel bilgiler

Kompozit işlevler, Compose'un temel yapı taşıdır. Birleştirilebilir işlev, kullanıcı arayüzünüzün bir bölümünü tanımlayan Unit yayan bir işlevdir. İşlev, bazı girişleri alır ve ekranda gösterilenleri oluşturur. Birleştirilebilirler hakkında daha fazla bilgi için Mental model oluşturma belgelerine göz atın.

Birleştirilebilir işlevler birden fazla kullanıcı arayüzü öğesi yayınlayabilir. Ancak, öğelerin nasıl düzenlenmesi gerektiği konusunda yol göstermezseniz Oluştur, öğeleri beğenmediğiniz bir şekilde düzenleyebilir. Örneğin, bu kod iki metin öğesi oluşturur:

@Composable
fun ArtistCard() {
    Text("Alfred Sisley")
    Text("3 minutes ago")
}
LayoutBasicsSnippets.kt

Oluştur, metin öğelerini nasıl düzenlenmesini istediğinize dair bir kılavuz olmadan üst üste yığarak okunamaz hale getirir:

Oluştur, kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olacak hazır bir düzen koleksiyonu sağlar ve kendi özel düzenlerinizi tanımlamayı kolaylaştırır.

Standart düzen bileşenleri

Çoğu durumda, Oluştur'un standart düzen öğelerini kullanmanız yeterlidir.

Öğeleri ekrana dikey olarak yerleştirmek için Column simgesini kullanın.

@Composable
fun ArtistCardColumn() {
    Column {
        Text("Alfred Sisley")
        Text("3 minutes ago")
    }
}
LayoutBasicsSnippets.kt

Benzer şekilde, öğeleri ekrana yatay olarak yerleştirmek için Row simgesini kullanın. Hem Column hem de Row, içerdikleri öğelerin hizalamasını yapılandırmayı destekler.

@Composable
fun ArtistCardRow(artist: Artist) {
    Row(verticalAlignment = Alignment.CenterVertically) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column {
            Text(artist.name)
            Text(artist.lastSeenOnline)
        }
    }
}
LayoutBasicsSnippets.kt

Öğeleri birbirinin üzerine yerleştirmek için Box simgesini kullanın. Box, içerdiği öğelerin belirli bir şekilde hizalanmasını da destekler.

@Composable
fun ArtistAvatar(artist: Artist) {
    Box {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Icon(Icons.Filled.Check, contentDescription = "Check mark")
    }
}
LayoutBasicsSnippets.kt

Genellikle bu yapı taşlarını kullanmak yeterlidir. Bu düzenleri, uygulamanıza uygun daha ayrıntılı bir düzende birleştirmek için kendi birleştirilebilir işlevinizi yazabilirsiniz.

Çocukların bir Row içindeki konumunu ayarlamak için horizontalArrangement ve verticalAlignment bağımsız değişkenlerini ayarlayın. Column için verticalArrangement ve horizontalAlignment bağımsız değişkenlerini ayarlayın:

@Composable
fun ArtistCardArrangement(artist: Artist) {
    Row(
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.End
    ) {
        Image(bitmap = artist.image, contentDescription = "Artist image")
        Column { /*...*/ }
    }
}
LayoutBasicsSnippets.kt

Düzen modeli

Düzenleme modelinde kullanıcı arayüzü ağacı tek bir geçişte düzenlenir. Her düğümden önce kendisini, ardından alt öğelerini ölçüm yapması istenir. Bu işlem sırasında boyut kısıtlamaları ağaçtan alt öğelere iletilir. Ardından, yaprak düğümleri boyutlandırılır ve yerleştirilir. Çözüme ulaştırılan boyutlar ve yerleşim talimatları ağaca geri aktarılır.

Özetlemek gerekirse ebeveynler çocuklarının ölçümünü yaptıktan sonra ölçülür ve yerleştirilir.

Aşağıdaki SearchResult işlevini ele alalım.

@Composable
fun SearchResult() {
    Row {
        Image(
            // ...
        )
        Column {
            Text(
                // ...
            )
            Text(
                // ...
            )
        }
    }
}
LayoutBasicsSnippets.kt

Bu işlev aşağıdaki kullanıcı arayüzü ağacını oluşturur.

SearchResult
  Row
    Image
    Column
      Text
      Text

SearchResult örneğinde kullanıcı arayüzü ağacı düzeni şu sırayı izler:

1. Kök düğüm Row'ten ölçüm yapması istenir.
2. Kök düğüm Row, ilk alt öğesi Image'ten ölçüm yapmasını ister.
3. Image bir yaprak düğümdür (yani alt öğesi yoktur), bu nedenle bir boyut bildirir ve yerleşim talimatları döndürür.
4. Kök düğüm Row, ikinci alt öğesinden (Column) ölçüm yapmasını ister.
5. Column düğümü, ilk Text alt öğesinden ölçüm yapmasını ister.
6. İlk Text düğümü bir yaprak düğümüdür. Bu nedenle, bir boyutu raporlar ve yerleşim talimatlarını döndürür.
7. Column düğümü, ikinci Text alt öğesinden ölçüm yapmasını ister.
8. İkinci Text düğümü bir yaprak düğümüdür. Bu nedenle, bir boyutu raporlar ve yerleşim talimatlarını döndürür.
9. Column düğümü artık çocuklarını ölçtü, boyutlandırdı ve yerleştirdi. Bu nedenle kendi boyutunu ve yerleşimini belirleyebilir.
10. Kök düğüm Row, çocuklarını ölçtüğü, boyutlandırdığı ve yerleştirdiği için artık kendi boyutunu ve yerleşimini belirleyebilir.

Performans

Compose, çocukları yalnızca bir kez ölçerek yüksek performans elde eder. Tek geçişli ölçüm, performans açısından iyidir ve Compose'un derin kullanıcı arayüzü ağaçlarını verimli bir şekilde işlemesine olanak tanır. Bir öğe alt öğesini iki kez ölçtüğünde ve bu alt öğe de alt öğelerinin her birini iki kez ölçtüğünde, kullanıcı arayüzünün tamamını tek bir denemeyle tasarlamak için çok fazla çalışma yapılması gerekir. Bu da uygulamanızın performansını korumayı zorlaştırır.

Sayfa düzeninizin bir nedenle birden fazla ölçüme ihtiyacı varsa Compose, içsel ölçümler adı verilen özel bir sistem sunar. Bu özellik hakkında daha fazla bilgiyi Oluşturma düzenleri içindeki içsel ölçümler başlıklı makalede bulabilirsiniz.

Ölçüm ve yerleşim, düzen geçişinin farklı alt aşamaları olduğundan, yalnızca öğelerin yerleşimini etkileyen ve ölçümü etkilemeyen tüm değişiklikler ayrı olarak yürütülebilir.

Düzenlemelerinizde değiştiricileri kullanma

Düzenleyicileri derleme bölümünde belirtildiği gibi, derlenebilir öğelerinizi süslemek veya geliştirmek için düzenleyicileri kullanabilirsiniz. Değiştiriciler, düzeninizi özelleştirmek için çok önemlidir. Örneğin, burada ArtistCard öğesini özelleştirmek için birkaç değiştiriciyi zincirliyoruz:

@Composable
fun ArtistCardModifiers(
    artist: Artist,
    onClick: () -> Unit
) {
    val padding = 16.dp
    Column(
        Modifier
            .clickable(onClick = onClick)
            .padding(padding)
            .fillMaxWidth()
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) { /*...*/ }
        Spacer(Modifier.size(padding))
        Card(
            elevation = CardDefaults.cardElevation(defaultElevation = 4.dp),
        ) { /*...*/ }
    }
}
LayoutBasicsSnippets.kt

Yukarıdaki kodda, birlikte kullanılan farklı değiştirici işlevlere dikkat edin.

• clickable, kullanıcı girişine tepki veren bir bileşen oluşturur ve dalga gösterir.
• padding, bir öğenin etrafına boşluk ekler.
• fillMaxWidth, birleştirilebilir öğenin ebeveyninden kendisine verilen maksimum genişliği doldurmasını sağlar.
• size(), bir öğenin tercih edilen genişliğini ve yüksekliğini belirtir.

Kaydırılabilir düzenler

Oluşturma hareketleri dokümanlarında kaydırılabilir düzenler hakkında daha fazla bilgi edinin.

Listeler ve yavaş listeler için Liste oluşturma dokümanlarına göz atın.

Duyarlı düzenler

Düzen, farklı ekran yönleri ve form faktörü boyutları dikkate alınarak tasarlanmalıdır. Compose, derlenebilir düzenlerinizi çeşitli ekran yapılandırmalarına uyarlamayı kolaylaştırmak için hazır birkaç mekanizma sunar.

Kısıtlamalar

Üst öğeden gelen kısıtlamaları öğrenmek ve düzeni buna göre tasarlamak için BoxWithConstraints kullanabilirsiniz. Ölçüm kısıtlamaları, içerik lambdasının kapsamında bulunabilir. Farklı ekran yapılandırmaları için farklı düzenler oluşturmak üzere aşağıdaki ölçüm kısıtlamalarını kullanabilirsiniz:

@Composable
fun WithConstraintsComposable() {
    BoxWithConstraints {
        Text("My minHeight is $minHeight while my maxWidth is $maxWidth")
    }
}
LayoutBasicsSnippets.kt

Alana dayalı düzenler

Compose, kullanıcı arayüzü oluşturmayı kolaylaştırmak için androidx.compose.material:material bağımlılığıyla (Android Studio'da Compose projesi oluştururken dahil edilir) Material Design'a dayalı çok çeşitli bileşenler sağlar. Drawer, FloatingActionButton ve TopAppBar gibi öğelerin tümü sağlanır.

Materyal bileşenler, slot API'lerini yoğun şekilde kullanır. Bu, Compose'un, bileşenlerin üzerine bir özelleştirme katmanı getirmek için kullanıma sunduğu bir kalıptır. Bu yaklaşım, alt öğenin her yapılandırma parametresini göstermek zorunda kalmak yerine kendisini yapılandırabilen bir alt öğeyi kabul ettiğinden bileşenleri daha esnek hale getirir. Yuvalar, kullanıcı arayüzünde geliştiricinin istediği gibi doldurabileceği boş bir alan bırakır. Örneğin, TopAppBar içinde özelleştirebileceğiniz alanlar şunlardır:

Kompozitler genellikle bir content kompozit lambda ( content: @Composable () -> Unit) alır. Slot API'leri, belirli kullanımlar için birden fazla content parametresi gösterir. Örneğin, TopAppBar; title, navigationIcon ve actions için içerik sağlamanıza olanak tanır.

Örneğin, Scaffold, temel Materyal Tasarım düzen yapısına sahip bir kullanıcı arayüzü uygulamanıza olanak tanır. Scaffold, TopAppBar, BottomAppBar, FloatingActionButton ve Drawer gibi en yaygın üst düzey Materyal bileşenleri için yuvalar sağlar. Scaffold'ü kullanarak bu bileşenlerin doğru şekilde yerleştirildiğinden ve birlikte doğru şekilde çalıştığından emin olabilirsiniz.

@Composable
fun HomeScreen(/*...*/) {
    ModalNavigationDrawer(drawerContent = { /* ... */ }) {
        Scaffold(
            topBar = { /*...*/ }
        ) { contentPadding ->
            // ...
        }
    }
}
LayoutBasicsSnippets.kt