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:
- Öğelerin bileşimi
- Öğelerin düzeni
- Öğ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
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") }
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") } }
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) } } }
Öğ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") } }
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.
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ş 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( // ... ) } } }
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:
Row
kök düğümünün ölçülmesi isteniyor.Row
kök düğümü,Image
adlı ilk alt düğümünden ölçüm yapılmasını ister.Image
bir yaprak düğümdür (yani alt öğeleri yoktur), bu nedenle bir boyut bildirir ve yerleşim talimatlarını döndürür.Row
kök düğümü, ikinci alt düğümden (Column
) ölçüm yapılmasını ister.Column
düğümü, ölçmesi için ilkText
alt öğesini ister.- İlk
Text
düğümü bir yaprak düğümü olduğu için boyut bildirir ve yerleşim talimatlarını döndürür. Column
düğümü, ikinciText
alt öğesinden ölçüm yapılmasını ister.- İkinci
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ü, 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ü, 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), ) { /*...*/ } } }
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.
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") } }
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.
Scaffold
TopAppBar
,
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 -> // ... } } }
Sizin için önerilenler
- Not: Bağlantı metni JavaScript kapalıyken görüntülenir
- Oluşturma düzenleyiciler
- Jetpack Compose için Kotlin
- Malzeme Bileşenleri ve düzenler