Jetpack Compose mimari katmanlar

Bu sayfada, Jetpack Compose'u oluşturan mimari katmanlara ve bu tasarımın temel ilkelerine genel bir bakış sunulmaktadır.

Jetpack Compose, tek bir monolitik proje değildir. Eksiksiz bir yığın oluşturmak için bir araya getirilen bir dizi modülden oluşur. 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 kullanma
  • 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 indirme

Katmanlar

Jetpack Compose'un ana katmanları şunlardır:

Şekil 1. Jetpack Compose'un ana katmanları.

Her katman, alt düzeylerin ü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 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ı aşağıdan yukarıya doğru inceleyelim.

Çalışma zamanı
Bu modülde, Compose çalışma zamanının temel özellikleri (ör. remember, mutableStateOf, @Composable ek açıklaması ve SideEffect) açıklanmaktadır. Yalnızca Compose'un kullanıcı arayüzüne değil, ağaç yönetimi özelliklerine ihtiyacınız varsa doğrudan bu katman üzerinde derleme yapabilirsiniz.
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 uygular. Örneğin, LayoutNode, Modifier, giriş işleyiciler, özel düzenler ve çizim. Yalnızca bir 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 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 katmandan yararlanabilirsiniz.
Malzeme
Bu modül, Compose kullanıcı arayüzü için Materyal Tasarım sisteminin bir uygulamasını sunar. Bu uygulamada tema sistemi, stilli bileşenler, dalga göstergeleri ve simgeler bulunur. Uygulamanızda Materyal Tasarım'ı kullanırken bu katmanı temel alın.

Tasarım ilkeleri

Jetpack Compose'un temel ilkelerinden biri, birkaç monolitik bileşen yerine bir araya getirilebilen (veya oluşturulabilen) küçük, odaklanmış işlev parçaları sağlamaktır. Bu yaklaşımın çeşitli avantajları vardır.

Kontrol

Üst düzey bileşenler sizin için daha fazla şey yapma eğilimindedir ancak doğrudan kontrol miktarınızı sınırlar. Daha fazla kontrole ihtiyacınız varsa daha alt düzey bir bileşeni kullanmak için "açılır menüden" seçim yapabilirsiniz.

Ö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ını istiyorsanız bunu bu API ile yapamazsınız. Bunun yerine, alt düzey Animatable API'yi kullanabilirsiniz:

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

Daha üst düzey animateColorAsState API'si, daha alt düzey Animatable API'si üzerine inşa edilmiştir. Alt düzey API'yi kullanmak daha karmaşıktır ancak daha fazla kontrol sağlar. İhtiyaçlarınıza en uygun soyutlama düzeyini seçin.

Özelleştirme

Daha küçük yapı taşlarından daha üst düzey bileşenler oluşturmak, gerektiğinde bileşenleri özelleştirmeyi çok daha kolay hale getirir. Örneğin, Material katmanı tarafından sağlanan Button uygulamasına bakalı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 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ı yalnızca 40 satır koddan oluşur. Çünkü düğmeyi uygulamak için bu 4 bileşeni bir araya getirir. Button gibi bileşenler, hangi parametreleri kullanıma sunacakları konusunda belirli bir yaklaşıma sahiptir. Bu yaklaşım, yaygın özelleştirmeleri etkinleştirmek ile bileşenin kullanımını zorlaştırabilecek çok sayıda parametre arasında denge kurar. Örneğin, Materyal bileşenleri, Materyal Tasarım sisteminde belirtilen özelleştirmeleri sunarak Materyal Tasarım ilkelerini takip etmeyi kolaylaştırır.

Ancak bir bileşenin parametrelerinin ötesinde bir özelleştirme yapmak istiyorsanız bir seviye "aşağı inebilir" ve bir bileşeni çatallayabilirsiniz. Örneğin, Materyal Tasarım, düğmelerin düz renkli bir arka plana sahip olması gerektiğini belirtir. Arka planın gradyan olmasını istiyorsanız 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()
            }
        }
    }
}

Yukarıdaki uygulama, Material katmanındaki bileşenleri kullanmaya devam eder. Örneğin, Material'ın mevcut içerik alfa ve mevcut metin stili kavramları. Ancak Surface malzemesini Row ile değiştirir ve istenen görünümü elde etmek için stilini ayarlar.

Material kavramlarını hiç kullanmak istemiyorsanız (örneğin, 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()
    }
}

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

Doğru soyutlamayı 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, daha fazla işlev sunmanın yanı sıra erişilebilirlik desteği 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 bunun üzerine inşa edilmiş ve daha iyi bir başlangıç noktası sunabilecek başka, daha üst düzey bileşenler de vardır. Örneğin, Modifier.draggable, Modifier.scrollable veya Modifier.swipeable.

Kural olarak, ihtiyaç duyduğunuz işlevleri sunan en üst düzey bileşeni temel alarak oluşturmayı tercih edin. Böylece, bu bileşenlerin içerdiği en iyi uygulamalardan yararlanabilirsiniz.

Daha fazla bilgi

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