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:

1. Öğelerin kompozisyonu
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.

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

Composable işlevlerle ilgili temel bilgiler

Composable işlevler, Compose'un temel yapı taşıdır. Oluşturulabilir işlev, kullanıcı arayüzünüzün bir bölümünü açıklayan Unit öğesini oluşturan bir işlevdir. İşlev, bazı girişleri alır ve ekranda gösterilenleri oluşturur. Oluşturulabilir öğeler hakkında daha fazla bilgi için Compose zihin modeli belgelerine göz atın.

Bir composable işlev, birden fazla kullanıcı arayüzü öğesi oluşturabilir. Ancak öğelerin nasıl düzenleneceği konusunda talimat vermezseniz Compose, öğeleri istemediğiniz ş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üzenlenmesini istediğinize dair bir talimat vermezseniz 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üzenler sunar ve kendi özel düzenlerinizi tanımlamanızı kolaylaştırır.

Standart düzen bileşenleri

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

Öğeleri ekrana dikey olarak yerleştirmek için Column 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 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 üst üste yerleştirmek için Box kullanın. Box, içerdiği öğelerin belirli bir 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.

Alt öğelerin 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üzen modelinde, kullanıcı arayüzü ağacı tek bir geçişte düzenlenir. Her düğümden önce kendisini, ardından tüm alt öğeleri yinelemeli olarak ölçmesi istenir. Bu sırada boyut kısıtlamaları ağaçtan alt öğelere aktarılır. Ardından, yaprak düğümler boyutlandırılır ve yerleştirilir. Çözümlenen boyutlar ve yerleştirme talimatları ağaca geri gönderilir.

Kısaca, üst öğeler alt öğelerinden önce ölçülür ancak alt öğelerinden sonra boyutlandırılır ve yerleştirilir.

Aşağıdaki SearchResult işlevini inceleyin.

@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ğaç düzeni şu sırayı izler:

1. Kök düğüm Row ölçüm yapacak.
2. Kök düğüm Row, ilk alt öğesi olan Image'den ölçüm yapmasını ister.
3. Image bir yaprak düğüm olduğundan (yani alt öğesi olmadığından) boyut bildirir ve yerleşim talimatları döndürür.
4. Kök düğüm Row, ikinci alt öğesi olan Column öğesinden ö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 boyut bildirir ve yerleşim talimatları 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 boyut bildirir ve yerleşim talimatlarını döndürür.
9. Column düğümü, alt öğelerini ölçüp boyutlandırdıktan ve yerleştirdikten sonra kendi boyutunu ve yerleşimini belirleyebilir.
10. Kök düğüm Row, alt öğelerini ölçüp boyutlandırdıktan ve yerleştirdikten sonra kendi boyutunu ve yerleşimini belirleyebilir.

Performans

Compose, alt öğeleri 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çerse ve bu alt öğe de kendi alt öğelerinin her birini iki kez ölçerse tüm kullanıcı arayüzünü düzenlemeye yönelik tek bir girişim çok fazla iş gerektirir ve uygulamanızın performansını korumayı zorlaştırır.

Düzeniniz herhangi bir nedenle birden fazla ölçüme ihtiyaç duyuyorsa Compose, içsel ölçümler adında özel bir sistem sunar. Bu özellik hakkında daha fazla bilgiyi Compose düzenlerinde içsel ölçümler bölümünde bulabilirsiniz.

Ölçüm ve yerleşim, düzen aşamasının farklı alt aşamaları olduğundan yalnızca öğelerin yerleşimini etkileyen ve ölçümü etkilemeyen değişiklikler ayrı olarak uygulanabilir.

Düzenlerinizde değiştiricileri kullanma

Oluşturma değiştiricileri bölümünde açıklandığı gibi, değiştiricileri kullanarak composable'larınızı süsleyebilir veya geliştirebilirsiniz. Değiştiriciler, düzeninizi özelleştirmek için gereklidir. Örneğin, burada ArtistCard öğesini özelleştirmek için birkaç değiştiriciyi zincirleme olarak kullanıyoruz:

@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şlevlerin birlikte kullanıldığına dikkat edin.

• clickable, bir composable'ın kullanıcı girişine tepki vermesini sağlar ve dalga efekti gösterir.
• padding, bir öğenin etrafına boşluk ekler.
• fillMaxWidth, composable'ın üst öğesinden 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

Kaydırılabilir düzenler hakkında daha fazla bilgiyi Compose hareketleri belgelerinde bulabilirsiniz.

Listeler ve geç listeler için Compose listeleriyle ilgili belgelere göz atın.

Responsive layouts (Duyarlı düzenler)

Düzen, farklı ekran yönleri ve form faktörü boyutları dikkate alınarak tasarlanmalıdır. Compose, oluşturulabilir düzenlerinizi çeşitli ekran yapılandırmalarına uyarlamanızı kolaylaştıran birkaç mekanizma sunar.

Sınırlamalar

Ü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 lambda'sının 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 dahil edilir) Materyal Tasarım'a dayalı çok çeşitli composable'lar sunar. Drawer, FloatingActionButton ve TopAppBar gibi öğelerin tümü sağlanır.

Materyal bileşenler, oluşturulabilir öğelerin üzerine bir özelleştirme katmanı eklemek için Compose'un sunduğu bir kalıp olan slot API'lerini yoğun bir şekilde kullanır. Bu yaklaşım, bileşenleri daha esnek hale getirir. Çünkü bileşenler, alt öğenin her yapılandırma parametresini göstermek zorunda kalmadan kendisini yapılandırabilen bir alt öğeyi kabul eder. Alanlar, geliştiricinin dilediği gibi doldurması için kullanıcı arayüzünde boş bir alan bırakır. Örneğin, TopAppBar içinde özelleştirebileceğiniz alanlar şunlardır:

Birleştirilebilir öğeler genellikle bir content birleştirilebilir 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. Scaffold; TopAppBar, BottomAppBar, FloatingActionButton ve Drawer gibi en yaygın üst düzey Materyal bileşenleri için alanlar sağlar. Scaffold kullanarak bu bileşenlerin doğru şekilde konumlandırıldığından ve birlikte doğru şekilde çalıştığından kolayca emin olabilirsiniz.

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