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. Compose, durumu kullanıcı arayüzü öğelerine dönüştürür. Bunun için:

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

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

Compose'daki düzenlerin hedefleri

Düzen sisteminin Jetpack Compose uygulamasının iki ana hedefi vardır:

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

Oluşturulabilir işlevlerle ilgili temel bilgiler

Oluşturulabilir işlevler, Compose'un temel yapı taşıdır. composable işlev, kullanıcı arayüzünüzün bir bölümünü tanımlayan Unit yayan bir işlevdir. İşlev, girdi alıp ekranda gösterileni oluşturur. composable'lar hakkında daha fazla bilgi için Zihinsel model oluşturma belgelerine göz atın.

Bir composable işlev, birkaç kullanıcı arayüzü öğesi yayınlayabilir. Bununla birlikte, bunların nasıl düzenleneceği konusunda bilgi vermezseniz Compose, öğeleri istemediğ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

Nasıl düzenlenmelerini istediğiniz konusunda yol göstermediğiniz takdirde, Compose metin öğelerini üst üste yığarak okunamaz hale getirir:

Compose, kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olacak kullanıma hazır düzenlerden oluşan bir koleksiyon sunar ve kendi, daha özel düzenlerinizi tanımlamanızı kolaylaştırır.

Standart düzen bileşenleri

Çoğu durumda, yalnızca Compose'un standart düzen öğelerini kullanabilirsiniz.

Öğ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 aracını 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 bir diğerinin üzerine yerleştirmek için Box simgesini kullanın. Box, içerdiği öğelerin özel hizalamasını yapılandırmayı 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 ihtiyacınız olan tek şey bu yapı taşlarıdır. Bu düzenleri uygulamanıza uygun daha ayrıntılı bir düzende birleştirmek için kendi composable işlevinizi yazabilirsiniz.

Bir Row içinde alt öğelerin 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üzen modelinde, kullanıcı arayüzü ağacı tek bir geçiş olarak yerleştirilmiştir. Her düğümden önce kendini ölçmesi, ardından alt öğeleri yinelemeli bir şekilde ölçmesi istenir ve boyut kısıtlamalarını ağaçtan çocuklara uygular. Daha sonra, yaprak düğümleri boyutlandırılır ve yerleştirilir. Çözülmüş boyutlar ve yerleşim talimatları ağaçtan yukarıya aktarılır.

Özetle, ebeveynler çocuklarından önce ölçüm yapar ancak ölçüleri çocuklarından sonra gelir.

Aşağıdaki SearchResult fonksiyonunu 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ı verir.

SearchResult
  Row
    Image
    Column
      Text
      Text

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

1. Row kök düğümünün ölçülmesi istenir.
2. Row kök düğümü, ilk alt öğesi olan Image için ölçüm yapmasını ister.
3. Image, bir yaprak düğümü olduğundan (alt öğesi yoktur) bir boyut bildirir ve yerleşim talimatlarını döndürür.
4. Row kök düğümü, ikinci alt öğesi olan Column ile ölçüm yapmasını ister.
5. Column düğümü, ilk Text alt öğesinin ölçüm yapmasını ister.
6. İlk Text düğüm, bir yaprak düğümüdür. Bu nedenle boyut bildirir ve yerleşim talimatlarını döndürür.
7. Column düğümü, ikinci Text alt öğesinin ölçüm yapmasını ister.
8. İkinci Text düğümü, yaprak düğümüdür. Bu nedenle, boyut bildirir ve yerleşim talimatlarını döndürür.
9. Column düğümü artık alt öğelerini ölçtüğüne, boyutlandırdığına ve yerleştirdiğine göre kendi boyutunu ve yerleşimini belirleyebilir.
10. Row kök düğümü artık alt öğelerini ölçtüğüne, boyutlandırdığına ve yerleştirdiğine göre kendi boyutunu ve yerleşimini belirleyebilir.

Performans

Oluştur, alt öğeleri yalnızca bir kez ölçerek yüksek performans elde eder. Tek geçişli ölçüm performans açısından iyidir. Compose'un derin kullanıcı arayüzü ağaçlarını verimli bir şekilde işlemesini sağlar. Bir öğe alt öğe bilgisini iki kez ölçtüğünde ve alt öğe de her alt öğeyi iki defa ölçtüğünde, bütün bir kullanıcı arayüzünü ortaya çıkarmak için tek bir girişimde çok fazla iş yapılması ve bu da uygulamanızın performansını korumanız zorlaşır.

Düzeniniz için bir nedenden dolayı birden fazla ölçüm gerekiyorsa Compose, doğal ölçümler olan özel bir sistem sunar. Oluşturma düzenlerindeki içsel ölçümler bölümünde bu özellik hakkında daha fazla bilgi edinebilirsiniz.

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

Düzenlerinizde düzenleyici kullanma

Oluşturma değiştiricileri bölümünde belirtildiği gibi, composable'larınızı süslemek veya zenginleştirmek için değiştiriciler kullanabilirsiniz. Değiştiriciler, düzeninizi özelleştirmek için olmazsa olmazdır. Örneğin, burada ArtistCard öğesini özelleştirmek için çeşitli değiştiriciler zincirlenir:

@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, farklı değiştirici işlevlerinin birlikte kullanıldığına dikkat edin.

• clickable, kullanıcı girişine composable tepkisi veriyor ve bir dalga gösteriyor.
• padding, bir öğenin etrafına boşluk bırakır.
• fillMaxWidth, composable'ın, üst öğesinden 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

Kaydırılabilir düzenler hakkında daha fazla bilgiye Hareket oluşturma dokümanlarından ulaşabilirsiniz.

Listeler ve geç listeler için Liste oluşturma dokümanlarına bakın.

Duyarlı düzenler

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

Kısıtlamalar

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

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

Alan tabanlı 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 dahildir) Material Design'ı temel alan çeşitli composable'lar sunar. Drawer, FloatingActionButton ve TopAppBar gibi öğelerin tümü sağlanır.

Malzeme bileşenleri, slot API'lerini yoğun bir şekilde kullanır. Compose'un sunduğu kalıp, composable'ların üzerine bir özelleştirme katmanı ekler. Bu yaklaşım, alt öğenin her yapılandırma parametresini açığa çıkarmak yerine kendini yapılandırabilen bir alt öğeyi kabul ettiği için bileşenleri daha esnek hale getirir. Slotlar, 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:

Özelleştirilebilir öğeler genellikle bir content composable lambda ( content: @Composable () -> Unit) alır. Alan API'leri belirli kullanımlar için birden fazla content parametresi sunar. Ö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. ScaffoldTopAppBar, BottomAppBar, FloatingActionButton ve Drawer gibi en yaygın üst düzey Materyal bileşenleri için yuvalar sağlar. Scaffold kullanıldığında, bu bileşenlerin düzgün şekilde konumlandırıldığından ve birlikte doğru çalıştığından emin olmak kolaydır.

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

Sizin için önerilenler

• Not: JavaScript kapalıyken bağlantı metni gösterilir
• Oluşturma değiştiricileri
• Jetpack Compose için Kotlin
• Malzeme Bileşenleri ve düzenleri