Jetpack Compose, uygulamanızın kullanıcı arayüzünü tasarlamayı ve oluşturmayı çok daha kolay hale getirir. Compose, durumu kullanıcı arayüzü öğelerine dönüştürür. Bunun için:
- Öğelerin bileşimi
- Öğelerin düzeni
- Öğelerin çizimi
Bu dokümanda, öğelerin düzenine odaklanılmakta ve Compose'un kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olmak için sağladığı yapı taşlarından bazıları açıklanmaktadır.
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
Oluşturulabilir işlevlerle ilgili temel bilgiler
Oluşturulabilir işlevler, Compose'un temel yapı taşıdır. composable işlev, kullanıcı arayüzünüzün bir bölümünü tanımlayan Unit
yayan bir işlevdir. İşlev, girdi alıp ekranda gösterileni oluşturur. composable'lar hakkında daha fazla bilgi için Zihinsel model oluşturma belgelerine göz atın.
Bir composable işlev, birkaç kullanıcı arayüzü öğesi yayınlayabilir. Bununla birlikte, bunların nasıl düzenleneceği konusunda bilgi vermezseniz 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") }
Nasıl düzenlenmelerini istediğiniz konusunda yol göstermediğiniz takdirde, Compose metin öğelerini üst üste yığarak okunamaz hale getirir:
Compose, kullanıcı arayüzü öğelerinizi düzenlemenize yardımcı olacak kullanıma hazır düzenlerden oluşan bir koleksiyon sunar ve kendi, daha özel düzenlerinizi tanımlamanızı kolaylaştırır.
Standart düzen bileşenleri
Çoğu durumda, yalnızca Compose'un standart düzen öğelerini kullanabilirsiniz.
Öğeleri ekrana dikey olarak yerleştirmek için Column
simgesini kullanın.
@Composable fun ArtistCardColumn() { Column { Text("Alfred Sisley") Text("3 minutes ago") } }
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ı 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) } } }
Öğ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") } }
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.
Bir 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 { /*...*/ } } }
Düzen modeli
Düzen modelinde, kullanıcı arayüzü ağacı tek bir geçiş olarak yerleştirilmiştir. Her düğümden önce kendini ölçmesi, ardından alt öğeleri yinelemeli bir şekilde ölçmesi istenir ve boyut kısıtlamalarını ağaçtan çocuklara uygular. Daha sonra, yaprak düğümleri boyutlandırılır ve yerleştirilir. Çözülmüş boyutlar ve yerleşim talimatları ağaçtan yukarıya aktarılır.
Özetle, ebeveynler çocuklarından önce ölçüm yapar ancak ölçüleri çocuklarından sonra gelir.
Aşağıdaki SearchResult
fonksiyonunu ele alalım.
@Composable fun SearchResult() { Row { Image( // ... ) Column { Text( // ... ) Text( // ... ) } } }
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:
Row
kök düğümünün ölçülmesi istenir.Row
kök düğümü, ilk alt öğesi olanImage
için ölçüm yapmasını ister.Image
, bir yaprak düğümü olduğundan (alt öğesi yoktur) bir boyut bildirir ve yerleşim talimatlarını döndürür.Row
kök düğümü, ikinci alt öğesi olanColumn
ile ölçüm yapmasını ister.Column
düğümü, ilkText
alt öğesinin ölçüm yapmasını ister.- İlk
Text
düğüm, bir yaprak düğümüdür. Bu nedenle boyut bildirir ve yerleşim talimatlarını döndürür. Column
düğümü, ikinciText
alt öğesinin ölçüm yapmasını ister.- İkinci
Text
düğümü, yaprak düğümüdür. Bu nedenle, boyut bildirir ve yerleşim talimatlarını döndürür. Column
düğümü artık alt öğelerini ölçtüğüne, boyutlandırdığına ve yerleştirdiğine göre kendi boyutunu ve yerleşimini belirleyebilir.Row
kök düğümü artık alt öğelerini ölçtüğüne, boyutlandırdığına ve yerleştirdiğine göre kendi boyutunu ve yerleşimini belirleyebilir.
Performans
Oluştur, alt öğeleri yalnızca bir kez ölçerek yüksek performans elde eder. Tek geçişli ölçüm performans açısından iyidir. Compose'un derin kullanıcı arayüzü ağaçlarını verimli bir şekilde işlemesini sağlar. Bir öğe alt öğe bilgisini iki kez ölçtüğünde ve alt öğe de her alt öğeyi iki defa ölçtüğünde, bütün bir kullanıcı arayüzünü ortaya çıkarmak için tek bir girişimde çok fazla iş yapılması ve bu da uygulamanızın performansını korumanız zorlaşır.
Düzeniniz için bir nedenden dolayı birden fazla ölçüm gerekiyorsa Compose, doğal ölçümler olan özel bir sistem 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 ayrı 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 düzenleyici kullanma
Oluşturma değiştiricileri bölümünde belirtildiği gibi, composable'larınızı süslemek veya zenginleştirmek için değiştiriciler kullanabilirsiniz. Değiştiriciler, düzeninizi
özelleştirmek için olmazsa olmazdır. Örneğin, burada ArtistCard
öğesini özelleştirmek için çeşitli değiştiriciler zincirlenir:
@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), ) { /*...*/ } } }
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, üst öğesinden verilen maksimum genişliği doldurmasını sağlar.size()
, bir öğenin tercih edilen genişliğini ve yüksekliğini belirtir.
Kaydırılabilir düzenler
Kaydırılabilir düzenler hakkında daha fazla bilgiye Hareket oluşturma dokümanlarından ulaşabilirsiniz.
Listeler ve geç listeler için Liste oluşturma dokümanlarına bakın.
Duyarlı düzenler
Düzen, farklı ekran yönleri ve form faktörü boyutları dikkate alınarak tasarlanmalıdır. Compose, composable düzenlerinizi çeşitli ekran yapılandırmalarına uyarlamayı kolaylaştırmak için kullanıma hazır birkaç mekanizma sunar.
Kısıtlamalar
Üst öğeden gelen kısıtlamaları bilmek ve düzeni buna göre tasarlamak için bir 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 bu ölçüm kısıtlamalarını kullanabilirsiniz:
@Composable fun WithConstraintsComposable() { BoxWithConstraints { Text("My minHeight is $minHeight while my maxWidth is $maxWidth") } }
Alan 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 Compose projesi oluştururken dahildir) Material Design'ı temel alan çeşitli composable'lar sunar. Drawer
,
FloatingActionButton
ve TopAppBar
gibi öğelerin tümü sağlanır.
Malzeme bileşenleri, slot API'lerini yoğun bir şekilde kullanır. Compose'un sunduğu kalıp, composable'ların üzerine bir özelleştirme katmanı ekler. Bu yaklaşım, alt öğenin her yapılandırma parametresini açığa çıkarmak yerine kendini yapılandırabilen bir alt öğeyi kabul ettiği için bileşenleri daha esnek hale getirir.
Slotlar, kullanıcı arayüzünde geliştiricinin istediği gibi doldurabileceği boş bir alan bırakır. Örneğin, TopAppBar
içinde özelleştirebileceğiniz alanlar şunlardır:
Özelleştirilebilir öğeler genellikle bir 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
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. Scaffold
kullanıldığında, bu bileşenlerin düzgün şekilde konumlandırıldığından ve birlikte doğru çalıştığından emin olmak kolaydır.
@Composable fun HomeScreen(/*...*/) { ModalNavigationDrawer(drawerContent = { /* ... */ }) { Scaffold( topBar = { /*...*/ } ) { contentPadding -> // ... } } }
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