स्टाइल की बुनियादी बातें

अपने ऐप्लिकेशन में स्टाइल लागू करने के तीन तरीके हैं:

  1. मौजूदा कॉम्पोनेंट पर सीधे तौर पर स्टाइल लागू करना. इसके लिए, कॉम्पोनेंट में Style पैरामीटर होना चाहिए.
  2. लेआउट कंपोज़ेबल पर Modifier.styleable की मदद से स्टाइल लागू करना. इसके लिए, कंपोज़ेबल में Style पैरामीटर नहीं होना चाहिए.
  3. अपने कस्टम डिज़ाइन सिस्टम में, Modifier.styleable{} का इस्तेमाल करना और अपने कॉम्पोनेंट पर स्टाइल पैरामीटर दिखाना.

स्टाइल पर उपलब्ध प्रॉपर्टी

स्टाइल में, मॉडिफ़ायर की कई प्रॉपर्टी इस्तेमाल की जा सकती हैं. हालांकि, स्टाइल की मदद से मॉडिफ़ायर की सभी प्रॉपर्टी को कॉपी नहीं किया जा सकता. कुछ खास तरह के व्यवहार के लिए, मॉडिफ़ायर की ज़रूरत होती है. जैसे, इंटरैक्शन, कस्टम ड्राइंग या प्रॉपर्टी को स्टैक करना.

ग्रुपिंग प्रॉपर्टी चाइल्ड कॉम्पोनेंट में इनहेरिट की गई प्रॉपर्टी
लेआउट और साइज़िंग
पैडिंग (जगह) contentPadding (अंदर की ओर) और externalPadding (बाहर की ओर). ये प्रॉपर्टी, डायरेक्शनल, हॉरिज़ॉन्टल, वर्टिकल, और चारों ओर से पैडिंग के लिए उपलब्ध हैं. नहीं
डाइमेंशन fillWidth/Height/Size() और width, height, और size (इनमें Dp, DpSize या Float फ़्रैक्शन इस्तेमाल किए जा सकते हैं). नहीं
स्टिकर दिखने की जगह left/top/right/bottom ऑफ़सेट. नहीं
विज़ुअल अपीयरेंस
पानी भरें background और foreground (इनमें Color या Brush इस्तेमाल किए जा सकते हैं). नहीं
बॉर्डर borderWidth, borderColor, और borderBrush. नहीं
आकार shape नहीं. हालांकि, इसका इस्तेमाल अन्य प्रॉपर्टी के साथ किया जा सकता है. clip और border में, तय किए गए इस आकार का इस्तेमाल किया जाता है.
परछाई dropShadow, innerShadow नहीं
ट्रांसफ़ॉर्मेशन
ग्राफ़िक्स लेयर की जगह में बदलाव translationX, translationY, scaleX/Y, rotationX/Y/Z नहीं
कंट्रोल alpha, zIndex (स्टैक करने का क्रम), और transformOrigin (पिवट पॉइंट) नहीं
टाइपोग्राफ़ी
स्टाइल textStyle, fontSize, fontWeight, fontStyle, और fontFamily हां
वर्णक्रम contentColor और contentBrush. इसका इस्तेमाल, आइकॉन की स्टाइलिंग के लिए भी किया जाता है. हां
पैराग्राफ़ lineHeight, letterSpacing, textAlign, textDirection, lineBreak, और hyphens. हां
सजावट textDecoration, textIndent, और baselineShift. हां

स्टाइल पैरामीटर वाले कॉम्पोनेंट पर सीधे तौर पर स्टाइल लागू करना

जिन कॉम्पोनेंट में Style पैरामीटर होता है उनकी स्टाइलिंग सेट की जा सकती है:

BaseButton(
    onClick = { },
    style = { }
) {
    BaseText("Click me")
}
StylesSnippets.kt

स्टाइल लैम्डा में, कई प्रॉपर्टी सेट की जा सकती हैं. जैसे, externalPadding या background:

BaseButton(
    onClick = { },
    style = { background(Color.Blue) }
) {
    BaseText("Click me")
}
StylesSnippets.kt

इस्तेमाल की जा सकने वाली प्रॉपर्टी की पूरी सूची देखने के लिए, स्टाइल पर उपलब्ध प्रॉपर्टी देखें.

मौजूदा पैरामीटर वाले कॉम्पोनेंट के लिए, मॉडिफ़ायर का इस्तेमाल करके स्टाइल लागू करना

