מערכות עיצוב בהתאמה אישית בכתיבה

מערכת העיצוב של Material היא המומלצת שלנו, ו-Jetpack Compose כולל הטמעה של Material, אבל אתם לא חייבים להשתמש בה. מערכת Material מבוססת כולה על ממשקי API ציבוריים, כך שאפשר ליצור מערכת עיצוב משלכם באותו אופן.

יש כמה גישות אפשריות:

• הרחבת MaterialTheme בעזרת ערכים נוספים של עיצוב
• החלפת מערכת אחת או יותר של Material – Colors,‏ Typography או Shapes – בהטמעות בהתאמה אישית, תוך שמירה על המערכות האחרות
• הטמעה של מערכת עיצוב מותאמת אישית כדי להחליף את MaterialTheme

אפשר גם להמשיך להשתמש ברכיבי Material עם מערכת עיצוב מותאמת אישית. אפשר לעשות זאת, אבל יש כמה דברים שכדאי לזכור בהתאם לגישה שבחרתם.

מידע נוסף על המבנים ברמה נמוכה יותר ועל ממשקי ה-API שבהם MaterialTheme ומערכות עיצוב בהתאמה אישית משתמשים זמין במדריך Anatomy of a theme in Compose.

הרחבת העיצוב של Material

Compose Material מבוסס על עיצוב לפי נושאים ב-Material, כדי שיהיה קל ופועל ללא שגיאות טיפוסיות לפעול בהתאם להנחיות של Material. עם זאת, אפשר להרחיב את ערכות הצבעים, הגופנים והצורות בעזרת ערכים נוספים.

הגישה הפשוטה ביותר היא להוסיף נכסי תוספים:

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

כך אפשר לשמור על עקביות עם ממשקי ה-API לדיווח על שימוש ב-MaterialTheme. דוגמה לכך היא surfaceColorAtElevation, שמוגדר על ידי Compose עצמו ומחליט איזה צבע להשתמש בו לפי הגובה.

הערה: מומלץ להשתמש בגישה הזו רק להוספת ערכים פשוטים של עיצוב, או לערכים זהים בעיצובים שונים. אם יש לכם כמה עיצובים, עדיף להגדיר במקום זאת סוג עם מאפיינים חדשים.

גישה אחרת היא להגדיר נושא מורחב שמקיף את MaterialTheme ואת הערכים שלו.

נניח שאתם רוצים להוסיף עוד שני צבעים – caution ו-onCaution, צבע צהוב שמשמש לפעולות מסוכנות למחצה – תוך שמירה על צבעי 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

זה דומה לממשקי API לדיווח על שימוש ב-MaterialTheme. הוא תומך גם בכמה עיצובים, כי אפשר להטמיע רכיבי ExtendedTheme באותו אופן שבו מטמיעים רכיבי MaterialTheme.

שימוש ברכיבי Material

כשמרחיבים את ערכת הנושא של Material, ערכי MaterialTheme הקיימים נשמרים ורכיבי Material עדיין כוללים ערכי ברירת מחדל סבירים.

אם רוצים להשתמש בערכים מורחבים ברכיבים, צריך לעטוף אותם בפונקציות מורכבות משלכם, להגדיר ישירות את הערכים שרוצים לשנות ולהציג ערכים אחרים כפרמטרים לרכיב המורכב שמכיל אותם:

@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

לאחר מכן, צריך להחליף את השימוש ב-Button ב-ExtendedButton במקרים הרלוונטיים.

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

החלפת תת-מערכות של חומרים

במקום להרחיב את Material Theming, יכול להיות שתרצו להחליף מערכת אחת או יותר – Colors,‏ Typography או Shapes – בהטמעה בהתאמה אישית, תוך שמירה על המערכות האחרות.

נניח שאתם רוצים להחליף את מערכות הסוג והצורה תוך שמירה על מערכת הצבעים:

@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

אם החלפתם מערכת אחת או יותר של MaterialTheme, שימוש ברכיבי Material כפי שהם עשוי לגרום לערכים לא רצויים של הצבע, הסוג או הצורה של Material.

אם רוצים להשתמש בערכים חלופיים ברכיבים, צריך לעטוף אותם בפונקציות מורכבות משלכם, להגדיר את הערכים ישירות למערכת הרלוונטית ולהציג ערכים אחרים כפרמטרים לרכיב המורכב שמכיל אותם.

הערה: לא כל הערכים יכולים להיות חשופים כפרמטרים ברכיבים הניתנים לשילוב ב-Material, במיוחד ברכיבים הניתנים לשילוב מסוג CompositionLocal (כמו LocalTextStyle). במקרים כאלה, יכול להיות שתצטרכו לעטוף פונקציות lambda מסוג content בפונקציות של ספקים (כמו 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

לאחר מכן, צריך להחליף את השימוש ב-Button ב-ReplacementButton במקרים הרלוונטיים.

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

הטמעת מערכת עיצוב מותאמת אישית לחלוטין

כדאי להחליף את מערכת העיצוב של Material במערכת עיצוב מותאמת אישית לחלוטין. נניח ש-MaterialTheme מספק את המערכות הבאות:

• Colors,‏ Typography ו-Shapes: מערכות של התאמת עיצוב של Google Material Design
• TextSelectionColors: הצבעים שבהם נעשה שימוש לבחירת טקסט על ידי Text ו-TextField
• Ripple ו-RippleTheme: הטמעת חומר של Indication

אם אתם רוצים להמשיך להשתמש ברכיבי Material, תצטרכו להחליף חלק מהמערכות האלה בעיצוב או בעיצובים המותאמים אישית שלכם, או לטפל במערכות ברכיבים שלכם כדי למנוע התנהגות לא רצויה.

עם זאת, מערכות עיצוב לא מוגבלות לקונספט של Material. אפשר לשנות מערכות קיימות ולהציג מערכות חדשות לגמרי – עם סוגים ודפים חדשים – כדי ליצור תאימות בין קונספטים אחרים לבין נושאים.

בקוד הבא, אנחנו יוצרים מודל של מערכת צבעים מותאמת אישית שכוללת מעברים (List<Color>), כוללים מערכת סוגים, משיקים מערכת חדשה של גובה ומחריגים מערכות אחרות שסופקו על ידי 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

שימוש ברכיבי Material

אם לא מצוין MaterialTheme, שימוש ברכיבי Material כפי שהם יוביל לערכי צבע, סוג וצורה לא רצויים של Material, וכן להתנהגות לא רצויה של אינדיקציה.

אם רוצים להשתמש בערכים מותאמים אישית ברכיבים, צריך לעטוף אותם בפונקציות משלכם שניתנות ליצירה, להגדיר את הערכים ישירות למערכת הרלוונטית ולהציג ערכים אחרים כפרמטרים לרכיב המכיל.

מומלץ לגשת לערכים שהגדרתם מהעיצוב המותאם אישית. לחלופין, אם העיצוב לא מספק את Color,‏ TextStyle,‏ Shape או מערכות אחרות, אפשר להגדיר אותן באופן קבוע.

@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

הערה: Button משתמש ב-rememberRipple() באופן פנימי כדי לספק Indication של Ripple. מומלץ לבדוק את קוד המקור כשמטמיעים רכיבים מותאמים אישית אחרים שמקפים רכיבים קיימים.

אם הוספתם סוגי כיתות חדשים – כמו List<Color> שמייצגת מעברים צבעים – עדיף להטמיע רכיבים מהתחלה במקום לעטוף אותם. לדוגמה, אפשר לעיין ב-JetsnackButton מהדוגמה של Jetsnack.