Düzen oluşturma hakkında temel bilgiler

Jetpack Compose, uygulamanızın kullanıcı arayüzünü tasarlamayı ve oluşturmayı çok daha kolay hale getirir. Oluştur, 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

Beste, düzen, çizim aracılığıyla kullanıcı arayüzüne dönüştürme durumunu oluşturun

Bu dokümanda, öğe düzenine odaklanılmış ve Compose'un, kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olmak için sunduğu bazı yapı taşları açıklanmaktadır.

Oluştur'daki düzenlerin hedefleri

Düzen sisteminin Jetpack Compose'un iki ana hedefi vardır:

Oluşturulabilir işlevler hakkında temel bilgiler

Oluşturulabilir işlevler, Yazma'nın temel yapı taşıdır. Oluşturulabilir işlev, kullanıcı arayüzünüzün bir bölümünü açıklayan ve Unit özelliğini çalıştıran bir işlevdir. İşlev, bazı girişleri alır ve ekranda gösterilenleri oluşturur. Besteler hakkında daha fazla bilgi için Akıl modeli oluşturma dokümanlarına göz atın.

Oluşturulabilir bir işlev, birden fazla kullanıcı arayüzü öğesi yayınlayabilir. Bununla birlikte, bunların nasıl sıralanması gerektiği konusunda rehberlik sağlamazsanız, E-posta öğesi öğeleri hoşunuza gitmeyecek ş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şturmalarını nasıl istediğiniz konusunda yardımınız olmadan, Compose metin öğelerini birbirinin üzerine yığarak okunamaz hale getirir:

Birbirinin üstüne çizilmiş iki metin öğesi, metnin okunmasını engelliyor

Compose, kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olmak üzere kullanıma hazır bir düzen koleksiyonu sağlar ve kendi daha özel düzenlerinizi tanımlamanızı kolaylaştırır.

Standart düzen bileşenleri

Birçok durumda Oluştur'un standart düzen öğelerini kullanabilirsiniz.

Öğeleri dikey olarak ekrana yerleştirmek için Column simgesini kullanın.

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

Metnin okunabilmesi için iki düzenin sütun düzeninde yapılması

Benzer şekilde, öğeleri yatay olarak ekrana 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

Metin öğeleri sütununun yanında küçük bir grafikle daha karmaşık bir düzen gösterilir

Öğeleri bir başkasının üzerine yerleştirmek için Box işlevini kullanın. Box, içerdiği öğelerin özel 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

Birbiriyle yığılmış iki öğe gösterir

Genellikle bu yapı taşları yeterlidir. Bu düzenleri, uygulamanıza uygun daha ayrıntılı bir düzende birleştirmek için kendi özel işlevinizi yazabilirsiniz.

Üç basit düzen kombinasyonunu karşılaştırır: sütun, satır ve kutu

Çocukların 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

Öğeler sağa hizalandı

Düzen modeli

Düzen modelinde, kullanıcı arayüzü ağacı tek bir kartta sıralanır. İlk önce her düğümden kendini ölçmesi, ardından ağaçtaki boyutların alt kısmına çocuklarla sürekli olarak ölçüm yapması istenir. Ardından, yaprak düğümleri boyut ve yerleşimle boyutlandırılır ve çözümlenen boyutlar ile yerleşim talimatları ağacın gerisine aktarılır.

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

Aşağıdaki SearchResult işlevini değerlendirin.

@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ğaç düzeni aşağıdaki sırayla görülür:

  1. Row kök düğümünün ölçüm yapması isteniyor.
  2. Kök düğüm Row ilk çocuğa (Image) ölçüm yapmasını istiyor.
  3. Image bir yaprak düğümüdür (yani alt öğesi yoktur). Bu nedenle bir boyut bildirir ve yerleşim talimatlarını döndürür.
  4. Row kök düğümü, ikinci alt öğesi Column'nin ö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ü olduğundan 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ü olduğundan bir boyut bildirir ve yerleşim talimatlarını döndürür.
  9. Column düğümü ölçtüğünü, boyutunu ve yer aldığına göre artık kendi boyutunu ve yerleşimini belirleyebilir.
  10. Row kök düğümü artık alt öğelerini ölçtüğünden, boyutlandırıp yerleştirdiğine göre kendi boyutunu ve yerleşimini belirleyebilir.

