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ğildir. Tam bir yığın oluşturmak için bir araya getirilen çeşitli modüllerden oluşur. Jetpack Compose'u oluşturan farklı modülleri anlamak sayesinde:

  • 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" anlama
  • 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ının temelleri (ör. remember, mutableStateOf, @Composable ek açıklama ve SideEffect) ele alınmaktadı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 gerçekleştirebilirsiniz.
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 kullanıcı arayüzü araç setinin temel kavramlarına ihtiyacınız varsa bu katmanı temel alabilirsiniz.
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 çeşitli avantajları 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, alt düzey Animatable API'yi kullanmak için açılır menüyü 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'yi 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şenler oluşturmak, 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 birleştirdiği için 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. Bu bileşenler, 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'ın geçerli içerik alfa ve mevcut metin stili gibi kavramları da dahil olmak üzere Material katmanındaki bileşenler 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 sayede, daha yüksek düzeyleri değiştirmek isterseniz kendi uygulamanızı en kolay bulunabilir adla sağlayabilirsiniz.

Doğru soyutlama yöntemini seçme

Compose'un katmanlı, yeniden kullanılabilir bileşenler oluşturma felsefesi, her zaman alt düzey yapı taşlarına ulaşmamanız 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çerdiği en iyi uygulamalardan yararlanmak için ihtiyacınız olan işlevleri sunan en üst düzey bileşeni tercih edin.

Daha fazla bilgi

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