Jetpack Compose mimari katmanlar

Bu sayfada, Jetpack Compose'u oluşturan mimari katmanlara ve bu tasarımı yönlendiren temel ilkelere ü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 katmanların üzerine inşa edilir ve işlevleri birleştirerek daha üst düzey bileşenler oluşturur. Her katman, modül sınırlarını doğrulamak ve gerekirse herhangi bir katmanı değiştirmenize olanak tanımak 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) ve SideEffect yer alır. Yalnızca Compose'un kullanıcı arayüzüne değil, ağaç yönetimi özelliklerine ihtiyacınız varsa doğrudan bu katmanda oluşturma işlemini yapabilirsiniz.
Kullanıcı arayüzü
Kullanıcı arayüzü katmanı birden fazla modülden oluşur ( ui-text, ui-graphics, ui-tooling vb.). Bu modüller, kullanıcı arayüzü araç setinin temellerini (ör. LayoutNode, Modifier, giriş işleyicileri, özel düzenler ve çizim) 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ül, Compose kullanıcı arayüzü için tasarım sistemine bağlı olmayan yapı taşları sağlar (ör. Row ve Column, LazyColumn, belirli hareketlerin tanınması vb.). Kendi tasarım sisteminizi oluşturmak için temel katmandan yararlanabilirsiniz.
Malzeme
Bu modül, tema sistemi, stilize bileşenler, dalgalanma göstergeleri ve simgeler sunarak Compose kullanıcı arayüzü için Material Design sisteminin uygulanmasını sağlar. Uygulamanızda Materyal Tasarım'ı kullanırken bu katmandan yararlanın.

Tasarım ilkeleri

Jetpack Compose'un temel ilkelerinden biri, birkaç monolitik bileşen yerine birlikte birleştirilebilen (veya derlenebilen) küçük, odaklanmış işlev parçaları sağlamaktır. Bu yaklaşımın birçok avantajı vardır.

Kontrol edin

Üst düzey bileşenler sizin için daha fazla işlem yapma eğiliminde olsa da sahip olduğunuz doğrudan kontrol miktarını sınırlar. Daha fazla kontrole ihtiyacınız varsa daha alt düzey bir bileşen kullanmak için "aşağı inebilirsiniz".

Örneğin, bir bileşenin rengini animasyonlu hale getirmek istiyorsanız animateColorAsState API'sini kullanabilirsiniz:

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

Ancak bileşenin her zaman gri olarak 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)
}
ArchitectureLayering.kt

Üst düzey animateColorAsState API'nin kendisi de alt düzey Animatable API'ye dayanır. 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, Materyal katmanı tarafından sağlanan Button uygulamasını düşünün:

@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 materyalSurface.

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

  3. ProvideTextStyle, kullanılacak varsayılan metin stilini belirler.

  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 düğmeyi uygulamak için bu 4 bileşeni yalnızca bir araya getirdiğinden bileşenin tamamı yalnızca yaklaşık 40 satır koddan oluşur. Button gibi bileşenler, hangi parametreleri gösterecekleri konusunda kararlıdır ve yaygın özelleştirmeleri etkinleştirmeyi, bileşenin kullanımını zorlaştırabilecek çok sayıda parametreyle dengeler. Ö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'a göre düğmelerin düz renkli arka plana sahip olması gerekir. 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()
            }
        }
    }
}
ArchitectureLayering.kt

Yukarıdaki uygulamada, Material katmanındaki bileşenler (ör. Material'ın geçerli içerik alfa değeri ve geçerli metin stili gibi kavramları) kullanılmaya devam etmektedir. Ancak Surface materyalini Row ile değiştirir ve istenen görünümü elde etmek için stil verir.

Material kavramlarını hiç kullanmak istemiyorsanız (ör. kendi özel tasarım sisteminizi oluşturuyorsanız) yalnızca temel katman bileşenlerini 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()
    }
}
ArchitectureLayering.kt

Jetpack Compose, en basit adları en üst düzey bileşenler için ayırır. Örneğin, androidx.compose.material.Text androidx.compose.foundation.text.BasicText üzerine inşa edilmiştir. Bu, daha yüksek düzeyleri değiştirmek isterseniz kendi uygulamanıza en bulunabilir adı girmenizi mümkün kılar.

Doğru soyutlama yöntemini 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. Üst düzey bileşenlerin çoğu, yalnızca daha fazla işlev sunmakla kalmaz, genellikle 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. Bununla birlikte, bu bileşenin üzerine inşa edilmiş ve daha iyi bir başlangıç noktası sunabilecek başka üst düzey bileşenler de vardır (ör. Modifier.draggable, Modifier.scrollable veya Modifier.swipeable).

Kural olarak, içerdikleri en iyi uygulamalardan yararlanmak için ihtiyaç duyduğunuz işlevi sağlayan 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.