Materyal Tasarım 2

Jetpack Compose, web sitesi tasarımı için kapsamlı bir tasarım sistemi olan Materyal Tasarım'ın dijital arayüzler oluşturmaktır. 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. Bunları özelleştirdiğinizde özelliklerini kullandığınızda, değişiklikleriniz kullandığınız bileşenlere otomatik olarak yansıtılır. en iyi uygulamaları görelim.

Jetpack Compose bu kavramları MaterialTheme ile uygular composable:

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

Uygulamanıza tema eklemek için MaterialTheme hizmetine ilettiğiniz parametreleri yapılandırın.

Kontrast oluşturan iki ekran görüntüsü. İlki, varsayılan MaterialTheme stilini kullanır. ikinci ekran görüntüsünde değiştirilmiş stil kullanılıyor.

Ş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 parametreleri MaterialTheme öğesine ileten bir uygulamadır.

Renk

Renkler, Compose'da Color sınıfıyla modellenir. veri bekletme sınıfı.

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

Bunları istediğiniz gibi düzenleyebilirsiniz (üst düzey sabit değerler olarak, tekli veya satır içi olarak tanımlanan şekilde), renkleri kesinlikle ve renkleri oradan alabilirsiniz. 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, Colors özelliğini sağlar sınıfını Malzeme renk sistemi. Colors, ışık setleri oluşturmak için oluşturucu işlevleri veya koyu renkler:

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 öğenizi tanımladıktan sonra bir MaterialTheme öğesine aktarabilirsiniz:

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 composable'lar 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 ayarlamak, farklı metin ve simge renkleri oluşturur.

contentColorFor() yöntemi, uygun "on" ayarını alır farklı bir renk seçin. Örneğin, primary arka plan rengi ayarlarsanız Surface üzerinde bu işlevi kullanarak onPrimary'ı içerik olarak rengi. Temadan farklı bir arka plan rengi ayarlarsanız ayrıca uygun içerik rengine sahip olursunuz. LocalContentColor kullanın için tercih edilen içerik rengini almak için belirli bir konumda gösterilir.

İçerik alfa

Önem derecesini iletmek için içeriği ne kadar vurguladığınızı genellikle değiştirmek istersiniz ve görsel bir hiyerarşi sağlamanızı sağlar. Materyal Tasarım'daki metin okunabilirliği öneriler için farklı önem düzeylerini aktarmak için farklı opaklık seviyeleri kullanma.

Jetpack Compose, bunu LocalContentAlpha aracılığıyla uygular. Bir değer sağlayarak hiyerarşi için bir içerik alfa belirtebilirsiniz. bu CompositionLocal için İç içe yerleştirilmiş composable'lar, içeriklerine alfa işlemini uygulamak için bu değeri kullanabilir. Örneğin, Text ve Icon varsayılan olarak LocalContentAlpha kullanılacak şekilde ayarlanmış LocalContentColor kombinasyonunu kullanın. Materyal, bazı standart alfa değerlerini (high, medium, disabled) ile ContentAlpha nesnesi tarafından modellenir.

// By default, both Icon & Text use the combination of LocalContentColor &
// LocalContentAlpha. De-emphasize content by setting content alpha
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.medium) {
    Text(
        // ...
    )
}
CompositionLocalProvider(LocalContentAlpha provides ContentAlpha.disabled) {
    Icon(
        // ...
    )
    Text(
        // ...
    )
}
Material2Snippets.kt

CompositionLocal hakkında daha fazla bilgi için CompositionLocal rehberi.

Farklı düzeylerde metin gösteren makale başlığının ekran görüntüsü vurgu

4.Şekil Görsel olarak iletişim kurmak için metne farklı düzeylerde vurgu eklemek hiyerarşik olarak düzenlenmiştir. Metnin ilk satırı başlıktır ve en önemli bilgilere yer verir ve bu nedenle ContentAlpha.high değerini kullanır. İkinci satırı, daha az önemli meta veriler içerdiği için ContentAlpha.medium kullanır.

Koyu tema

Compose'da farklı gruplar sağlayarak açık ve koyu tema MaterialTheme composable'a Colors:

@Composable
fun MyTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit
) {
    MaterialTheme(
        colors = if (darkTheme) DarkColors else LightColors,
        /*...*/
        content = content
    )
}
Material2Snippets.kt

