Bu sayfa, Cloud Translation API ile çevrilmiştir.

Compose'da özel tasarım sistemleri

Önerdiğimiz tasarım sistemimiz Material, jetpack Compose'u da Malzeme kullanmaya devam etmek zorunda kalmazsınız. Malzeme üretildi Bu yüzden, kendi tasarım sisteminizi yalnızca herkese açık API'lerde aynı şekilde yürütülür.

Bu konuda uygulayabileceğiniz birkaç yaklaşım vardır:

Ek tema değerleriyle MaterialTheme'ı genişletme
Bir veya daha fazla Material sistemini değiştirme — Colors, Typography veya Shapes - özel uygulamalarla, diğerleri
MaterialTheme'yi değiştirmek için tamamen özel bir tasarım sistemi uygulama

Ayrıca, Materyal bileşenlerini özel bir tasarımla kullanmaya devam etmek de isteyebilirsiniz. bahsedeceğim. Bunu yapmak mümkündür ancak bu yaklaşıma uymak için aklınızda bulundurmanız ne kadar iyi karşıladığını göreceksiniz.

MaterialTheme ve özel tasarım sistemleri tarafından kullanılan alt düzey yapıları ve API'leri hakkında daha fazla bilgi edinmek için Oluşturma'daki bir temanın anatomisi kılavuzuna göz atın.

Uzatılan Malzeme Teması

Compose Material, Material yönergelerine uymayı basit ve tür açısından güvenli hale getirmek için Material tema oluşturma özelliğini yakından modeller. Ancak renk, yazı tipi ve şekil gruplarını ek değerlerle genişletebilirsiniz.

En basit yaklaşım, uzantı mülkleri eklemektir:

// Use with MaterialTheme.colorScheme.snackbarAction
val ColorScheme.snackbarAction: Color
    @Composable
    get() = if (isSystemInDarkTheme()) Red300 else Red700

// Use with MaterialTheme.typography.textFieldInput
val Typography.textFieldInput: TextStyle
    get() = TextStyle(/* ... */)

// Use with MaterialTheme.shapes.card
val Shapes.card: Shape
    get() = RoundedCornerShape(size = 20.dp)CustomDesignSystem.kt

Bu, MaterialTheme kullanım API'leriyle tutarlılık sağlar. Bu duruma bir örnek Compose'un kendisi tarafından tanımlanan surfaceColorAtElevation, bu değer, yüksekliğe bağlı olarak kullanılması gereken yüzey rengini belirler.

Diğer bir yaklaşım da “sarmalayan” ve söyleyen uzun bir tema MaterialTheme ve değer.

Mevcut malzeme renklerini korurken iki ek renk (caution ve onCaution, yarı tehlikeli işlemler için kullanılan sarı bir renk) eklemek istediğinizi varsayalım:

@Immutable
data class ExtendedColors(
    val caution: Color,
    val onCaution: Color
)

val LocalExtendedColors = staticCompositionLocalOf {
    ExtendedColors(
        caution = Color.Unspecified,
        onCaution = Color.Unspecified
    )
}

@Composable
fun ExtendedTheme(
    /* ... */
    content: @Composable () -> Unit
) {
    val extendedColors = ExtendedColors(
        caution = Color(0xFFFFCC02),
        onCaution = Color(0xFF2C2D30)
    )
    CompositionLocalProvider(LocalExtendedColors provides extendedColors) {
        MaterialTheme(
            /* colors = ..., typography = ..., shapes = ... */
            content = content
        )
    }
}

// Use with eg. ExtendedTheme.colors.caution
object ExtendedTheme {
    val colors: ExtendedColors
        @Composable
        get() = LocalExtendedColors.current
}CustomDesignSystem.kt

Bu, MaterialTheme kullanım API'lerine benzer. Ayrıca birden fazla temayı destekler. ExtendedTheme öğelerini MaterialTheme ile aynı şekilde iç içe yerleştirebilirsiniz.

Materyal bileşenlerini kullanma

Materyal temalandırma genişletilirken mevcut MaterialTheme değerleri korunur ve Materyal bileşenleri makul varsayılan değerlere sahip olmaya devam eder.

Bileşenlerde genişletilmiş değerleri kullanmak istiyorsanız bunları kendi bileşenlerinize sarmalayın. composable işlevleri, değiştirmek istediğiniz değerleri doğrudan ayarlama ve Örneğin, diğerlerini kapsayıcı composable'a parametre olarak sunma:

