Jetpack Compose mimari katmanlar

Bu sayfada, önemli bir katmanı oluşturan mimari katmanlara ve bu tasarımı şekillendiren temel ilkelere odaklanacağız.

Jetpack Compose tek bir monolitik proje değil; bir sayıdan oluşturuldu tam bir yığın oluşturmak üzere bir araya getirilen modüllerin sayısı. Anlama Jetpack Compose'u oluşturan farklı modüller aşağıdakileri yapmanıza olanak tanır:

  • Uygulama veya kitaplığınızı oluşturmak için uygun soyutlama düzeyini kullanın
  • Daha fazla kontrole sahip olmak ya da daha fazla kontrol sahibi olmak için özelleştirme
  • 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 bir katman daha alt seviyelerde yer alır ve yüksek seviyelerde özelliklere üst düzey bileşenlerden oluşur. Her katman, alt katmanların herkese açık API'lerini temel alır kontrol etmenizi ve ters gidebilecek herhangi bir katmanı değiştirebilmenizi gerekir. Bu katmanları aşağıdan yukarıya doğru inceleyelim.

Çalışma zamanı
Bu modülde, Compose çalışma zamanıyla ilgili temel bilgileri bulabilirsiniz. Örneğin: remember, mutableStateOf, "the" @Composable ek açıklama ve SideEffect. Yalnızca ihtiyacınız varsa doğrudan bu katmanın üzerine Compose'un kullanıcı arayüzü değil, ağaç yönetimi yetenekleri.
Kullanıcı arayüzü
Kullanıcı arayüzü katmanı birden fazla modülden ( ui-text, ui-graphics, ui-tooling vb.) bakın. Bu modüller, aşağıdakiler gibi kullanıcı arayüzü araç setinin temel özelliklerini uygular: LayoutNode, Modifier, giriş işleyiciler, özel düzenler ve çizim. Aşağıdaki durumlarda bu katmanda geliştirmeyi yalnızca kullanıcı arayüzü araç setiyle ilgili temel kavramlara ihtiyacınız var.
Temel
Bu modülde, Compose kullanıcı arayüzü için tasarım sisteminden bağımsız yapı taşları beğeni Row ve Column, LazyColumn ve bunlara benzer başka hareketlerin algılanması gibi kendi tasarım sisteminizi oluşturmanıza yardımcı olacak.
Malzeme
Bu modülde, Materyal Tasarım sisteminin Tema sistemi, stil özellikleri ayarlanmış bileşenler, dalgacık sağlayarak kullanıcı arayüzü oluşturma göstergeler, simgeler. Projenizde Materyal Tasarım kullanırken bu katmanı temel alın.
'nı inceleyin.

Tasarım ilkeleri

Jetpack Compose için yol gösterici ilke, küçük ve odaklanmış, birkaç işlevin yerine bir araya getirilebilen (veya bir araya getirilebilen) monolitik bileşenler. Bu yaklaşımın birçok avantajı vardır.

Kontrol

Üst seviye bileşenler genellikle sizin için daha fazla katkı sağlar ancak doğrudan sahip olduğunuz kontrolü ifade eder. Daha fazla kontrole ihtiyacınız varsa kullanmak için alt düzey bileşen.

Örneğin, bir bileşenin rengini canlandırmak isterseniz animateColorAsState API:

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

Bununla birlikte, bileşenin her zaman gri renkli başlaması gerekiyorsa bu API ile nasıl yapılacağını göstereceğim. Bunun yerine, açılır menüden daha alt seviyeyi kullanabilirsiniz. Animatable API:

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 seviyenin üzerine kurulmuştur Animatable API'sı. Alt düzey API kullanmak daha karmaşıktır ancak daha fazlasını sunar. ve kontrol etmesi gerekir. İhtiyaçlarınıza en uygun soyutlama düzeyini seçin.

Özelleştirme

Daha küçük yapı taşlarından üst seviye bileşenleri bir araya getirmek, bileşenleri özelleştirebilirsiniz. Örneğin, uygulama / Button Malzeme katmanı tarafından sağlanır:

@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. Materyal Surface arka plan, şekil, tıklama işleme vb. sağlar.

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

  3. CEVAP 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 parçasının tamamı yalnızca yaklaşık 40 satırdan oluşur çünkü oluşturmak için bu 4 bileşeni bir araya getirir. Button gibi bileşenler hangi parametreleri sundukları hakkında fikir sahibi olurlar. patlama yaratacak bir bileşen olabilecek parametre patlamasına karşı daha zordur. Örneğin, malzeme bileşenleri belirtilen özelleştirmeleri sunar bu da malzeme tasarımını takip etmeyi kolaylaştırıyor. ilkelerine uygun hareket etmenizi sağlar.

Bununla birlikte, bileşenin parametrelerinin ötesinde bir özelleştirme yapmak isterseniz açılır menüden bir bileşeni çatallayın. Örneğin, Material Tasarım, düğmelerin arka planı düz renkli olmalıdır. Şu durumda: Gradyan arka planı gerekir, bu seçenek Button tarafından desteklenmez parametreleridir. Bu durumda, Material Button uygulamasını bir referans verip kendi bileşeninizi derleyin:

@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, Malzeme katmanındaki bileşenleri kullanmaya devam eder: Materyal kavramları gibi mevcut içerik alfa ve geçerli metin stili. Ancak Surface malzemesini İstenen görünümü elde etmek için Row ve stillerini ayarlayın.

Materyal kavramlarını hiç kullanmak istemiyorsanız, örneğin sipariş tasarım sistemi kullanıyorsanız, aşağıyı düşündüğünüzde katman bileşenleri:

@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 üzerine inşa edilmiştir androidx.compose.foundation.text.BasicText. Bu, kendi uygulamanızı en olası şekilde sağlamanıza bulunabilir adı.

Doğru soyutlamayı seçme

Compose'un katmanlı, yeniden kullanılabilir bileşenler oluşturma felsefesi, her zaman alt seviyedeki yapı taşlarına ulaşmamalıdır. Çok sayıda üst seviye bileşenler yalnızca daha fazla işlev sunmakla kalmaz, çoğu zaman en iyi uygulamaları Örneğin, erişilebilirliği desteklemek.

Örneğin, özel bileşeninize hareket desteği eklemek isterseniz bunu sıfırdan oluşturmak için Modifier.pointerInput Ancak bunun üzerine inşa edilmiş daha yüksek seviyeli daha iyi bir başlangıç noktası sağlayabilirsiniz. Modifier.draggable, Modifier.scrollable veya Modifier.swipeable.

Kural olarak, derleme işlemini en üst düzeye çıkaran en üst düzey bileşende en iyi uygulamalardan yararlanmak için ihtiyaç duyacağınız işlevleri dahil.

Daha fazla bilgi

Bkz. Jetsnack örneği özel tasarım sistemi oluşturma örneği.

ziyaret edin.