Jetpack Compose mimari katmanlar

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 ve SideEffect. 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 ve Column gibi LazyColumn, 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:

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

  2. 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

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