@Composable
fun ExtendedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        colors = ButtonDefaults.buttonColors(
            containerColor = ExtendedTheme.colors.caution,
            contentColor = ExtendedTheme.colors.onCaution
            /* Other colors use values from MaterialTheme */
        ),
        onClick = onClick,
        modifier = modifier,
        content = content
    )
}CustomDesignSystem.kt

Ardından, uygun durumlarda Button kullanımlarını ExtendedButton ile değiştirirsiniz.

@Composable
fun ExtendedApp() {
    ExtendedTheme {
        /*...*/
        ExtendedButton(onClick = { /* ... */ }) {
            /* ... */
        }
    }
}CustomDesignSystem.kt

Materyal alt sistemlerini değiştirme

Materyal Temayı uzatmak yerine, örneğin bir veya daha fazla sistemleri (Colors, Typography veya Shapes) özel bir uygulamayla, diğerlerini korur.

Renk sistemini korurken tür ve şekil sistemlerini değiştirmek istediğinizi varsayalım:

@Immutable
data class ReplacementTypography(
    val body: TextStyle,
    val title: TextStyle
)

@Immutable
data class ReplacementShapes(
    val component: Shape,
    val surface: Shape
)

val LocalReplacementTypography = staticCompositionLocalOf {
    ReplacementTypography(
        body = TextStyle.Default,
        title = TextStyle.Default
    )
}
val LocalReplacementShapes = staticCompositionLocalOf {
    ReplacementShapes(
        component = RoundedCornerShape(ZeroCornerSize),
        surface = RoundedCornerShape(ZeroCornerSize)
    )
}

@Composable
fun ReplacementTheme(
    /* ... */
    content: @Composable () -> Unit
) {
    val replacementTypography = ReplacementTypography(
        body = TextStyle(fontSize = 16.sp),
        title = TextStyle(fontSize = 32.sp)
    )
    val replacementShapes = ReplacementShapes(
        component = RoundedCornerShape(percent = 50),
        surface = RoundedCornerShape(size = 40.dp)
    )
    CompositionLocalProvider(
        LocalReplacementTypography provides replacementTypography,
        LocalReplacementShapes provides replacementShapes
    ) {
        MaterialTheme(
            /* colors = ... */
            content = content
        )
    }
}

// Use with eg. ReplacementTheme.typography.body
object ReplacementTheme {
    val typography: ReplacementTypography
        @Composable
        get() = LocalReplacementTypography.current
    val shapes: ReplacementShapes
        @Composable
        get() = LocalReplacementShapes.current
}CustomDesignSystem.kt

Material bileşenlerini kullanma

Bir veya daha fazla MaterialTheme sistemi değiştirildiğinde, malzeme bileşenlerinin olduğu gibi kullanılması istenmeyen malzeme rengi, türü veya şekli değerlerine neden olabilir.

Bileşenlerde ikame değerler kullanmak istiyorsanız bunları kendi bileşenlerinize sarmalayın. composable işlevleri, ilgili sistem için değerleri doğrudan ayarlama ve Bu işlem, başkalarını kapsayıcı composable'a parametre olarak gösterir.

@Composable
fun ReplacementButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        shape = ReplacementTheme.shapes.component,
        onClick = onClick,
        modifier = modifier,
        content = {
            ProvideTextStyle(
                value = ReplacementTheme.typography.body
            ) {
                content()
            }
        }
    )
}CustomDesignSystem.kt

Daha sonra, Button kullanımlarını ReplacementButton ile değiştirirsiniz; burada: uygun olmalıdır.

@Composable
fun ReplacementApp() {
    ReplacementTheme {
        /*...*/
        ReplacementButton(onClick = { /* ... */ }) {
            /* ... */
        }
    }
}CustomDesignSystem.kt

Tamamen özel bir tasarım sistemi uygulama

Materyal Temaları'nı tamamen özel bir tasarım sistemiyle değiştirmek isteyebilirsiniz. MaterialTheme'nin aşağıdaki sistemleri sağladığını varsayalım:

Colors, Typography ve Shapes: Materyal Teması Oluşturma sistemleri
TextSelectionColors: Metin seçimi için Text ve TextField
Ripple ve RippleTheme: Indication için malzeme uygulaması

Materyal bileşenleri kullanmaya devam etmek istiyorsanız bazı bileşenleri özel temalarınızda veya temalarınızda kullanabilir ya da bileşenlerine ayırmanızı sağlar.