जिन कॉम्पोनेंट में स्टाइल पैरामीटर नहीं होता उन पर भी styleable मॉडिफ़ायर की मदद से स्टाइल लागू की जा सकती हैं. कस्टम कॉम्पोनेंट डेवलप करते समय भी यह तरीका काम आता है.

Row(
    modifier = Modifier.styleable { }
) {
    BaseText("Content")
}
StylesSnippets.kt

style पैरामीटर की तरह, लैम्डा में background या padding जैसी प्रॉपर्टी शामिल की जा सकती हैं.

Row(
    modifier = Modifier.styleable {
        background(Color.Blue)
    }
) {
    BaseText("Content")
}
StylesSnippets.kt

चेन किए गए एक से ज़्यादा Modifier.styleable मॉडिफ़ायर, लागू किए गए कंपोज़ेबल पर इनहेरिट नहीं की गई प्रॉपर्टी के साथ जुड़ जाते हैं. इनका व्यवहार, एक ही प्रॉपर्टी को तय करने वाले एक से ज़्यादा मॉडिफ़ायर की तरह होता है. इनहेरिट की गई प्रॉपर्टी के लिए, इन्हें ओवरराइड किया जाता है. साथ ही, चेन में मौजूद आखिरी styleable मॉडिफ़ायर, वैल्यू सेट करता है.

Modifier.styleable का इस्तेमाल करते समय, StyleState बनाया और उपलब्ध कराया जा सकता है. इसका इस्तेमाल, मॉडिफ़ायर के साथ किया जाता है, ताकि स्टेट के आधार पर स्टाइलिंग लागू की जा सके. ज़्यादा जानकारी के लिए, स्टाइल के साथ स्टेट और ऐनिमेशन देखें.

स्टैंडअलोन स्टाइल तय करना

रीयूज़ करने के मकसद से, स्टैंडअलोन स्टाइल तय की जा सकती है:

val style = Style { background(Color.Blue) }
StylesSnippets.kt

इसके बाद, तय की गई उस स्टाइल को कंपोज़ेबल के स्टाइल पैरामीटर में या Modifier.styleable के साथ पास किया जा सकता है. Modifier.styleable का इस्तेमाल करते समय, StyleState ऑब्जेक्ट भी बनाना होगा. StyleState के बारे में ज़्यादा जानकारी, स्टाइल के साथ स्टेट और ऐनिमेशन दस्तावेज़ में दी गई है.

यहां दिए गए उदाहरण में, स्टाइल को सीधे तौर पर कॉम्पोनेंट के इन-बिल्ट पैरामीटर या Modifier.styleable की मदद से लागू करने का तरीका बताया गया है:

val style = Style { background(Color.Blue) }

// built in parameter
BaseButton(onClick = { }, style = style) {
    BaseText("Button")
}

// modifier styleable
val styleState = remember { MutableStyleState(null) }
Column(
    Modifier.styleable(styleState, style)
) {
    BaseText("Column content")
}
StylesSnippets.kt

उस स्टाइल को एक से ज़्यादा कॉम्पोनेंट में भी पास किया जा सकता है:

val style = Style { background(Color.Blue) }

// built in parameter
BaseButton(onClick = { }, style = style) {
    BaseText("Button")
}
BaseText("Different text that uses the same style parameter", style = style)

// modifier styleable
val columnStyleState = remember { MutableStyleState(null) }
Column(
    Modifier.styleable(columnStyleState, style)
) {
    BaseText("Column")
}
val rowStyleState = remember { MutableStyleState(null) }
Row(
    Modifier.styleable(rowStyleState, style)
) {
    BaseText("Row")
}
StylesSnippets.kt

एक से ज़्यादा स्टाइल प्रॉपर्टी जोड़ना

हर लाइन में अलग-अलग प्रॉपर्टी सेट करके, एक से ज़्यादा स्टाइल प्रॉपर्टी जोड़ी जा सकती हैं:

BaseButton(
    onClick = { },
    style = {
        background(Color.Blue)
        contentPaddingStart(16.dp)
    }
) {
    BaseText("Button")
}
StylesSnippets.kt

