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ştur 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 binanın bazı bölümleri açıklanmalı Compose'un kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olmak için sağladığı bloklar.

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

ziyaret edin.

Oluşturulabilir işlevlerle ilgili temel bilgiler

Oluşturulabilir işlevler, Compose'un temel yapı taşıdır. Bir composable fonksiyonu, kullanıcı arayüzünüzün bazı bölümlerini tanımlayan Unit yayan bir işlevdir. İlgili içeriği oluşturmak için kullanılan işlev biraz girdi alır ve ekranda gösterileni oluşturur. Daha fazla daha fazla bilgi için İçerik oluşturma zihinsel model belgelerini inceleyin.

Bir composable işlev, birkaç kullanıcı arayüzü öğesi yayınlayabilir. Ancak nasıl düzenlenecekleri konusunda yol gösterse de Compose, şekilde kullanmayı bırakabileceksiniz. Örneğin, bu kod iki farklı metin öğeler:

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

Oluştur'un, metin öğelerinin nasıl düzenleneceğini belirlemediğiniz sürece metin öğelerini üst üste yığmalarını sağlar. üst üste binerek okunamaz hale getirir:

Oluştur, kullanabileceğiniz hazır düzenlerden oluşan bir koleksiyon sunarak kullanıcı arayüzü öğeleri sunar ve size özel daha özel düzenlerinizi kolayca tanımlamanızı sağlar.

Standart düzen bileşenleri

Çoğu durumda Compose'un standart düzenini kullanabilirsiniz. öğeleri arasından seçim yapın.

Tekliflerinizi otomatikleştirmek ve optimize etmek için Column dokunun.

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

Benzer şekilde, Row dokunun. Hem Column hem de Row desteği ve içerdikleri öğelerin hizalamasını yapılandırmalısınız.

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

Row içinde çocukların konumunu ayarlamak için horizontalArrangement ve verticalAlignment bağımsız değişken. Column için verticalArrangement ve horizontalAlignment bağımsız değişken:

@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 bir düğüm önce kendini ölçmesi, sonra da bunları yinelemeli şekilde ölçmesi istendi. sadece küçük çocuklar için olan boyut kısıtlamalarını içerir. Daha sonra, yaprak düğümleri boyutlandırılır ve sonlandırılmış boyutlar ve yerleşim talimatları ile ağacı.

Özetle, ebeveynler çocuklarından önce ölçüm yapar, ancak boyutları çocuklarından önce gelir ve sonra koyulur. ne kadar iyi karşıladığını görebileceksiniz.

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 yok) 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 bir boyut bildirir ve yerleşim talimatları.
7. Column düğümü, ikinci Text alt öğesinin ö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ı.
9. Column düğümü artık alt öğelerini ölçtüğüne, boyutlandırdığına ve yerleştirdiğine göre 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 boyutunu ve yerleşimini belirleyebilir.

Performans

Oluştur, alt öğeleri yalnızca bir kez ölçerek yüksek performans elde eder. Tek Kart iyi bir ölçüm performansı sağlar. Bu da Compose'un Kullanıcı arayüzü ağaçları. Bir öğe, alt öğesini iki kez ölçmüş ve bu alt öğe, öğelerin her birini ölçmüşse bir kullanıcı arayüzü oluşturmaya yönelik tek bir girişim, Bu da uygulamanızın yüksek performans göstermesini zorlaştırıyor.

Düzeniniz için bir nedenden dolayı birden fazla ölçüm gerekiyorsa Compose, doğal ölçümler hakkında daha fazla bilgi edinin. Bu özellik hakkında daha fazla bilgi edinebilirsiniz Oluştur'daki gerçek ölçümler düzenler.

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

Düzenlerinizde düzenleyici kullanma

Oluşturma değiştiricileri konusunda açıklandığı gibi, değiştiricileri kullanabilirsiniz. Değiştiriciler son derece önemlidir en iyi uygulamaları görelim. Örneğin burada, ArtistCard öğesini özelleştirmek için:

@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, kendisine verilen maksimum genişliği doldurmasını sağlar üst öğesi olabilir.
• size(), bir öğenin tercih edilen genişliğini ve yüksekliğini belirtir.

ziyaret edin.

Kaydırılabilir düzenler

Kaydırılabilir düzenler hakkında daha fazla bilgiyi şurada bulabilirsiniz: Hareketlerle ilgili dokümanlar oluşturma.

Listeler ve geç listeleri için, Listelerle ilgili dokümanlar oluşturun.

Duyarlı düzenler

Düzen, farklı ekran yönleri dikkate alınarak tasarlanmalıdır ve form faktörü boyutlarını kullanabilirsiniz. E-postanızda yer alan, kullanıma hazır birkaç mekanizmayı kullanarak composable düzenlerinizi çeşitli ekran yapılandırmalarına uyarlamayı kolaylaştırır.

Kısıtlamalar

Üst öğeden gelen kısıtlamaları bilmek ve düzeni tasarlamak için buna göre bir BoxWithConstraints kullanabilirsiniz. Ölçüm kısıtlamalar bulunabilir. Bu ölçümleri kullanabilirsiniz Farklı ekran yapılandırmaları için farklı düzenler oluşturmaya yarayan sınırlamaları içerir:

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

Alan tabanlı düzenler

Compose, Malzeme ile çok çeşitli composable'lar sunar Tasarım androidx.compose.material:material bağımlılığı ( Android Studio'da proje oluşturun) kullanın. Benzer öğeler Drawer FloatingActionButton, ve TopAppBar sağlanmış.

Malzeme bileşenleri, alan API'lerini yoğun bir şekilde kullanır. YouTube, composable'ların üzerine bir özelleştirme katmanı ekledi. Bu yaklaşım yapılandırabilecek bir alt öğeyi kabul ettikleri için daha esnek alt öğenin tüm yapılandırma parametrelerini kullanıma sunmak zorunda kalmaz. Slotlar, kullanıcı arayüzünde geliştiricinin istediği gibi doldurabileceği boş bir alan bırakır. Örneğin, Bunlar, bir tabloda özelleştirebileceğiniz alanlardır. TopAppBar:

Bestelenebilir öğeler genellikle 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.

Örneğin, Scaffold temel Materyal Tasarım düzen yapısına sahip bir kullanıcı arayüzü uygulamanıza olanak tanır. Scaffolden yaygın üst düzey Materyal bileşenleri için yuvalar sağlar. ör. TopAppBar, BottomAppBar, FloatingActionButton, ve Drawer. Şunu kullanarak: Scaffold, bu bileşenlerin düzgün şekilde yerleştirildiğinden ve sağlamak için çok iyidir.

@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

ziyaret edin.