Compose'da özel tasarım sistemleri

Materyal, önerilen tasarım sistemimizdir ve Jetpack Compose, Materyal'in bir uygulamasını sunar ancak bu sistemi kullanmak zorunda değilsiniz. Material tamamen herkese açık API'ler üzerine kuruludur. Bu nedenle, kendi tasarım sisteminizi de aynı şekilde oluşturabilirsiniz.

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

Özel bir tasarım sistemiyle Material bileşenlerini kullanmaya devam etmek isteyebilirsiniz. Bunu yapmak mümkündür ancak benimsediğiniz yaklaşıma uygun olarak dikkat etmeniz gereken bazı noktalar vardır.

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.

Materyal temasını genişletme

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. Compose tarafından tanımlanan bu tür bir parametreye örnek olarak, yüksekliğe bağlı olarak kullanılması gereken yüzey rengini belirleyen surfaceColorAtElevation verilebilir.

Diğer bir yaklaşım da MaterialTheme ve değerlerini "sarmalayan" genişletilmiş bir tema tanımlamaktır.

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. ExtendedTheme öğelerini MaterialTheme ile aynı şekilde iç içe yerleştirebileceğiniz için birden fazla temayı da destekler.

Material bileşenlerini kullanma

Materyal temalandırma genişletilirken mevcut MaterialTheme değerleri korunur ve Materyal bileşenleri yine makul varsayılan değerlere sahiptir.

Bileşenlerde genişletilmiş değerler kullanmak istiyorsanız bunları kendi birleştirilebilir işlevlerinize sarmalayın. Değiştirmek istediğiniz değerleri doğrudan ayarlayın ve diğer değerleri içeren birleştirilebilir işleve parametre olarak gösterin:

@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

Malzeme alt sistemlerini değiştirme

Material Teması'nı genişletmek yerine, diğer sistemleri korurken bir veya daha fazla sistemi (Colors, Typography veya Shapes) özel bir uygulamayla değiştirmek isteyebilirsiniz.

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 değiştirme değerleri kullanmak istiyorsanız bunları kendi birleştirilebilir işlevlerinize sarmalayın, ilgili sistem için değerleri doğrudan ayarlayın ve diğerlerini kapsayıcı birleştirilebilir işleve parametre olarak gösterin.

@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

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

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

Tamamen özel bir tasarım sistemi uygulama

Material Theming'i 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: Text ve TextField tarafından metin seçimi için kullanılan renkler
  • Ripple ve RippleTheme: Indication için malzeme uygulaması

Material bileşenlerini kullanmaya devam etmek istiyorsanız istenmeyen davranışları önlemek için özel temanızdaki veya temalarınızdaki bu sistemlerin bazılarını değiştirmeniz ya da bileşenlerinizdeki sistemleri yönetmeniz gerekir.

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, degradeler (List<Color>) içeren özel bir renk sistemi modelliyoruz, bir tür sistemi ekliyoruz, yeni bir yükseklik sistemi tanıtıyoruz ve MaterialTheme tarafından sağlanan diğer sistemleri hariç tutuyoruz:

@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

Material 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 birleştirilebilir işlevlerinize sarmalayın, ilgili sistem için değerleri doğrudan ayarlayın ve diğerlerini içeren birleştirilebilir işleve parametre olarak gösterin.

Özel temanızdan ayarladığınız değerlere erişmenizi öneririz. Alternatif olarak, temanızda Color, TextStyle, Shape veya başka sistemler sağlanmıyorsa bunları kodla sabitleyebilirsiniz.

@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

Eğimlendirmeleri temsil etmek için List<Color> gibi yeni sınıf türleri tanıttıysanız bileşenleri sarmalamak yerine sıfırdan uygulamak daha iyi olabilir. Örneğin, Jetsnack örneğindeki JetsnackButton öğesine göz atın.