ระบบการออกแบบที่กำหนดเองใน Compose

แม้ว่า Material จะเป็นระบบการออกแบบที่เราแนะนำและ Jetpack Compose จะมาพร้อมกับการใช้งาน Material แต่คุณก็ไม่จำเป็นต้องใช้ Material สร้างขึ้นจาก API สาธารณะทั้งหมด คุณจึงสร้างระบบการออกแบบของคุณเองในลักษณะเดียวกันได้

คุณอาจใช้แนวทางต่างๆ ต่อไปนี้

• การขยาย MaterialTheme ด้วยค่าการจัดธีมเพิ่มเติม
• การแทนที่ระบบ Material อย่างน้อย 1 ระบบ เช่น Colors, Typography หรือ Shapes ด้วยการติดตั้งใช้งานที่กำหนดเอง ขณะเดียวกันก็คงระบบอื่นๆ ไว้
• การใช้ระบบการออกแบบที่กำหนดเองทั้งหมดเพื่อแทนที่ MaterialTheme

นอกจากนี้ คุณอาจต้องการใช้คอมโพเนนต์ Material กับระบบการออกแบบที่กำหนดเองต่อไป คุณทําได้ แต่มีข้อควรทราบบางอย่างเพื่อให้เหมาะกับแนวทางที่คุณใช้

ดูข้อมูลเพิ่มเติมเกี่ยวกับคอนสตรัคต์และ API ระดับล่างที่ MaterialTheme และระบบการออกแบบที่กำหนดเองใช้ได้จากคู่มือโครงสร้างของธีมใน 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 ตัวอย่างของค่านี้ที่ Compose กำหนดเองคือ surfaceColorAtElevation ซึ่งกำหนดสีพื้นผิวที่ควรใช้โดยขึ้นอยู่กับระดับความสูง

อีกวิธีหนึ่งคือกําหนดธีมแบบขยายที่ "รวม" MaterialTheme และค่าของ MaterialTheme

สมมติว่าคุณต้องการเพิ่มอีก 2 สี ได้แก่ 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

ซึ่งคล้ายกับ MaterialTheme Usage API นอกจากนี้ ยังรองรับธีมหลายแบบเนื่องจากคุณฝัง 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

แทนที่ระบบย่อยของวัสดุ

คุณอาจต้องการแทนที่ระบบ Colors, Typography หรือ Shapes อย่างน้อย 1 ระบบด้วยการติดตั้งใช้งานที่กำหนดเอง แทนที่จะขยายธีม Material

สมมติว่าคุณต้องการแทนที่ระบบประเภทและรูปร่างโดยเก็บระบบสีไว้ ให้ทำดังนี้

@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 อย่างน้อย 1 ระบบแล้ว การใช้คอมโพเนนต์ของวัสดุตามที่เป็นอยู่อาจส่งผลให้ค่าสี ประเภท หรือรูปร่างของวัสดุไม่เป็นไปตามที่ต้องการ

หากต้องการใช้ค่าที่แทนที่ในคอมโพเนนต์ ให้รวมค่าเหล่านั้นไว้ในฟังก์ชันคอมโพสิเบิลของคุณเอง โดยตั้งค่าให้กับระบบที่เกี่ยวข้องโดยตรง และแสดงค่าอื่นๆ เป็นพารามิเตอร์ให้กับคอมโพสิเบิลที่รวมอยู่

@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: ระบบการกำหนดธีม Material
• 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 การใช้คอมโพเนนต์วัสดุตามที่เป็นอยู่จะส่งผลให้ค่าสี ประเภท และรูปร่างของวัสดุ รวมถึงลักษณะการบ่งชี้ที่ไม่ต้องการ

หากต้องการใช้ค่าที่กำหนดเองในคอมโพเนนต์ ให้รวมค่าเหล่านั้นไว้ในฟังก์ชันคอมโพสิเบิลของคุณเอง โดยกำหนดค่าให้กับระบบที่เกี่ยวข้องโดยตรง และแสดงค่าอื่นๆ เป็นพารามิเตอร์ให้กับคอมโพสิเบิลที่รวมอยู่

เราขอแนะนําให้คุณเข้าถึงค่าที่ตั้งไว้จากธีมที่กำหนดเอง หรือหากธีมไม่มี 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

หากคุณได้เปิดตัวคลาสประเภทใหม่ เช่น List<Color> เพื่อแสดงการไล่ระดับสี ก็อาจดีกว่าที่จะใช้คอมโพเนนต์ตั้งแต่ต้นแทนการรวม ตัวอย่างเช่น ให้ดูที่ JetsnackButton จากตัวอย่าง Jetsnack

แนะนำสำหรับคุณ

• หมายเหตุ: ข้อความลิงก์จะแสดงเมื่อ JavaScript ปิดอยู่
• Material Design 3 ในเครื่องมือเขียน
• ย้ายข้อมูลจากวัสดุ 2 ไปยังวัสดุ 3 ในเครื่องมือเขียน
• องค์ประกอบของธีมในเครื่องมือเขียน