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ı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.

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şlevlerin temelleri

Oluşturulabilir 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, girdi alıp ekranda gösterileni 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 yönlendirme sağlamazsanız 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

Birçok 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 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ı kullanmanız 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üzen modelinde, kullanıcı arayüzü ağacı tek bir geçiş olarak yerleştirilmiştir. 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. 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.

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

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ı 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 boyut bildirir 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 boyut bildirir ve yerleşim talimatları 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. Compose'un derin kullanıcı arayüzü ağaçlarını verimli bir şekilde işlemesini sağlar. 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ı korumanızı 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. 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 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

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 gereklidir. Ö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, farklı değiştirici işlevlerinin birlikte kullanıldığına 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 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 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, 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ı öğ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 bu ölçüm kısıtlamalarını kullanabilirsiniz:

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

Yuva 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) 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. ScaffoldTopAppBar, 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