Jetpack Compose mimari katmanlar

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) ve SideEffect 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üller LayoutNode, 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 ve Column, 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)
ArchitectureLayering.kt

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)
}
ArchitectureLayering.kt

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
                )
            }
        }
    }
}
ArchitectureLayering.kt

Button, 4 bileşenden oluşur:

  1. Arka plan, şekil, tıklama işleme vb. öğeleri içeren Surface bir malzeme.

  2. CompositionLocalProvider: Düğme etkinleştirildiğinde veya devre dışı bırakıldığında içeriğin alfa sürümünü değiştirir.

  3. 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ı 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()
            }
        }
    }
}
ArchitectureLayering.kt

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()
    }
}
ArchitectureLayering.kt

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.