Systemy niestandardowego projektowania elementów w Compose

Chociaż Material jest naszym zalecanym systemem projektowania, a Jetpack Compose zawiera implementację Material, nie musisz z niego korzystać. Materiał jest w pełni oparty na publicznych interfejsach API, więc w taki sam sposób możesz tworzyć własny system projektowania.

Możesz zastosować kilka metod:

• Rozszerzanie MaterialTheme o dodatkowe wartości motywu
• Zastąpienie co najmniej jednego systemu Material Design (Colors, Typography lub Shapes) implementacją niestandardową przy zachowaniu pozostałych.
• Wdrażanie w pełni niestandardowego systemu projektowania w zamian za MaterialTheme

Możesz też nadal używać komponentów Material w systemie projektowania niestandardowego. Jest to możliwe, ale należy pamiętać o kilku kwestiach, aby dostosować je do wybranej przez Ciebie metody.

Aby dowiedzieć się więcej o strukturach i interfejsach API niskiego poziomu używanych przez MaterialTheme oraz systemy projektowania niestandardowego, zapoznaj się z poradnikiem Anatomia motywu w Compose.

Motyw rozszerzający

Komponuj interfejsy Material Design, korzystając z schematów kolorystycznych Material Design, aby uprościć projekt i zapewnić bezpieczeństwo typów, zgodnie z wytycznymi Material Design. Można jednak rozszerzyć zestawy kolorów, typografii i kształtów za pomocą dodatkowych wartości.

Najprostszym sposobem jest dodanie właściwości rozszerzenia:

// 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

Zapewnia to spójność z interfejsami API do korzystania z MaterialTheme. Przykładem atrybutu zdefiniowanego przez Compose jest surfaceColorAtElevation, który określa kolor powierzchni, który powinien być używany w zależności od wysokości.

Uwaga: to podejście jest zalecane tylko w przypadku prostego dodawania wartości motywów lub wartości, które są takie same w różnych tematach. Jeśli masz kilka motywów, lepiej zdefiniować klasę za pomocą nowych właściwości.

Innym podejściem jest zdefiniowanie rozszerzonego motywu, który „obejmuje” MaterialTheme i jego wartości.

Załóżmy, że chcesz dodać 2 dodatkowe kolory: caution i onCaution, żółty kolor używany do działań półniebezpiecznych, zachowując jednocześnie istniejące kolory Material:

@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

Jest to podobne do interfejsów API do obsługi MaterialTheme. Obsługuje też wiele motywów, ponieważ możesz zagnieżdżać ExtendedTheme w taki sam sposób jak MaterialTheme.

Korzystanie z komponentów Material Design

Gdy poszerzysz zestaw komponentów, dotychczasowe wartości MaterialTheme zostają zachowane, a komponenty Material Design nadal mają rozsądne wartości domyślne.

Jeśli chcesz używać rozszerzonych wartości w komponentach, owiń je we własne funkcje kompozytowe, ustawiając bezpośrednio wartości, które chcesz zmienić, i wyświetlając inne jako parametry dla komponentu zawierającego:

@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

Następnie w odpowiednich miejscach zastąpisz Button wartością ExtendedButton.

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

Zastąp podsystemy Material

Zamiast rozszerzać Motyw Material, możesz zastąpić co najmniej 1 system (Colors, Typography lub Shapes) implementacją niestandardową, zachowując pozostałe.

Załóżmy, że chcesz zastąpić systemy typów i kształtów przy zachowaniu systemu kolorów:

@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

Korzystanie z komponentów Material Design

Po zastąpieniu co najmniej jednego systemu MaterialTheme używanie komponentów w niezmienionej postaci może spowodować niepożądane wartości koloru, typu lub kształtu materiału.

Jeśli chcesz używać wartości zastępczych w komponentach, owiń je w własne funkcje kompozytowe, ustawiając bezpośrednio wartości dla odpowiedniego systemu, i wyświetlaj inne jako parametry dla zawierającego je komponentu kompozytowego.

Uwaga: nie wszystkie wartości mogą być udostępniane jako parametry w komponentach Material, w szczególności w komponentach CompositionLocal (takich jak LocalTextStyle). W takich przypadkach może być konieczne owinięcie funkcji lambda content w funkcje dostawcy (takie jak ProvideTextStyle).

@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

Następnie w odpowiednich miejscach zastąpisz wartość Button wartością ReplacementButton.

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

Wdrożenie w pełni niestandardowego systemu projektowania

Możesz zastąpić motyw Material Theming w ramach w pełni niestandardowego systemu projektowania. Załóżmy, że MaterialTheme udostępnia te systemy:

• Colors, Typography i Shapes: systemy motywu Material Design
• TextSelectionColors: kolory używane do zaznaczania tekstu za pomocą elementów Text i TextField
• Ripple i RippleTheme: implementacja materiału Indication

Jeśli chcesz nadal używać komponentów Material, musisz zastąpić niektóre z tych systemów w temacie niestandardowym lub zarządzać nimi w komponentach, aby uniknąć niepożądanych zachowań.

Jednak systemy projektowania nie ograniczają się do koncepcji, na których opiera się Material. Możesz modyfikować istniejące systemy oraz wprowadzać zupełnie nowe – z nowymi klasami i typami – aby inne zagadnienia były zgodne z motywami.

W tym kodzie modelujemy niestandardowy system kolorów, który obejmuje gradienty (List<Color>), zawiera system typów, wprowadza nowy system wysokości i wyklucza inne systemy udostępniane przez MaterialTheme:

@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

Korzystanie z komponentów Material Design

Jeśli nie ma elementu MaterialTheme, używanie komponentów Material w postaci domyślnej spowoduje niezamierzone wartości i zachowanie wskazania koloru, typu i kształtu Material.

Jeśli chcesz używać w komponentach wartości niestandardowych, owiń je w własne funkcje kompozytowe, ustawiając bezpośrednio wartości dla odpowiedniego systemu, a inne udostępniając jako parametry dla komponentu nadrzędnego.

Zalecamy, abyś korzystał z wartości ustawionych w motywie niestandardowym. Jeśli w Twoim motywie nie ma informacji o usługach Color, TextStyle, Shape ani innych systemach, możesz je zakodować na stałe.

@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

Uwaga: Button używa wewnętrznie funkcji rememberRipple(), aby zapewnić Ripple Indication. Podczas implementowania innych komponentów niestandardowych, które obejmują istniejące komponenty, warto sprawdzić kod źródłowy.

Jeśli zostały wprowadzone nowe typy klas – na przykład List<Color> do reprezentowania gradientów – lepiej zaimplementować komponenty od zera zamiast je pakować. Na przykład zobacz JetsnackButton z próbki Jetsnack.