Ancak tasarım sistemleri, Material'ın temel aldığı kavramlarla sınırlı değildir. Diğer kavramları temalarla uyumlu hale getirmek için mevcut sistemleri değiştirebilir ve yeni sınıflar ve türlerle tamamen yeni sistemler kullanabilirsiniz.

Aşağıdaki kodda, renk geçişleri içeren özel bir renk sistemini modelliyoruz (List<Color>), bir tür sistemi ekleyin, yeni bir yükselti sistemi tanıtın, ve MaterialTheme tarafından sağlanan diğer sistemleri hariç tutun:

@Immutable
data class CustomColors(
    val content: Color,
    val component: Color,
    val background: List<Color>
)

@Immutable
data class CustomTypography(
    val body: TextStyle,
    val title: TextStyle
)

@Immutable
data class CustomElevation(
    val default: Dp,
    val pressed: Dp
)

val LocalCustomColors = staticCompositionLocalOf {
    CustomColors(
        content = Color.Unspecified,
        component = Color.Unspecified,
        background = emptyList()
    )
}
val LocalCustomTypography = staticCompositionLocalOf {
    CustomTypography(
        body = TextStyle.Default,
        title = TextStyle.Default
    )
}
val LocalCustomElevation = staticCompositionLocalOf {
    CustomElevation(
        default = Dp.Unspecified,
        pressed = Dp.Unspecified
    )
}

@Composable
fun CustomTheme(
    /* ... */
    content: @Composable () -> Unit
) {
    val customColors = CustomColors(
        content = Color(0xFFDD0D3C),
        component = Color(0xFFC20029),
        background = listOf(Color.White, Color(0xFFF8BBD0))
    )
    val customTypography = CustomTypography(
        body = TextStyle(fontSize = 16.sp),
        title = TextStyle(fontSize = 32.sp)
    )
    val customElevation = CustomElevation(
        default = 4.dp,
        pressed = 8.dp
    )
    CompositionLocalProvider(
        LocalCustomColors provides customColors,
        LocalCustomTypography provides customTypography,
        LocalCustomElevation provides customElevation,
        content = content
    )
}

// Use with eg. CustomTheme.elevation.small
object CustomTheme {
    val colors: CustomColors
        @Composable
        get() = LocalCustomColors.current
    val typography: CustomTypography
        @Composable
        get() = LocalCustomTypography.current
    val elevation: CustomElevation
        @Composable
        get() = LocalCustomElevation.current
}CustomDesignSystem.kt

Materyal bileşenlerini kullanma

MaterialTheme olmadığında, materyal bileşenleri olduğu gibi kullanıldığında istenmeyen materyal rengi, türü ve şekli değerleri ile gösterge davranışı ortaya çıkar.

Bileşenlerde özel değerler kullanmak istiyorsanız bunları kendi composable'ınıza sarmalayın. fonksiyonlarını kullanarak, alakalı sisteme yönelik değerleri doğrudan ayarlayarak ve diğerlerini, kapsayıcı composable'a parametre olarak alır.

Özel temanızdan ayarladığınız değerlere erişmenizi öneririz. Alternatif olarak, temanızda Color, TextStyle, Shape veya bu sistemleri sabit olarak kodlayabilirsiniz.

@Composable
fun CustomButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    Button(
        colors = ButtonDefaults.buttonColors(
            containerColor = CustomTheme.colors.component,
            contentColor = CustomTheme.colors.content,
            disabledContainerColor = CustomTheme.colors.content
                .copy(alpha = 0.12f)
                .compositeOver(CustomTheme.colors.component),
            disabledContentColor = CustomTheme.colors.content
                .copy(alpha = 0.38f)

        ),
        shape = ButtonShape,
        elevation = ButtonDefaults.elevatedButtonElevation(
            defaultElevation = CustomTheme.elevation.default,
            pressedElevation = CustomTheme.elevation.pressed
            /* disabledElevation = 0.dp */
        ),
        onClick = onClick,
        modifier = modifier,
        content = {
            ProvideTextStyle(
                value = CustomTheme.typography.body
            ) {
                content()
            }
        }
    )
}

val ButtonShape = RoundedCornerShape(percent = 50)CustomDesignSystem.kt

Temsil edilecek List<Color> gibi yeni sınıf türleri eklediyseniz bu durumda bileşenleri sıfırdan uygulamak daha iyi olabilir en iyi yoludur. Örneğin, Jetsnack örneğindeki JetsnackButton öğesine göz atın.

Şu anda öneri yok.

Google Hesabınızda oturum açmayı deneyin.