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şlemi, aşağıdakileri kullanarak durumu kullanıcı arayüzü öğelerine dönüştürür:

1. Bileşenlerin bileşimi
2. Öğelerin düzeni
3. Çizim öğeleri

Bu dokümanda öğelerin düzenine odaklanılarak Compose'un kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olmak için sağladığı bazı yapı taşları açıklanmaktadır.

Compose'da düzenlerin hedefleri

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

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

Not: Android View sisteminde, RelativeLayout gibi belirli Görünümleri iç içe yerleştirirken bazı performans sorunlarıyla karşılaşabilirsiniz. Oluşturma işlemi birden fazla ölçümden kaçındığından performansı etkilemeden öğeleri dilediğiniz kadar derine yerleştirebilirsiniz.

Birleştirilebilir işlevlerle ilgili temel bilgiler

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

Oluşturulabilir bir işlev birkaç kullanıcı arayüzü öğesi yayınlayabilir. Ancak bunların nasıl düzenlenmesi gerektiği konusunda yol gösterici bilgiler 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şturulmasını istediğiniz şekilde düzenlemelerini istediğiniz bir rehber olmadığında, Oluştur uygulaması metin öğelerini birbirinin üzerine yığlar ve okunamaz hale getirir:

Compose, kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olmak için kullanıma hazır düzenlerden oluşan bir koleksiyon sağlar ve kendi özel düzenlerinizi tanımlamayı kolaylaştırır.

Standart düzen bileşenleri

Çoğu durumda, Oluşturma'nın standart düzen öğelerini kullanabilirsiniz.

Öğeleri ekrana dikey olarak yerleştirmek için Column aracını 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ın yapılandırılmasını 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 özelliğini 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ı tüm ihtiyacınız olan tek şeydir. Bu düzenleri uygulamanıza uygun daha ayrıntılı bir düzende birleştirmek için kendi kompozit işlevinizi yazabilirsiniz.

Not: Compose, iç içe yerleştirilmiş düzenleri verimli bir şekilde işler. Bu sayede 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 gereken Android Görünümleri'nde yapılan bir iyileştirmedir.

Row içinde çocukların 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 kartta düzenlenmiştir. Önce her bir düğümün kendisini ölçmesi, ardından alt öğeleri yinelemeli olarak ölçmesi istenir. Böylece, boyut kısıtlamaları ağacın alt kısmındaki çocuklara iletilir. Daha sonra, yaprak düğümleri boyutlandırılır ve yerleştirilir. Çözümlenen boyutlar ve yerleşim talimatları da ağa geri aktarılır.

Özetlemek gerekirse, ebeveynler çocuklarından önce ölçüm yapar, ancak boyutlara göre 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ı verir.

SearchResult
  Row
    Image
    Column
      Text
      Text

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

1. Row kök düğümünü ölçmesi isteniyor.
2. Row kök düğümü, ilk alt düğümden (Image) ölçüm yapması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 öğesi olan Column'dan ölçüm yapmasını ister.
5. Column düğümü, ilk Text alt öğesinden ölçüm yapılmasını ister.
6. İlk Text düğümü bir yaprak düğümdü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 yapılmasını ister.
8. İkinci Text düğümü bir yaprak düğümdür. Bu nedenle bir 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ştirdikten sonra kendi boyutunu ve yerleşimini belirleyebilir.
10. Row kök düğümü, alt öğelerini ölçtüğüne, boyutlandırdığına ve yerleştirdikten sonra kendi boyutunu ve yerleşimini belirleyebilir.

Performans

Compose, alt öğeleri yalnızca bir kez ölçerek yüksek performansa ulaşır. Tek geçişli ölçüm, performans için 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çtüyse ve bu çocuk da alt öğelerinin her birini iki kez ölçtüyse tüm kullanıcı arayüzünü yerleştirmek için tek bir girişimde çok fazla çaba harcanır ve bu da uygulamanızın performansını sürdürmeyi zorlaştırır.

Düzeninizde herhangi bir nedenle birden fazla ölçüm gerekiyorsa Compose özel bir sistem olan doğuştan gelen ölçümler sunar. Oluşturma düzenlerinde 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ştiriciler kullanma

Oluşturma düzenleyicileri bölümünde açıklandığı gibi, bestelerinizi süslemek veya genişletmek 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ştiricileri zincirleyeceğiz:

@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, kullanıcı girişine oluşturulabilir bir tepki verir ve bir dalga gösterir.
• padding bir öğenin etrafına boşluk yerleştirir.
• fillMaxWidth, composable dolguyu üst öğesinden kendisine verilen maksimum genişliği yapar.
• size(), bir öğenin tercih edilen genişliğini ve yüksekliğini belirtir.

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

Kaydırılabilir düzenler

Kaydırılabilir düzenler hakkında daha fazla bilgiyi Hareketler oluşturma dokümanlarında bulabilirsiniz.

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

Duyarlı düzenler

Düzen tasarımında farklı ekran yönleri ve form faktörü boyutları göz önünde bulundurulmalıdır. Oluşturma, oluşturduğunuz düzenlerinizi çeşitli ekran yapılandırmalarına uyarlamayı kolaylaştırmak için kullanıma hazır birkaç mekanizma sunar.

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ı kullanarak farklı ekran yapılandırmaları için farklı düzenler oluşturabilirsiniz:

@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 Beste projesi oluştururken dahildir) Material Design (Materyal Tasarım) özelliğini temel alan çok çeşitli kompozisyonlar sunar. Drawer, FloatingActionButton ve TopAppBar gibi öğelerin tamamı sağlanır.

Malzeme bileşenleri, slot API'lerini yoğun bir şekilde kullanır. Oluşturulan bir kalıp, bestelenebilir öğelerin üzerine bir özelleştirme katmanı getirmek için kullanılır. Bu yaklaşım, alt öğelerin her yapılandırma parametresini açığa çıkarmak zorunda kalmadan kendi kendini 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 content birleştirilebilir 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ü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 alanlar sağlar. Scaffold kullanıldığında, bu bileşenlerin düzgün şekilde konumlandırılıp birlikte düzgün çalışması kolaydır.

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