Jetpack Compose mimari katmanlar

Bu sayfada, Jetpack Compose'u oluşturan mimari katmanlar ve bu tasarıma yön veren temel ilkeler hakkında genel bir bakış sunulmaktadır.

Jetpack Compose, tek bir monolitik proje değildir. Tam bir yığın oluşturmak için bir araya getirilmiş bir dizi modülden oluşturulur. Jetpack Compose'u oluşturan farklı modülleri anlamak şunları yapmanızı sağlar:

• 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 "geçebileceğinizi" anlayın.
• Bağımlılıklarınızı en aza indirin

Katmanlar

Jetpack Compose'un başlıca katmanları şunlardır:

1.şekil Jetpack Compose'un başlıca katmanları.

Her katman, alt düzeylerin üzerine inşa edilir ve daha üst düzey bileşenler oluşturmak için işlevleri birleştirir. Her katman, modül sınırlarını doğrulamak ve gerektiğinde herhangi bir katmanı değiştirmenize olanak tanımak için alt katmanların herkese açık API'lerini temel alır. Bu katmanları alttan üste doğru inceleyelim.

Çalışma zamanı

Bu modülde, Compose çalışma zamanının temel bilgileri (ör. remember, mutableStateOf, @Composable ek açıklaması ve SideEffect) verilmektedir. Yalnızca Compose'un ağaç yönetimi özelliklerine ihtiyacınız varsa ve kullanıcı arayüzüne ihtiyacınız yoksa doğrudan bu katmanı temel alarak geliştirme yapabilirsiniz.

UI

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 bir kullanıcı arayüzü araç setinin temel kavramlarına ihtiyacınız varsa bu katmanı temel alarak geliştirmeyi düşünebilirsiniz.

Foundation

Bu modül, Compose kullanıcı arayüzü için tasarım sisteminden bağımsız yapı taşları sağlar. Örneğin: Row ve Column, LazyColumn, belirli hareketlerin tanınması vb. Kendi tasarım sisteminizi oluşturmak için temel katmanı kullanabilirsiniz.

Malzeme

Bu modül, Compose kullanıcı arayüzü için Material Design sisteminin bir uygulamasını sağlar. Tema sistemi, stil verilmiş bileşenler, dalgalanma göstergeleri ve simgeler içerir. Uygulamanızda Materyal Tasarım'ı kullanırken bu katmanı temel alın.

Tasarım ilkeleri

Jetpack Compose'un temel prensibi, birkaç monolitik bileşen yerine bir araya getirilebilen (veya oluşturulabilen) küçük ve odaklanmış işlevler sunmaktır. Bu yaklaşımın çeşitli avantajları vardır.

Kontrol edin

Daha üst düzey bileşenler genellikle sizin için daha fazla iş yapar ancak doğrudan kontrol miktarınızı sınırlar. Daha fazla kontrole ihtiyacınız varsa daha düşük düzeyli bir bileşeni kullanmak için "aşağı açabilirsiniz".

Örneğin, bir bileşenin rengini canlandırmak istiyorsanız animateColorAsState API'sini kullanabilirsiniz:

val color = animateColorAsState(if (condition) Color.Green else Color.Red)
ArchitectureLayering.kt

Ancak bileşenin her zaman gri renkte başlaması gerekiyorsa bu API ile bunu yapamazsınız. Bunun yerine, daha düşük düzeydeki Animatable API'yi kullanmak için açılır listeyi kullanabilirsiniz:

val color = remember { Animatable(Color.Gray) }
LaunchedEffect(condition) {
    color.animateTo(if (condition) Color.Green else Color.Red)
}
ArchitectureLayering.kt

Daha yüksek düzeydeki animateColorAsState API, daha düşük düzeydeki Animatable API üzerinde oluşturulmuştur. Daha düşük düzeyli API'nin kullanılması daha karmaşıktır ancak daha fazla kontrol sağlar. İhtiyaçlarınıza en uygun soyutlama düzeyini seçin.

Özelleştirme

