Materyal Tasarım 2

Jetpack Compose, dijital arayüzler oluşturmak için kapsamlı bir tasarım sistemi olan Materyal Tasarım'ın bir uygulamasını sunar. Materyal Tasarım bileşenleri (düğmeler, kartlar, anahtarlar vb.) Materyal Tema temelinde geliştirilmiştir. Bu, projenizle ilgili Materyal Tasarım'ı ürününüzün markasını daha iyi yansıtacak şekilde özelleştirebilirsiniz. Malzeme Temada color [renk], tipografi ve şekil özellikleri bulunur. Bu özellikleri özelleştirdiğinizde, değişiklikleriniz uygulamanızı oluşturmak için kullandığınız bileşenlere otomatik olarak yansıtılır.

Jetpack Compose bu kavramları MaterialTheme bileşeniyle uygular:

MaterialTheme(
    colors = // ...
    typography = // ...
    shapes = // ...
) {
    // app content
}
Material2Snippets.kt

Uygulamanızı temalandırmak için MaterialTheme parametresine ilettiğiniz parametreleri yapılandırın.

Kontrast oluşturan iki ekran görüntüsü. İlk ekran görüntüsünde varsayılan MaterialTheme stili, ikinci ekran görüntüsünde ise değiştirilmiş stil kullanılmıştır.

Şekil 1. İlk ekran görüntüsünde, yapılandırılmayan bir uygulama gösteriliyor MaterialTheme ve bu nedenle varsayılan stilleri kullanır. İkinci ekran görüntüsünde, stili özelleştirmek için MaterialTheme parametrelerini ileten bir uygulama gösterilmektedir.

Renk

Renkler, basit bir veri tutma sınıfı olan Color sınıfıyla Oluştur'da modellenir.

val Red = Color(0xffff0000)
val Blue = Color(red = 0f, green = 0f, blue = 1f)
Material2Snippets.kt

Bunları istediğiniz gibi düzenleyebilirsiniz (üst düzey sabitler, tekil içinde veya satır içi olarak). Ancak renkleri temanızda belirtmenizi ve oradan almanızı önemle tavsiye ederiz. Bu yaklaşım, koyu temayı ve iç içe yerleştirilmiş temaları kolayca desteklemelerini sağlayabilirsiniz.

Temanın renk paleti örneği

Şekil 2. Material renk sistemi.

Compose, malzeme rengi sistemini modellemek için Colors sınıfını sağlar. Colors, açık veya koyu renk grupları oluşturmak için oluşturucu işlevleri sağlar:

private val Yellow200 = Color(0xffffeb46)
private val Blue200 = Color(0xff91a4fc)
// ...

private val DarkColors = darkColors(
    primary = Yellow200,
    secondary = Blue200,
    // ...
)
private val LightColors = lightColors(
    primary = Yellow500,
    primaryVariant = Yellow400,
    secondary = Blue700,
    // ...
)
Material2Snippets.kt

Colors öğelerinizi tanımladıktan sonra bunları bir MaterialTheme öğesine iletebilirsiniz:

MaterialTheme(
    colors = if (darkTheme) DarkColors else LightColors
) {
    // app content
}
Material2Snippets.kt

Tema renklerini kullanma

MaterialTheme composable'a sağlanan Colors öğesini şu şekilde alabilirsiniz: MaterialTheme.colors kullanılıyor.

Text(
    text = "Hello theming",
    color = MaterialTheme.colors.primary
)
Material2Snippets.kt

Yüzey ve içerik rengi

Birçok bileşen bir çift renk ve içerik rengini kabul eder:

Surface(
    color = MaterialTheme.colors.surface,
    contentColor = contentColorFor(color),
    // ...
) { /* ... */ }

TopAppBar(
    backgroundColor = MaterialTheme.colors.primarySurface,
    contentColor = contentColorFor(backgroundColor),
    // ...
) { /* ... */ }
Material2Snippets.kt

Bu, bir composable'ın rengini belirlemenizin yanı sıra, içerik,yani içindeki composable'lar için bir varsayılan renk. Birçok bileşen varsayılan olarak bu içerik rengini kullanır. Örneğin, Text renk, Icon, kendi arka plan rengini ayarlamak için de bu rengi kullanır renk tonu.

Aynı banner'ın farklı renklere sahip iki örneği

Şekil 3. Farklı arka plan renkleri ayarlandığında farklı metin ve simge renkleri elde edilir.

contentColorFor() yöntemi, tüm tema renkleri için uygun "açık" rengi alır. Örneğin, Surface'ta primary arka plan rengi ayarlarsanız bu işlev, onPrimary'i içerik rengi olarak ayarlamak için kullanılır. Temadan farklı bir arka plan rengi ayarlarsanız ayrıca uygun içerik rengine sahip olursunuz. Hiyerarşide belirli bir konumdaki mevcut arka plan için tercih edilen içerik rengini almak üzere LocalContentColor öğesini kullanın.