Oluşturma düzeniyle ilgili temel bilgiler

Jetpack Compose, uygulamanızın kullanıcı arayüzünü tasarlamayı ve derlemeyi çok daha kolay hale getirir. Oluşturma işlemi, aşağıdakileri kullanarak durumu kullanıcı arayüzü öğelerine dönüştürür:

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

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

Compose'daki düzenlerin hedefleri

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

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

Not: Android View sistemiyle belirli Görünümleri iç içe yerleştirirken (ör. RelativeLayout) bazı performans sorunlarıyla karşılaşabilirsiniz. Compose'da birden fazla ölçüm yapılmadığından performansı etkilemeden verileri dilediğiniz kadar iç içe yerleştirebilirsiniz.

composable işlevleriyle ilgili temel bilgiler

Oluşturulabilir işlevler, Oluşturma özelliğinin temel yapı taşıdır. composable işlev, kullanıcı arayüzünüzün bir kısmını tanımlayan ve Unit yayan bir işlevdir. İşlev, girdi alıp ekranda gösterilenleri oluşturur. composable'lar hakkında daha fazla bilgi için zihinsel model oluşturma dokümanlarına göz atın.

composable bir işlev, çeşitli kullanıcı arayüzü öğeleri yayınlayabilir. Bununla birlikte, bunların nasıl düzenlenmesi gerektiği konusunda yol gösterici bilgi sağlamazsanız 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

Oluşturulma uygulamasında, bunların nasıl düzenlenmesini istediğinize dair bir yönlendirme olmadan metin öğelerini birbirlerinin üzerine yığarak bu öğeleri okunamaz hale getirir:

Compose, kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olmak için bir kullanıma hazır düzenler koleksiyonu sunar ve kendi özel düzenlerinizi tanımlamayı kolaylaştırır.

Standart düzen bileşenleri

Çoğu durumda, Oluştur'un standart düzen öğelerini kullanabilirsiniz.

Öğeleri ekrana dikey olarak yerleştirmek için Column özelliğini 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 özelliğini 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 başka bir öğenin üzerine yerleştirmek için Box simgesini kullanın. Box, içerdiği öğelerin belirli hizalamasının yapılandırılması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ı ihtiyacınız olan tek şeydir. Bu düzenleri, uygulamanıza uygun daha ayrıntılı bir düzende birleştirmek için kendi composable işlevinizi yazabilirsiniz.

Not: Compose, iç içe yerleştirilmiş düzenleri verimli bir şekilde işlediğinden karmaşık bir kullanıcı arayüzü tasarlamanın mükemmel bir yoludur. Bu, performans nedeniyle iç içe yerleştirilmiş düzenlerden kaçınmanızı gerektiren Android Görünümleri'nde yapılan bir iyileştirmedir.

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ş halinde yerleştirilmiştir. Her düğümden önce kendini ölçmesi ve ardından tüm alt düğümleri yinelemeli olarak ölçmesi istenir. Burada, boyut kısıtlamaları ağacın alt kısımlarına iner. Ardından, yaprak düğümleri boyutlandırılır ve yerleştirilir, çözümlenen boyutlar ve yerleşim talimatları ağaçtan aktarılır.

Özetlemek gerekirse, ebeveynler çocuklarından önce ölçüm yapar, ancak boyutlandırılır ve çocuklarından sonra yerleştirilir.

Aşağıdaki SearchResult işlevini düşünün.

@Composable
fun SearchResult() {
    Row {
        Image(
            // ...
        )
        Column {
            Text(
                // ...
            )
            Text(
                // ...
            )
        }
    }
}
LayoutBasicsSnippets.kt

Bu işlev aşağıdaki kullanıcı arayüzü ağacını sağlar.

SearchResult
  Row
    Image
    Column
      Text
      Text

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

