Bu sayfada Jetpack Compose'u oluşturan mimari katmanlar ve bu tasarımı oluşturan temel ilkeler hakkında üst düzey bir genel bakış sunulmaktadır.
Jetpack Compose tek bir monolitik proje değil. Eksiksiz bir yığın oluşturmak üzere bir araya getirilmiş çeşitli modüllerden oluşturuldu. Jetpack Compose'u oluşturan farklı modülleri anlamak şunları yapmanıza olanak tanır:
- Uygulama veya kitaplığınızı oluşturmak için uygun soyutlama düzeyini kullanın
- Daha fazla kontrol veya özelleştirme için ne zaman daha düşük bir düzeye "düşebileceğinizi" anlayın.
- Bağımlılıklarınızı en aza indirin
Katmanlar
Jetpack Compose'un ana katmanları şunlardır:
Şekil 1. Jetpack Compose'un ana katmanları.
Her katman alt seviyelerde kurulur ve işlevleri birleştirerek daha üst seviye bileşenler oluşturur. Her katman, modül sınırlarını doğrulamak ve ihtiyaç duyduğunuzda herhangi bir katmanı değiştirebilmenizi sağlamak için alt katmanların herkese açık API'lerini temel alır. Bu katmanları aşağıdan yukarıya doğru inceleyelim.
- Çalışma zamanı
- Bu modülde Compose çalışma zamanıyla ilgili temel bilgiler (ör.
remember
,mutableStateOf
,@Composable
) veSideEffect
açıklanmaktadır. Composer'ın kullanıcı arayüzüne değil, yalnızca ağaç yönetimi özelliklerine ihtiyacınız varsa doğrudan bu katman üzerinde oluşturabilirsiniz. - Kullanıcı arayüzü
- Kullanıcı arayüzü katmanı birden fazla modülden oluşur (
ui-text
,ui-graphics
,ui-tooling
vb.). Bu modüllerLayoutNode
,Modifier
, giriş işleyiciler, özel düzenler ve çizim gibi kullanıcı arayüzü araç setinin temel özelliklerini uygular. Yalnızca temel bir kullanıcı arayüzü araç setiyle ilgili kavramlara ihtiyacınız varsa bu katmana geçmeyi düşünebilirsiniz. - Temel
- Bu modülde, Compose kullanıcı arayüzü için
Row
veColumn
,LazyColumn
, belirli hareketleri tanıma gibi tasarım sisteminden bağımsız yapı taşları yer almaktadır. Kendi tasarım sisteminizi oluşturmak için temel katmanı üzerine geliştirmeyi düşünebilirsiniz. - Malzeme
- Bu modülde, Compose kullanıcı arayüzü için Materyal Tasarım sisteminin uygulanması amacıyla bir tema sistemi, stil özellikleri ayarlanmış bileşenler, dalga göstergeleri ve simgeler sağlanmaktadır. Uygulamanızda Materyal Tasarım'ı kullanırken bu katmanı temel alın.
Tasarım ilkeleri
Jetpack Compose için yol gösterici ilke, birkaç monolitik bileşen yerine bir araya getirilebilen (veya bir araya getirilebilen) küçük ve odaklanmış işlevsellik parçaları sağlamaktır. Bu yaklaşımın birçok avantajı vardır.
Kontrol
Üst seviye bileşenler genellikle sizin için daha fazla fayda sağlar, ancak sahip olduğunuz doğrudan kontrol miktarını sınırlandırır. Daha fazla kontrole ihtiyacınız olursa daha düşük düzeyli bir bileşen kullanmak için "açılır menü" yapabilirsiniz.
Örneğin, bir bileşenin rengini canlandırmak istiyorsanız animateColorAsState
API'sini kullanabilirsiniz:
val color = animateColorAsState(if (condition) Color.Green else Color.Red)
Ancak bileşenin her zaman gri renkli başlaması gerekiyorsa bunu bu API ile yapamazsınız. Bunun yerine, açılır menüden daha alt düzey Animatable
API'sini kullanabilirsiniz:
val color = remember { Animatable(Color.Gray) } LaunchedEffect(condition) { color.animateTo(if (condition) Color.Green else Color.Red) }
Daha üst düzey animateColorAsState
API, alt düzey Animatable
API temel alınarak oluşturulmuştur. Alt düzey API kullanmak daha karmaşıktır ancak daha fazla kontrol sunar. İhtiyaçlarınıza en uygun soyutlama düzeyini seçin.
Özelleştirme
Daha küçük yapı taşlarından üst düzey bileşenlerin derlenmesi, gerektiğinde bileşenleri özelleştirmeyi çok daha kolay hale getirir. Örneğin, Malzeme katmanı tarafından sağlanan Button
uygulamasını göz önünde bulundurun:
@Composable fun Button( // … content: @Composable RowScope.() -> Unit ) { Surface(/* … */) { CompositionLocalProvider(/* … */) { // set LocalContentAlpha ProvideTextStyle(MaterialTheme.typography.button) { Row( // … content = content ) } } } }
Button
, 4 bileşenden oluşur:
Arka plan, şekil, tıklama işleme vb. öğeleri içeren
Surface
bir malzeme.CompositionLocalProvider
: Düğme etkinleştirildiğinde veya devre dışı bırakıldığında içeriğin alfa sürümünü değiştirir.ProvideTextStyle
, kullanılacak varsayılan metin stilini ayarlarRow
, düğmenin içeriği için varsayılan düzen politikasını sağlar
Yapıyı daha net hale getirmek için bazı parametreleri ve yorumları dahil etmedik ancak bileşeni uygulamak için bu 4 bileşeni bir araya getirdiğinden bileşenin tamamında yalnızca yaklaşık 40 satır kod bulunur. Button
gibi bileşenler, hangi parametreleri açığa çıkardıklarına karar verir ve yaygın özelleştirmelerin etkinleştirilmesi ile bir bileşenin kullanımını zorlaştırabilecek parametre patlamaları arasında bir denge kurar. Örneğin, malzeme bileşenleri, Materyal Tasarım sisteminde belirtilen özelleştirmeler sunarak materyal tasarım ilkelerinin takip edilmesini kolaylaştırır.
Bununla birlikte, bileşenin parametrelerinin ötesinde bir özelleştirme yapmak isterseniz bir seviyeyi "açarak" bir bileşeni çatallayabilirsiniz. Örneğin, Material Design, düğmelerin arka planı düz renkli olmalıdır. Gradyan arka plana ihtiyacınız varsa bu seçenek Button
parametreleri tarafından desteklenmez. Bu durumda, Material Button
uygulamasını referans olarak kullanabilir ve kendi bileşeninizi oluşturabilirsiniz:
@Composable fun GradientButton( // … background: List<Color>, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit ) { Row( // … modifier = modifier .clickable(onClick = {}) .background( Brush.horizontalGradient(background) ) ) { CompositionLocalProvider(/* … */) { // set material LocalContentAlpha ProvideTextStyle(MaterialTheme.typography.button) { content() } } } }
Yukarıdaki uygulama, Materyal katmanındaki mevcut içerik alfa kavramları ve geçerli metin stili gibi bileşenleri kullanmaya devam etmektedir. Bununla birlikte, Surface
malzemeyi bir Row
ile değiştirir ve istenen görünümü elde etmek için stilini biçimlendirir.
Materyal kavramlarını hiç kullanmak istemiyorsanız, örneğin kendi özel tasarım sisteminizi kuruyorsanız, sadece temel katmanı bileşenlerini kullanmak için açılır menüyü kullanabilirsiniz:
@Composable fun BespokeButton( // … backgroundColor: Color, modifier: Modifier = Modifier, content: @Composable RowScope.() -> Unit ) { Row( // … modifier = modifier .clickable(onClick = {}) .background(backgroundColor) ) { // No Material components used content() } }
Jetpack Compose, en üst düzey bileşenler için en basit adları saklı tutar. Örneğin androidx.compose.material.Text
, androidx.compose.foundation.text.BasicText
üzerine kurulmuştur.
Bu, daha yüksek düzeyleri değiştirmek isterseniz kendi uygulamanıza en bulunabilir adı girmenizi mümkün kılar.
Doğru soyutlamayı seçme
Compose'un katmanlı, yeniden kullanılabilir bileşenler oluşturma felsefesi, her zaman alt seviyedeki yapı taşlarına erişmemeniz gerektiği anlamına gelir. Birçok üst düzey bileşen yalnızca daha fazla işlev sunmakla kalmaz, çoğu zaman erişilebilirliği destekleme gibi en iyi uygulamaları da uygular.
Örneğin, özel bileşeninize hareket desteği eklemek istiyorsanız Modifier.pointerInput
kullanarak bunu sıfırdan oluşturabilirsiniz ancak Modifier.draggable
, Modifier.scrollable
veya Modifier.swipeable
gibi daha iyi bir başlangıç noktası sunabilecek bunun üzerine inşa edilmiş başka üst düzey bileşenler de vardır.
Kural olarak, içerdikleri en iyi uygulamalardan yararlanmak için ihtiyaç duyduğunuz işlevi sunan en üst düzey bileşen üzerinde derlemeyi tercih edin.
Daha fazla bilgi
Özel tasarım sistemi oluşturma örneği için Jetsnack örneğine bakın.
Sizin için önerilenler
- Not: JavaScript kapalıyken bağlantı metni gösterilir
- Jetpack Compose için Kotlin
- Listeler ve ızgaralar
- Compose'da yan etkiler