मॉडिफ़ायर पर आधारित स्टाइलिंग के उलट, स्टाइल में मौजूद प्रॉपर्टी जुड़ती नहीं हैं. स्टाइल, एक स्टाइल ब्लॉक में मौजूद प्रॉपर्टी की सूची में सेट की गई आखिरी वैल्यू लेती हैं. यहां दिए गए उदाहरण में, बैकग्राउंड को दो बार सेट किया गया है. इसलिए, TealColor को बैकग्राउंड के तौर पर लागू किया गया है. पैडिंग के लिए, contentPaddingTop टॉप पैडिंग को ओवरराइड करता है जिसे contentPadding से सेट किया गया है और वैल्यू को जोड़ता नहीं है.

BaseButton(
    style = {
        background(Color.Red)
        // Background of Red is now overridden with TealColor instead
        background(TealColor)
        // All directions of padding are set to 64.dp (top, start, end, bottom)
        contentPadding(64.dp)
        // Top padding is now set to 16.dp, all other paddings remain at 64.dp
        contentPaddingTop(16.dp)
    },
    onClick = {
        //
    }
) {
    BaseText("Click me!")
}
StylesSnippets.kt

दो बैकग्राउंड कलर सेट किए गए बटन और दो contentPadding ओवरराइड
पहली इमेज. बटन में बैकग्राउंड के दो रंग सेट किए गए हैं और contentPadding को दो बार ओवरराइड किया गया है.

एक से ज़्यादा स्टाइल ऑब्जेक्ट मर्ज करना

एक से ज़्यादा स्टाइल ऑब्जेक्ट बनाए जा सकते हैं और उन्हें अपने कंपोज़ेबल के स्टाइल पैरामीटर में पास किया जा सकता है.

val style1 = Style { background(TealColor) }
val style2 = Style { contentPaddingTop(16.dp) }

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}
StylesSnippets.kt

बैकग्राउंड के रंग और contentPaddingTop सेट किए गए बटन का उदाहरण
दूसरी इमेज. बटन में बैकग्राउंड का रंग और contentPaddingTop सेट किया गया है.

जब एक से ज़्यादा स्टाइल में एक ही प्रॉपर्टी तय की जाती है, तो सेट की गई आखिरी प्रॉपर्टी को चुना जाता है. स्टाइल में प्रॉपर्टी जुड़ती नहीं हैं. इसलिए, पास की गई आखिरी पैडिंग, शुरुआती contentPadding से सेट की गई contentPaddingHorizontal को ओवरराइड करती है. इसके अलावा, बैकग्राउंड का आखिरी रंग, पास की गई शुरुआती स्टाइल से सेट किए गए बैकग्राउंड के रंग को ओवरराइड करता है.

val style1 = Style {
    background(Color.Red)
    contentPadding(32.dp)
}

val style2 = Style {
    contentPaddingHorizontal(8.dp)
    background(Color.LightGray)
}

BaseButton(
    style = style1 then style2,
    onClick = {

    },
) {
    BaseText("Click me!")
}
StylesSnippets.kt

इस मामले में, लागू की गई स्टाइलिंग में हल्के ग्रे रंग का बैकग्राउंड और 32.dp पैडिंग है. हालांकि, बाईं और दाईं ओर की पैडिंग की वैल्यू 8.dp है.

contentPadding वाला बटन, जिसे अलग-अलग स्टाइल से बदला गया है
तीसरी इमेज. बटन में contentPadding है, जिसे अलग-अलग स्टाइल से ओवरराइड किया गया है.

स्टाइल इनहेरिटेंस

स्टाइल की कुछ प्रॉपर्टी, जैसे कि contentColor और टेक्स्ट स्टाइल से जुड़ी प्रॉपर्टी, चाइल्ड कंपोज़ेबल में फैलती हैं. चाइल्ड कंपोज़ेबल पर सेट की गई स्टाइल, उस खास चाइल्ड के लिए इनहेरिट की गई पैरंट स्टाइलिंग को ओवरराइड करती है.