Bu örnekte, MaterialTheme kendi composable işlevine sarmalanmış. koyu tema kullanılıp kullanılmayacağını belirten bir parametreyi kabul eder. İçinde Bu örnekte, işlevdarkTheme cihaz teması ayarına dikkat edin.

Mevcut Colors ışığının açık mı yoksa koyu mu olduğunu kontrol etmek için şuna benzer bir kod kullanabilirsiniz:

val isLightTheme = MaterialTheme.colors.isLight
Icon(
    painterResource(
        id = if (isLightTheme) {
            R.drawable.ic_sun_24
        } else {
            R.drawable.ic_moon_24
        }
    ),
    contentDescription = "Theme"
)
Material2Snippets.kt

Yükseltme yer paylaşımları

Malzeme tasarımında, yüksekliği daha yüksek olan koyu temadaki yüzeyler yüksekliği yer paylaşımları arka planlarını aydınlatır. Bir yüzeyin rakımı ne kadar yüksek olursa (bunu yakınlaştırarak) benzer bir ışık kaynağı alırsa yüzey daha hafif hale gelir.

Bu yer paylaşımları, şu özellik kullanılırken Surface composable tarafından otomatik olarak uygulanır: koyu renkler ve yüzey kullanılan diğer tüm Malzeme composable'lar için:

Surface(
    elevation = 2.dp,
    color = MaterialTheme.colors.surface, // color will be adjusted for elevation
    /*...*/
) { /*...*/ }
Material2Snippets.kt

Öğelerde kullanılan incelikli farklı renklerin gösterildiği bir uygulama ekran görüntüsü farklı yükseklik seviyelerinde

