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üzenler kolayca yazabilme

Not: Android View sistemi kullanıldığında bazı performans sorunlarıyla karşılaşabilirsiniz. RelativeLayout gibi belirli Görünümler iç içe yerleştirilirken. Oluşturma işlevi birden fazla ölçümden kaçındığı için performansı etkilemeden istediğiniz kadar derinlikte iç içe yerleştirebilirsiniz.

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. İşlev, bazı girişleri alır ve ekranda gösterilenleri 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 metin öğesi oluşturur:

@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, 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 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 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 composable işlevinizi yazabilirsiniz.

Not: Oluşturma, iç içe yerleştirilmiş düzenleri verimli bir şekilde yönetir. Bu sayede, karmaşık bir kullanıcı arayüzü tasarlamak için mükemmel bir yöntemdir. Bu, performans nedeniyle iç içe yerleştirilmiş düzenlerden kaçınmanız gereken Android Görünümleri'ne kıyasla bir iyileştirmedir.

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

Ö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ı.
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 alt öğelerini ölçtüğüne, boyutlandırdığına ve yerleştirdiğine göre 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 kendi alt öğesini iki kez ölçtüğünde ve bu alt öğe de kendi 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 Oluştur'da öz ölçümler adı verilen özel bir sistem sunulur. 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 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 bölümünde belirtildiği gibi, birleştirilebilir öğelerinizi süslemek veya geliştirmek için değiştiricileri kullanabilirsiniz. Değiştiriciler, düzeninizi özelleştirmek için gereklidir. Ö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.

Not: Değiştiriciler, diğer işlevlerinin yanı sıra düzenin işlevine benzer bir rol oynar. görüntüleme tabanlı düzenlerdeki parametreler. Ancak değiştiriciler bazen kapsama özel olduğundan tür güvenliği sunarlar ve belirli bir düzende nelerin kullanılabileceğini ve geçerli olduğunu keşfetmenize ve anlamanıza yardımcı olurlar. XML ile bazı durumlarda, belirli bir düzen özelliğinin değerli olup olmadığını geçerli olur.

Kaydırılabilir düzenler

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

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

Yuva 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. Drawer, FloatingActionButton ve TopAppBar gibi öğelerin tümü sağlanır.

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. Yuvalar, 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:

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