स्टाइल, स्टाइल की जा सकने वाली, और डायरेक्ट पैरामीटर की मदद से स्टाइल को आगे बढ़ाना
चौथी इमेज. Style, styleable, और सीधे पैरामीटर के साथ स्टाइल का प्रसार.
प्राथमिकता तरीका प्रभाव
1 (सबसे ज़्यादा) कंपोज़ेबल पर सीधे तौर पर आर्ग्युमेंट सब कुछ ओवरराइड करता है. उदाहरण के लिए, Text(color = Color.Red)
2 स्टाइल पैरामीटर लोकल स्टाइल, Text(style = Style { contentColor(Color.Red)} को ओवरराइड करती है
3 मॉडिफ़ायर चेन कॉम्पोनेंट पर Modifier.styleable{ contentColor(Color.Red).
4 (सबसे कम) पैरंट स्टाइल इनहेरिट की जा सकने वाली प्रॉपर्टी (टाइपोग्राफ़ी/रंग) के लिए, जो पैरंट से पास की गई हैं.

पैरंट स्टाइलिंग

पैरंट कंपोज़ेबल से टेक्स्ट प्रॉपर्टी (जैसे, contentColor) सेट की जा सकती हैं. ये सभी चाइल्ड Text कंपोज़ेबल में फैलती हैं.

val styleState = remember { MutableStyleState(null) }
Column(
    modifier = Modifier.styleable(styleState) {
        background(Color.LightGray)
        val blue = Color(0xFF4285F4)
        val purple = Color(0xFFA250EA)
        val colors = listOf(blue, purple)
        contentBrush(Brush.linearGradient(colors))
    },
) {
    BaseText("Children inherit", style = { width(60.dp) })
    BaseText("certain properties")
    BaseText("from their parents")
}
StylesSnippets.kt

चाइल्ड कंपोज़ेबल की प्रॉपर्टी इनहेरिटेंस
पांचवी इमेज. चाइल्ड कंपोज़ेबल की प्रॉपर्टी इनहेरिटेंस.

चाइल्ड कंपोज़ेबल से प्रॉपर्टी को ओवरराइड करना

किसी खास Text कंपोज़ेबल पर भी स्टाइलिंग सेट की जा सकती है. अगर पैरंट कंपोज़ेबल पर स्टाइलिंग सेट की गई है, तो चाइल्ड कंपोज़ेबल पर सेट की गई स्टाइलिंग, पैरंट कंपोज़ेबल की स्टाइलिंग को ओवरराइड करती है.

val styleState = remember { MutableStyleState(null) }
Column(
    modifier = Modifier.styleable(styleState) {
        background(Color.LightGray)
        val blue = Color(0xFF4285F4)
        val purple = Color(0xFFA250EA)
        val colors = listOf(blue, purple)
        contentBrush(Brush.linearGradient(colors))
    },
) {
    BaseText("Children can ", style = {
        contentBrush(Brush.linearGradient(listOf(Color.Red, Color.Blue)))
    })
    BaseText("override properties")
    BaseText("set by their parents")
}
StylesSnippets.kt

चाइल्ड कंपोज़ेबल, पैरंट प्रॉपर्टी को ओवरराइड करते हैं
छठी इमेज. चाइल्ड कंपोज़ेबल, पैरंट प्रॉपर्टी को ओवरराइड करते हैं.

कस्टम स्टाइल प्रॉपर्टी लागू करना

StyleScope पर एक्सटेंशन फ़ंक्शन का इस्तेमाल करके, कस्टम प्रॉपर्टी बनाई जा सकती हैं. ये प्रॉपर्टी, मौजूदा स्टाइल की परिभाषाओं से मैप होती हैं. इसके लिए, यहां दिया गया उदाहरण देखें:

fun StyleScope.outlinedBackground(color: Color) {
    border(1.dp, color)
    background(color)
}
StylesSnippets.kt

स्टाइल की परिभाषा में, इस नई प्रॉपर्टी को लागू करें:

val customExtensionStyle = Style {
    outlinedBackground(Color.Blue)
}
StylesSnippets.kt

स्टाइल की नई प्रॉपर्टी बनाने की सुविधा उपलब्ध नहीं है. अगर आपके इस्तेमाल के मामले में इस सुविधा की ज़रूरत है, तो सुविधा का अनुरोध सबमिट करें.

CompositionLocal की वैल्यू पढ़ना

डिज़ाइन सिस्टम टोकन को CompositionLocal में सेव करना एक आम तरीका है. इससे, वैरिएबल को पैरामीटर के तौर पर पास किए बिना ऐक्सेस किया जा सकता है. स्टाइल, CompositionLocal को ऐक्सेस करके, स्टाइल में सिस्टम-वाइड वैल्यू वापस पा सकती हैं:

val buttonStyle = Style {
    contentPadding(12.dp)
    shape(RoundedCornerShape(50))
    background(Brush.verticalGradient(LocalCustomColors.currentValue.background))
}
StylesSnippets.kt

पीछे जाएं
खास जानकारी
आगे बढ़ें
स्टाइल में स्टेट और ऐनिमेशन