5. Şekil. Hem kartlarda hem de alttaki gezinme bölmesinde surface rengi kullanılıyor sahipler. Kartlar ve alt gezinme seçenekleri farklı olduğundan yüksekliğe sahip olsalar da, bu boyutlarda küçük farklılıklar (kartlar arka plandan daha açık renkli ve alt gezinme paneli, daha hafif.

Surface içermeyen özel senaryolar için LocalElevationOverlay, Şunu içeren bir CompositionLocal: ElevationOverlay kullanan Surface bileşenler:

// Elevation overlays
// Implemented in Surface (and any components that use it)
val color = MaterialTheme.colors.surface
val elevation = 4.dp
val overlaidColor = LocalElevationOverlay.current?.apply(
    color, elevation
)
Material2Snippets.kt

Yükseklik yer paylaşımlarını devre dışı bırakmak için null öğesini composable hiyerarşi:

MyTheme {
    CompositionLocalProvider(LocalElevationOverlay provides null) {
        // Content without elevation overlays
    }
}
Material2Snippets.kt

Sınırlı renk vurguları

Materyal, sınırlı renk uygulanmasını öneriyor koyu renk için aksan işaretleri kullanarak primary rengi yerine surface renginin kullanılmasını tercih ederek gerekir. TopAppBar ve BottomNavigation gibi composable'lar varsayılan olarak uygulayın.

6. Şekil. Sınırlı renk vurgularına sahip koyu renkli malzeme teması. Üst uygulama çubuğu açık temada birincil rengi ve koyu temada yüzey rengini kullanır.

Özel senaryolar için primarySurface özelliğini kullanın. uzantı mülkü:

Surface(
    // Switches between primary in light theme and surface in dark theme
    color = MaterialTheme.colors.primarySurface,
    /*...*/
) { /*...*/ }
Material2Snippets.kt

Yazı biçimi

Materyal, bir tür sistem, ve anlamsal olarak adlandırılmış az sayıda stil kullanmanızı teşvik edebilir.

Farklı stillerde birkaç farklı yazı karakteri örneği

7.Şekil Malzeme türü sistemi.

Compose, tür sistemini Typography, TextStyle ve yazı tipiyle ilgili sınıflarıyla uygular. Typography oluşturucu, her stil için varsayılan ayarlar sunar. Böylece, özelleştirmek istemediklerinizi çıkarabilirsiniz:

val raleway = FontFamily(
    Font(R.font.raleway_regular),
    Font(R.font.raleway_medium, FontWeight.W500),
    Font(R.font.raleway_semibold, FontWeight.SemiBold)
)

val myTypography = Typography(
    h1 = TextStyle(
        fontFamily = raleway,
        fontWeight = FontWeight.W300,
        fontSize = 96.sp
    ),
    body1 = TextStyle(
        fontFamily = raleway,
        fontWeight = FontWeight.W600,
        fontSize = 16.sp
    )
    /*...*/
)
MaterialTheme(typography = myTypography, /*...*/) {
    /*...*/
}
Material2Snippets.kt

Baştan itibaren aynı yazı karakterini kullanmak istiyorsanız defaultFontFamily parameter ve TextStyle öğelerinin fontFamily değerini çıkarın:

val typography = Typography(defaultFontFamily = raleway)
MaterialTheme(typography = typography, /*...*/) {
    /*...*/
}
Material2Snippets.kt

Metin stillerini kullanma

TextStyle alanına MaterialTheme.typography üzerinden erişiliyor. Al TextStyle şöyle:

Text(
    text = "Subtitle2 styled",
    style = MaterialTheme.typography.subtitle2
)
Material2Snippets.kt

Farklı amaçlar için farklı yazı tiplerini gösteren ekran görüntüsü

8. Şekil. Markanızı ifade etmek için çeşitli yazı tipleri ve stiller kullanın.

Şekil

Materyal, bir şekil sistemi, kullanarak büyük, orta ve küçük bileşenler için şekiller tanımlayabilirsiniz.

Çeşitli Materyal Tasarım şekillerini gösteriyor

9. Şekil. Materyal şekil sistemi.

Compose, şekil sistemini Shapes sınıfını kullanarak bir CornerBasedShape her beden kategorisi için:

val shapes = Shapes(
    small = RoundedCornerShape(percent = 50),
    medium = RoundedCornerShape(0f),
    large = CutCornerShape(
        topStart = 16.dp,
        topEnd = 0.dp,
        bottomEnd = 0.dp,
        bottomStart = 16.dp
    )
)

MaterialTheme(shapes = shapes, /*...*/) {
    /*...*/
}
Material2Snippets.kt

Birçok bileşen varsayılan olarak bu şekilleri kullanır. Örneğin, Button TextField ve FloatingActionButton varsayılan olarak küçük, AlertDialog varsayılan olarak orta değerine ayarlanır ve ModalDrawer daha büyük olabilir; daha fazla bilgi için şekil şeması referansı .

Şekilleri kullanma

Shape alanına MaterialTheme.shapes üzerinden erişiliyor. şununla Shape'ları al: kod şöyle olur:

Surface(
    shape = MaterialTheme.shapes.medium, /*...*/
) {
    /*...*/
}
Material2Snippets.kt

Bir öğenin hangi durumda olduğunu belirtmek için Materyal şekilleri kullanan bir uygulamanın ekran görüntüsü

Şekil 10. Markayı veya durumu ifade etmek için şekilleri kullanın.

Varsayılan stiller

Oluşturulma bölümünde eşdeğer bir kavram yok varsayılan stiller olarak ayarlanır. Materyal bileşenlerini sarmalayan kendi "aşırı yükleme" composable işlevlerinizi oluşturarak da benzer işlevleri sağlayabilirsiniz. Örneğin, bir düğme stili oluşturmak için bir düğmeyi kendi composable işlevinize sarmalayın, değiştirmek istediğiniz parametreleri doğrudan ayarlayın ve diğerlerini, kapsayıcı composable'a parametre olarak gösterin.

@Composable
fun MyButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        colors = ButtonDefaults.buttonColors(
            backgroundColor = MaterialTheme.colors.secondary
        ),
        onClick = onClick,
        modifier = modifier,
        content = content
    )
}
Material2Snippets.kt

Tema yer paylaşımları

2007'den bu yana İç içe yerleştirerek Compose'da Android Görünümleri'ndeki tema yer paylaşımları MaterialTheme composable. Çünkü MaterialTheme renkleri, yazı tipini ve şekilleri varsayılan olarak mevcut tema değerine ayarlar. Bir tema bu parametrelerden yalnızca birini ayarlıyorsa diğer parametreler varsayılan değerlerini korur.

