हालांकि मटीरियल हमारा सुझाया गया डिज़ाइन सिस्टम है और Jetpack Compose हमारा सुझाव है कि मटीरियल लागू करने के बाद, आप उसका इस्तेमाल करने के लिए बाध्य नहीं होते हैं. Material पूरी तरह से सार्वजनिक एपीआई पर आधारित है. इसलिए, इसी तरह से अपना डिज़ाइन सिस्टम बनाया जा सकता है.
इसके लिए, आप कई तरीके अपना सकते हैं:
- थीम से जुड़ी अन्य वैल्यू की मदद से,
MaterialTheme
को बड़ा करना - एक या उससे ज़्यादा Material सिस्टम —
Colors
,Typography
याShapes
— को कस्टम तरीके से लागू करने के साथ बदलना, जबकि बाकी सिस्टम को बनाए रखना MaterialTheme
को बदलने के लिए, पूरी तरह से कस्टम डिज़ाइन सिस्टम लागू करना
आप चाहें, तो पसंद के मुताबिक डिज़ाइन वाले मटीरियल कॉम्पोनेंट इस्तेमाल करना जारी रखें सिस्टम. ऐसा किया जा सकता है, लेकिन आपने जो तरीका अपनाया है उसके हिसाब से कुछ बातों का ध्यान रखना ज़रूरी है.
MaterialTheme
में इस्तेमाल किए जाने वाले निचले लेवल के कंस्ट्रक्शन और एपीआई के बारे में ज़्यादा जानने के लिए
और कस्टम डिज़ाइन सिस्टम इस्तेमाल करना है, तो Compose में किसी थीम की एनाटॉमी गाइड देखें.
मटीरियल थीम को एक्सटेंड करना
मटीरियल को बारीकी से बनाने के लिए मॉडल मटीरियल थीमिंग ताकि मटीरियल से जुड़े दिशा-निर्देशों का पालन करना आसान और टाइप-सेफ़ हो जाए. हालांकि, यह रंग, टाइपोग्राफ़ी, और आकार सेट को बढ़ाने की सुविधा वैल्यू.
एक्सटेंशन प्रॉपर्टी जोड़ना सबसे आसान तरीका है:
// 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
,
ऐसे कामों के लिए पीले रंग का इस्तेमाल किया जाता है जो अर्ध-खतरनाक हैं - साथ ही,
सामग्री के मौजूदा रंग:
@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
के इस्तेमाल से जुड़े एपीआई के जैसा है. इसमें कई थीम भी काम करती हैं, क्योंकि MaterialTheme
की तरह ही ExtendedTheme
को भी नेस्ट किया जा सकता है.
Material Components का इस्तेमाल करना
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 ) }
इसके बाद, ज़रूरत के हिसाब से Button
के इस्तेमाल को ExtendedButton
से बदलें.
@Composable fun ExtendedApp() { ExtendedTheme { /*...*/ ExtendedButton(onClick = { /* ... */ }) { /* ... */ } } }
मटीरियल सब-सिस्टम बदलना
मटीरियल थीमिंग को बढ़ाने के बजाय, हो सकता है कि आप एक या उससे ज़्यादा थीम बदलना चाहें
सिस्टम — 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 }
Material Components का इस्तेमाल करना
जब 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
से ये सिस्टम मिलते हैं:
Colors
,Typography
, औरShapes
: मटीरियल थीमिंग सिस्टम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 }
Material Components का इस्तेमाल करना
कोई 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)
अगर आपने क्लास के नए टाइप लॉन्च किए हैं, जैसे कि List<Color>
को दिखाना
ग्रेडिएंट — तो यह बेहतर हो सकता है कि कॉम्पोनेंट को शुरुआत से लागू करें
एक समस्या को हल किया जा सकता है. उदाहरण के लिए, Jetsnack के सैंपल में JetsnackButton
देखें.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose में Material Design 3
- Compose में मटीरियल 2 से मटीरियल 3 पर माइग्रेट करना
- Compose में थीम की संरचना