1. Row kök düğümünün ölçülmesi isteniyor.
2. Row kök düğümü, Image adlı ilk alt düğümünden ölçüm yapılmasını ister.
3. Image bir yaprak düğümdür (yani alt öğeleri yoktur), bu nedenle bir boyut bildirir ve yerleşim talimatlarını döndürür.
4. Row kök düğümü, ikinci alt düğümden (Column) ölçüm yapılmasını ister.
5. Column düğümü, ölçmesi için ilk Text alt öğesini ister.
6. İlk Text düğümü bir yaprak düğümü olduğu için boyut bildirir ve yerleşim talimatlarını döndürür.
7. Column düğümü, ikinci Text alt öğesinden ölçüm yapılmasını ister.
8. İkinci Text düğümü bir yaprak düğümüdür. Bu nedenle boyut bildirir ve yerleşim talimatlarını döndürür.
9. Column düğümü, 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ü, alt öğelerini ölçtüğüne, boyutlandırdığına ve yerleştirdiğine göre artık kendi boyutunu ve yerleşimini belirleyebilir.

Performans

Compose, alt öğeleri yalnızca bir kez ölçerek yüksek performans sağlar. 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 ele almasına olanak tanır. Bir öğe, alt öğesini iki kez ölçtüyse ve bu çocuk, alt öğelerinin her birini iki kez ölçtüyse tüm kullanıcı arayüzünü yerleştirmek için tek bir girişim çok fazla iş yapmak gerektirir ve uygulamanızın performansını yüksek tutmanızı zorlaştırır.

Düzeniniz herhangi bir nedenle birden fazla ölçüme ihtiyaç duyuyorsa Compose özel bir sistem olan içeriğe dayalı ölçümler 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, ölçümü değil yalnızca öğelerin yerleşimini etkileyen değişiklikler ayrı olarak yürütülebilir.

Düzenlerinizde değiştiricileri kullanma

Oluşturma değiştiricileri konusunda açıklandığı gibi, composable'ları süslemek veya zenginleştirmek için değiştiriciler kullanabilirsiniz. Değiştiriciler, düzeninizi özelleştirmek için çok önemlidir. Örneğin, burada ArtistCard öğesini özelleştirmek için çeşitli değiştiriciler zincir ediyoruz:

@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 bir tepki verir ve bir dalga gösterir.
• padding bir öğenin etrafına boşluk yerleştirir.
• 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.

Not: Değiştiriciler, diğer işlevlerinin yanı sıra, görünüme dayalı düzenlerdeki düzen parametrelerine benzer bir rol oynar. Bununla birlikte, değiştiriciler bazen kapsama özel olduklarından tür güvenliği sunarlar ve ayrıca belirli bir düzende nelerin kullanılabildiğini ve uygulanabileceğini keşfetmenize ve anlamanıza yardımcı olurlar. XML düzenleri kullanırken bazen belirli bir düzen özelliğinin belirli bir görünüm için geçerli olup olmadığını bulmak zordur.

Kaydırılabilir düzenler

Hareketleri oluşturma dokümanlarında kaydırılabilir düzenler hakkında daha fazla bilgi edinebilirsiniz.

Listeler ve geç listeler için Liste oluşturma dokümanlarına göz atın.

Duyarlı düzenler

Bir düzen tasarlanırken farklı ekran yönleri ve form faktörü boyutları dikkate alınmalıdır. Oluşturulabilir düzenlerinizi çeşitli ekran yapılandırmalarına uyarlamayı kolaylaştırmak için kullanıma hazır birkaç mekanizma sunun.

Sınırlamalar

Üst öğeden gelen kısıtlamaları bilmek ve düzeni buna uygun şekilde tasarlamak için BoxWithConstraints kullanabilirsiniz. Ölçüm kısıtlamaları, içerik lambda kapsamında bulunabilir. Bu ölçüm kısıtlamalarını, farklı ekran yapılandırmaları için farklı düzenler oluşturmak amacıyla kullanabilirsiniz:

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

Slot 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 Composer projesi oluştururken dahildir) Material Design tabanlı çok çeşitli composable'lar sağlar. Drawer, FloatingActionButton ve TopAppBar gibi öğelerin tamamı sağlanır.

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

Oluşturulabilir öğeler genellikle bir content composable lambda ( content: @Composable () -> Unit) alır. Slot 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üzeni yapısıyla 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 alanlar sağlar. Scaffold kullanarak bu bileşenlerin düzgün şekilde konumlandırılıp birlikte doğru şekilde çalıştığından emin olmak kolaydır.

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