Daha üst düzey bileşenleri daha küçük yapı taşlarından oluşturmak, bileşenleri gerektiğinde özelleştirmeyi çok daha kolay hale getirir. Örneğin, Materyal katmanı tarafından sağlanan uygulamayı Button göz önünde bulundurun:

@Composable
fun Button(
    // …
    content: @Composable RowScope.() -> Unit
) {
    Surface(/* … */) {
        CompositionLocalProvider(/* … */) { // set LocalContentAlpha
            ProvideTextStyle(MaterialTheme.typography.button) {
                Row(
                    // …
                    content = content
                )
            }
        }
    }
}
ArchitectureLayering.kt

Button, 4 bileşenden oluşur:

1. Arka plan, şekil, tıklama işleme vb. sağlayan bir materyal Surface

2. Düğme etkinleştirildiğinde veya devre dışı bırakıldığında içeriğin alfa değerini değiştiren bir CompositionLocalProvider

3. A ProvideTextStyle kullanılacak varsayılan metin stilini ayarlar

4. Row, 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ı atladık. Ancak bileşenin tamamı, düğmeyi uygulamak için bu 4 bileşeni bir araya getirdiğinden yalnızca yaklaşık 40 satır koddan oluşuyor. Button gibi bileşenler, hangi parametreleri kullanıma sunacakları konusunda belirli bir görüşe sahiptir. Bu bileşenler, yaygın özelleştirmelerin etkinleştirilmesi ile bileşenin kullanımını zorlaştırabilecek parametrelerin çok fazla olması arasında bir denge kurar. Örneğin, Materyal bileşenleri, Materyal Tasarım sisteminde belirtilen özelleştirmeler sunarak materyal tasarım ilkelerine uymayı kolaylaştırır.

Ancak bir bileşenin parametrelerinin ötesinde bir özelleştirme yapmak istiyorsanız bir seviye "aşağı inebilir" ve bileşeni çatallayabilirsiniz. Örneğin, Material Design, düğmelerin düz renkli bir arka plana sahip olması gerektiğini belirtir. Gradyan arka plan istiyorsanız bu seçenek Button parametreleri tarafından desteklenmez. Bu durumda, Materyal 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()
            }
        }
    }
}
ArchitectureLayering.kt

Yukarıdaki uygulama, Material katmanındaki bileşenleri (ör. Material'ın geçerli içerik alfa ve geçerli metin stili kavramları) kullanmaya devam ediyor. Ancak materyali Surface ile değiştirip Row ile değiştirir ve istenen görünümü elde etmek için stilini ayarlar.

Örneğin, kendi özel tasarım sisteminizi oluşturuyorsanız Material kavramlarını hiç kullanmak istemiyorsanız temel katman bileşenlerini kullanmaya geçebilirsiniz:

@Composable
fun BespokeButton(
    // …
    backgroundColor: Color,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Row(
        // …
        modifier = modifier
            .clickable(onClick = {})
            .background(backgroundColor)
    ) {
        // No Material components used
        content()
    }
}
ArchitectureLayering.kt

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 sayede, daha yüksek seviyeleri değiştirmek isterseniz kendi uygulamanızı en kolay bulunabilen adla sağlayabilirsiniz.

Doğru soyutlamayı seçme

Compose'un katmanlı ve yeniden kullanılabilir bileşenler oluşturma felsefesi, her zaman alt düzey yapı taşlarını kullanmamanız gerektiği anlamına gelir. Daha üst düzeydeki birçok bileşen yalnızca daha fazla işlevsellik sunmakla kalmaz, aynı zamanda erişilebilirliği destekleme gibi en iyi uygulamaları da uygular.

Örneğin, özel bileşeninize hareket desteği eklemek istiyorsanız bunu Modifier.pointerInput kullanarak sıfırdan oluşturabilirsiniz. Ancak bu bileşenin üzerine inşa edilmiş, 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.

Genel olarak, en iyi uygulamalardan yararlanmak için ihtiyacınız olan işlevselliği sunan en üst düzeydeki bileşeni kullanmayı tercih edin.

Daha fazla bilgi

Özel tasarım sistemi oluşturma örneği için Jetsnack örneğine bakın.