Ayrıca, görüntülemeye dayalı ekranları Compose'a taşırken android:theme özelliğinin kullanımlarına dikkat edin. Muhtemelen yeni bir Oluşturma kullanıcı arayüzü ağacının ilgili bölümünde MaterialTheme.

Bu örnekte, ayrıntılar ekranında ekranın büyük bir kısmı için PinkTheme, ardından ilgili bölüm için BlueTheme kullanılmıştır. Aşağıdaki ekran görüntüsünü ve kodu inceleyin.

Şekil 11. İç içe yerleştirilmiş temalar.

@Composable
fun DetailsScreen(/* ... */) {
    PinkTheme {
        // other content
        RelatedSection()
    }
}

@Composable
fun RelatedSection(/* ... */) {
    BlueTheme {
        // content
    }
}
Material2Snippets.kt

Bileşen durumları

Etkileşimde bulunulabilen malzeme bileşenleri (tıklanmış, açılıp kapatılabilir vb.) farklı görsel durumlarda. Durumlar arasında etkin, devre dışı, basıldı vb. yer alır.

Özelleştirilebilir öğeler genellikle bir enabled parametresine sahiptir. Politikanın false olarak ayarlanması, etkileşimi ve renk ile yükseklik gibi özellikleri görsel olarak iletebilmek için değiştirir. değiştirebilirsiniz.

Şekil 12. enabled = true (solda) ve enabled = false öğesini içeren düğme (sağ) tıklayın.

Çoğu durumda renk ve yükseklik gibi değerler için varsayılan değerleri kullanabilirsiniz. Farklı eyaletlerde kullanılan değerleri yapılandırmak istiyorsanız fonksiyonları da var. Aşağıdaki düğme örneğini inceleyin:

Button(
    onClick = { /* ... */ },
    enabled = true,
    // Custom colors for different states
    colors = ButtonDefaults.buttonColors(
        backgroundColor = MaterialTheme.colors.secondary,
        disabledBackgroundColor = MaterialTheme.colors.onBackground
            .copy(alpha = 0.2f)
            .compositeOver(MaterialTheme.colors.background)
        // Also contentColor and disabledContentColor
    ),
    // Custom elevation for different states
    elevation = ButtonDefaults.elevation(
        defaultElevation = 8.dp,
        disabledElevation = 2.dp,
        // Also pressedElevation
    )
) { /* ... */ }
Material2Snippets.kt

Şekil 13. enabled = true (solda) ve enabled = false öğesini içeren düğme (sağda), ayarlanmış renk ve yükseklik değerleriyle gösterilir.

Dalgalar

Malzeme bileşenleri, etkileşim kurduklarını belirtmek için dalgalar kullanır. Eğer hiyerarşinizde MaterialTheme kullanıyorsanız bir Ripple, varsayılanIndication gibi değiştiricilerin içinde clickable ve indication.

Çoğu durumda, varsayılan Ripple metriğinden yararlanabilirsiniz. Proje planınızda nasıl yapıldığını görmek için RippleTheme renk ve alfa gibi özellikleri değiştirin.

RippleTheme süresini uzatabilir ve defaultRippleColor ve defaultRippleAlpha yardımcı program işlevlerine dahildir. Ardından özel dalga temanızı kullanarak hiyerarşinizde LocalRippleTheme:

@Composable
fun MyApp() {
    MaterialTheme {
        CompositionLocalProvider(
            LocalRippleTheme provides SecondaryRippleTheme
        ) {
            // App content
        }
    }
}

@Immutable
private object SecondaryRippleTheme : RippleTheme {
    @Composable
    override fun defaultColor() = RippleTheme.defaultRippleColor(
        contentColor = MaterialTheme.colors.secondary,
        lightTheme = MaterialTheme.colors.isLight
    )

    @Composable
    override fun rippleAlpha() = RippleTheme.defaultRippleAlpha(
        contentColor = MaterialTheme.colors.secondary,
        lightTheme = MaterialTheme.colors.isLight
    )
}
Material2Snippets.kt

alternatif_metin

Şekil 14. RippleTheme aracılığıyla sağlanan farklı dalga değerlerine sahip düğmeler.

Daha fazla bilgi

Compose'da Materyal Tema oluşturma hakkında daha fazla bilgi edinmek için aşağıdakilere bakın ek kaynaklar.

Codelab'ler

Videolar

ziyaret edin. ziyaret edin.