Compose में कस्टम डिज़ाइन सिस्टम जोड़ना

हमारा सुझाव है कि आप Material डिज़ाइन सिस्टम का इस्तेमाल करें. Jetpack Compose में Material डिज़ाइन सिस्टम का इस्तेमाल किया जा सकता है. हालांकि, इसका इस्तेमाल करना ज़रूरी नहीं है. मटीरियल को पूरी तरह से सार्वजनिक एपीआई पर बनाया गया है. इसलिए, इसी तरीके से अपना डिज़ाइन सिस्टम बनाया जा सकता है.

इसके लिए, कई तरीके अपनाए जा सकते हैं:

ऐसा भी हो सकता है कि आपको कस्टम डिज़ाइन सिस्टम के साथ, Material कॉम्पोनेंट का इस्तेमाल जारी रखना हो. ऐसा किया जा सकता है, लेकिन आपने जो तरीका अपनाया है उसके हिसाब से कुछ बातों का ध्यान रखना ज़रूरी है.

MaterialTheme और कस्टम डिज़ाइन सिस्टम में इस्तेमाल किए जाने वाले लोअर-लेवल कंस्ट्रक्ट और एपीआई के बारे में ज़्यादा जानने के लिए, Compose में थीम की बनावट गाइड देखें.

मटीरियल थीमिंग को बेहतर बनाना

Compose 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)

इससे MaterialTheme के इस्तेमाल से जुड़े एपीआई के साथ एक जैसा अनुभव मिलता है. Compose में इसका एक उदाहरण surfaceColorAtElevation है. इससे यह तय होता है कि एलिवेशन के हिसाब से, सरफ़ेस का कौनसा रंग इस्तेमाल किया जाना चाहिए.

दूसरा तरीका यह है कि ऐसी एक्सटेंडेड थीम तय की जाए जो 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
}

यह MaterialTheme के इस्तेमाल से जुड़े एपीआई जैसा ही है. यह कई थीम के साथ भी काम करता है, क्योंकि ExtendedTheme को MaterialTheme की तरह ही नेस्ट किया जा सकता है.

मटीरियल कॉम्पोनेंट का इस्तेमाल करना

मटीरियल थीमिंग को एक्सटेंड करने पर, मौजूदा MaterialTheme वैल्यू को बनाए रखा जाता है. साथ ही, मटीरियल कॉम्पोनेंट में अब भी सही डिफ़ॉल्ट वैल्यू होती हैं.

अगर आपको कॉम्पोनेंट में एक्सटेंडेड वैल्यू इस्तेमाल करनी हैं, तो उन्हें अपनी कंपोज़ेबल फ़ंक्शन में रैप करें. इसके बाद, उन वैल्यू को सीधे सेट करें जिन्हें आपको बदलना है. साथ ही, अन्य वैल्यू को पैरामीटर के तौर पर एक्सपोज़ करें, ताकि उन्हें कंपोज़ेबल में शामिल किया जा सके:

@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
    )
}

इसके बाद, जहां ज़रूरी हो वहां Button की जगह ExtendedButton का इस्तेमाल करें.

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

मटीरियल सबसिस्टम को बदलना

Material Theming को बढ़ाने के बजाय, आपके पास एक या उससे ज़्यादा सिस्टम — ColorScheme, 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
}

मटीरियल कॉम्पोनेंट का इस्तेमाल करना

जब MaterialTheme के एक या उससे ज़्यादा सिस्टम बदल दिए जाते हैं, तो Material कॉम्पोनेंट का इस्तेमाल करने पर, Material के रंग, टाइप या आकार की अनचाही वैल्यू मिल सकती हैं.

अगर आपको कॉम्पोनेंट में रिप्लेसमेंट वैल्यू का इस्तेमाल करना है, तो उन्हें अपने कंपोज़ेबल फ़ंक्शन में रैप करें. इसके बाद, सीधे तौर पर सिस्टम के लिए वैल्यू सेट करें और अन्य वैल्यू को पैरामीटर के तौर पर एक्सपोज़ करें.

@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()
            }
        }
    )
}

इसके बाद, जहां ज़रूरी हो वहां Button की जगह ReplacementButton का इस्तेमाल करें.

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

पूरी तरह से कस्टम डिज़ाइन सिस्टम लागू करना

ऐसा हो सकता है कि आपको मटीरियल थीमिंग को पूरी तरह से कस्टम डिज़ाइन सिस्टम से बदलना हो. मान लें कि MaterialTheme ये सिस्टम उपलब्ध कराता है:

  • ColorScheme, Typography, और Shapes: मटीरियल थीमिंग सिस्टम
  • TextSelectionColors: Text और TextField ने टेक्स्ट चुनने के लिए, इन रंगों का इस्तेमाल किया
  • ripple, जिसे LocalIndication के तौर पर उपलब्ध कराया गया है: 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
}

मटीरियल कॉम्पोनेंट का इस्तेमाल करना

अगर कोई 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)

अगर आपने नई क्लास टाइप पेश की हैं, जैसे कि ग्रेडिएंट दिखाने के लिए List<Color>, तो कॉम्पोनेंट को रैप करने के बजाय, उन्हें शुरू से लागू करना बेहतर हो सकता है. उदाहरण के लिए, Jetsnack सैंपल से JetsnackButton देखें.