Bu sayfada Jetpack Compose'u oluşturan mimari katmanlara ve bu tasarıma yön veren temel ilkelere genel bakış sunulmaktadır.
Jetpack Compose tek bir monolitik proje değildir. Tam bir yığın oluşturmak için bir araya getirilmiş çeşitli modüllerden oluşturulur. Jetpack Compose'u oluşturan farklı modülleri anlayarak şunları yapabilirsiniz:
- Uygulamanızı 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 seviyeye "dönüş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 oluşturulur ve üst seviye bileşenler oluşturmak için işlevler bir araya getirilir. Her bir katman, modül sınırlarını doğrulamak ve gerektiğinde 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 sağlanır. Örneğin
remember
,mutableStateOf
,@Composable
notu veSideEffect
. 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 geliştirme yapmayı düşünebilirsiniz. - Kullanıcı Arayüzü
- Kullanıcı arayüzü katmanı birden fazla modülden (
ui-text
,ui-graphics
,ui-tooling
vb.) oluşur. Bu modüller, kullanıcı arayüzü araç setinin temel özelliklerini (ör.LayoutNode
,Modifier
, giriş işleyicileri, özel düzenler ve çizim) uygular. Yalnızca kullanıcı arayüzü araç setiyle ilgili temel kavramlara ihtiyacınız varsa bu katmanı geliştirmeyi düşünebilirsiniz. - Kuruluş
- Bu modül, Compose kullanıcı arayüzü için
Row
veColumn
gibiLazyColumn
, belirli hareketleri tanıma gibi tasarım sisteminden bağımsız yapı taşları sunar. Kendi tasarım sisteminizi oluşturmak için temel katmanı temel alabilirsiniz. - Malzeme
- Bu modülde, Composer kullanıcı arayüzü için Materyal Tasarım sistemi uygulanmış ve bir tema sistemi, stilize edilmiş bileşenler, dalga işaretleri ve simgeler gibi bir uygulama sunulmaktadır. Uygulamanızda Materyal Tasarım'ı kullanırken bu katmanı temel alın.
Tasarım ilkeleri
Jetpack Compose'un yol gösterici ilkesi, birkaç monolitik bileşen yerine bir araya getirilebilen (veya birleştirilebilen) küçük, odaklı işlev parçaları sağlamaktır. Bu yaklaşımın birçok avantajı vardır.
Kontrol
Üst düzey bileşenler genellikle sizin için daha fazlasını yapar, ancak sahip olduğunuz doğrudan kontrol miktarını sınırlandırır. Daha fazla kontrole ihtiyacınız varsa daha alt düzey bir bileşen kullanmak için "aşağı açılır" seçeneğini kullanabilirsiniz.
Örneğin, bir bileşenin rengine animasyon eklemek istiyorsanız animateColorAsState
API'sini kullanabilirsiniz:
val color = animateColorAsState(if (condition) Color.Green else Color.Red)
Ancak bileşenin her zaman gri renkte başlaması gerekiyorsa bunu bu API ile yapamazsınız. Bunun yerine, alt düzey Animatable
API'yi kullanmak için aşağıdaki adımları uygulayabilirsiniz:
val color = remember { Animatable(Color.Gray) } LaunchedEffect(condition) { color.animateTo(if (condition) Color.Green else Color.Red) }
Üst seviyedeki animateColorAsState
API'sinin kendisi de alt seviyedeki Animatable
API'si üzerine kurulmuştur. Alt düzey API'nin kullanılması daha karmaşıktır ancak daha fazla kontrol sağlar. İhtiyaçlarınıza en uygun soyutlama seviyesini seçin.
Özelleştirme
Üst düzey bileşenlerin daha küçük yapı taşlarından derlenmesi, gerektiğinde bileşenleri özelleştirmeyi çok daha kolay hale getirir. Örneğin, Materyal katmanı tarafından sağlanan Button
uygulamasını ele alalım:
@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. sağlayan bir malzeme
Surface
.Düğme etkinleştirildiğinde veya devre dışı bırakıldığında içeriğin alfa sürümünü değiştiren bir
CompositionLocalProvider
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 anlaşılır hale getirmek için bazı parametreleri ve yorumları dahil etmedik ancak bileşenin tamamı, düğmeyi uygulamak üzere bu 4 bileşeni bir araya getirdiği için yalnızca yaklaşık 40 satır koddan oluşur. Button
gibi bileşenler, hangi parametreleri açığa çıkaracakları konusunda hassastır. Bu sayede, genel özelleştirmeler ile bir bileşenin kullanımını zorlaştırabilecek patlamalar yaratabilecek parametreler arasında denge sağlanır. Örneğin, malzeme bileşenleri, Materyal Tasarım sisteminde
belirtilen özelleştirmeleri sunarak materyal tasarım ilkelerinin uygulanmasını kolaylaştırıyor.
Bununla birlikte, bir bileşenin parametrelerinin ötesinde bir özelleştirme yapmak istiyorsanız bir düzeyi "dropdown" (aşağı açılır) ve bir bileşeni çatallayabilirsiniz. Örneğin, Material Design'da (Materyal Tasarım), düğmelerin arka planında düz renkli olması gerektiğini belirtir. Renk geçişi arka planına ihtiyacınız varsa bu seçenek, Button
parametreleri tarafından desteklenmez. Bu durumda, referans olarak Malzeme Button
uygulamasını 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 uygulamada, Materyal katmanındaki bileşenler (Material'ın mevcut içerik alfa kavramları ve mevcut metin stili gibi) kullanılmaya devam etmektedir. Bununla birlikte, Surface
malzemesini Row
ile değiştirir ve istenen görünümü elde etmek için biçimlendirir.
Materyal kavramlarını hiç kullanmak istemiyorsanız, örneğin kendi özel tasarım sisteminizi oluşturuyorsanız temel katmanı bileşenlerini kullanmayı düşünebilirsiniz:
@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ı ayırır. Ö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 keşfedilebilir adı sağlamanıza olanak tanır.
Doğru soyutlamayı seçme
Compose'un katmanlı, yeniden kullanılabilir bileşenler oluşturma felsefesi, her zaman alt seviye yapı taşlarına erişmemeniz gerektiği anlamına gelir. Birçok üst düzey bileşen yalnızca daha fazla işlevsellik sunmakla kalmaz, genellikle erişilebilirliği desteklemek 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 bunun üzerine oluşturulan ve daha iyi bir başlangıç noktası sunabilecek başka üst düzey bileşenler de vardır. Örneğin, Modifier.draggable
Modifier.scrollable
veya Modifier.swipeable
.
Kural olarak, içerdiği en iyi uygulamalardan yararlanmak için ihtiyacınız olan işlevi sunan en üst düzey bileşeni temel almayı 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: Bağlantı metni JavaScript kapalıyken görüntülenir
- Jetpack Compose için Kotlin
- Listeler ve ızgaralar
- Compose'daki yan etkiler