Arama sonucu kullanıcı arayüzü ağacındaki ölçüm, boyut ve yerleşim sıralaması

Performans

Compose, çocukları yalnızca bir kez ölçerek yüksek performans sağlar. Tek geçişli ölçüm, performans için iyidir. Bu sayede Compose, derin kullanıcı arayüzü ağaçlarını verimli bir şekilde işleyebilir. Bir öğe, alt öğesini iki kez ölçtüyse ve bu alt öğe, her bir alt öğesini iki kez ölçerse tüm kullanıcı arayüzünü aynı miktarda çaba sarf ederek uygulamanızın yüksek performans göstermesini sağlamak zorlaşır.

Herhangi bir nedenle düzeniniz için birden çok ölçüm gerekiyorsa Compose özel bir sistem olan doğal ölçümler sunar. Bu özellik hakkında daha fazla bilgiyi Oluşturma düzenlerinde doğuştan ölçümler bölümünde bulabilirsiniz.

Ölçüm ve yerleşim, düzen iletilmesinin farklı alt aşamalarıdır. Bu nedenle, yalnızca öğelerin yerleşimini etkileyen değişiklikler (ölçüm değil) ayrı olarak yürütülebilir.

Düzenlerinizde değiştiriciler kullanma

Değiştirici oluşturma bölümünde açıklandığı gibi, öğelerinizi 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 değiştiricisini özelleştirmek için çeşitli değiştiriciler zincirlenmektedir:

@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

Grafiklerin düzenlenme biçimini ve hangi alanların kullanıcı girişine yanıt verdiğini değiştirmek için değiştiriciler kullanan yine de daha karmaşık bir düzen

Yukarıdaki kodda, birlikte kullanılan farklı değiştirici işlevlerine dikkat edin.

  • clickable, kullanıcı girişine birleşik bir tepki veriyor ve bir dalga gösteriyor.
  • padding, öğenin etrafına boşluk bırakır.
  • fillMaxWidth, besteyi üst öğesinden ona verilen maksimum genişliği dolduruyor.
  • size(), öğenin tercih ettiği genişliği ve yüksekliği belirtir.

Kaydırılabilir düzenler

Kaydırılabilir düzenler hakkında daha fazla bilgi için Hareket oluşturma belgelerine göz atın.

Listeler ve geç listeler için Liste oluşturma belgelerine göz atın.

Duyarlı düzenler

Düzen, farklı ekran yönleri ve form faktörü boyutları dikkate alınarak tasarlanmalıdır. E-posta, kullanıma hazır çeşitli 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ı öğrenmek ve düzeni buna göre tasarlamak için BoxWithConstraints kullanabilirsiniz. Ölçüm kısıtlamaları, içerik lambdası kapsamında bulunabilir. Farklı ekran yapılandırmaları için farklı düzenler oluşturmak üzere aşağıdaki ölçüm kısıtlamalarından yararlanabilirsiniz:

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

Alan tabanlı düzenler

Compose, kullanıcı arayüzü oluşturmayı kolaylaştırmak için Materyal Tasarım'a dayalı olarak androidx.compose.material:material bağımlısıyla (Android Studio'da Yazma projesi oluştururken dahil edilir) çok çeşitli besteler sağlar. Drawer, FloatingActionButton ve TopAppBar gibi öğelerin tümü sağlanır.

Materyal bileşenler, Slot API'lerini yoğun bir şekilde kullanır. Desen Oluşturma, bestelerin üzerine bir özelleştirme katmanı getirmek için kullanılır. Bu yaklaşım, alt yapılandırmanın tamamını göstermek zorunda kalmadan kendini yapılandırabilen bir alt öğe kabul ettiklerinden 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, bir TopAppBarda özelleştirebileceğiniz alanlar şunlardır:

Materyal Bileşenler uygulama çubuğundaki kullanılabilir alanları gösteren şema

Oluşturulabilirler genellikle content oluşturulabilir 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ıyla 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 slotlar sağlar. Scaffold kullanarak, bu bileşenlerin doğru şekilde konumlandırıldığından ve birlikte düzgün çalıştığından emin olmak kolaydır.

Birden fazla öğeyi konumlandırmak için Yapı iskelesini kullanan JetNews örnek uygulaması 

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