Jetpack Compose स्टाइलिंग मास्टर करें: अपने Android ऐप को थीम करने के लिए एक गाइड

इस लेख में, हम सीखेंगे कि Jetpack Compose में एप्लिकेशन को कैसे स्टाइल और थीम करें।

Compose Android के लिए एक नया UI फ्रेमवर्क है (हालांकि Desktop और Web सपोर्ट विकसित किया जा रहा है), जो पुराने XML-आधारित View सिस्टम को प्रतिस्थापित करता है।

इस लेख को लिखने के समय अभी भी बीटा रिलीज में होने के बावजूद, मुझे उम्मीद नहीं है कि लाइब्रेरी का यह विशेष हिस्सा स्थिर रिलीज के लिए अत्यधिक बदल जाएगा।

विषयों में शामिल हैं:

• XML दृष्टिकोण का संक्षिप्त पुनर्कथन
• XML-आधारित रंगों, थीम और टाइपोग्राफी (फॉन्ट) सिस्टम से कैसे माइग्रेट करें
• केवल कुछ लाइनों कोड में अपने ऐप्स के लिए लाइट और डार्क थीम कैसे सेट करें
• अपने नए Kotlin-आधारित स्टाइल जानकारी को अपने कंपोजेबल में कैसे उपयोग करें
• Text Composables को विशेष रूप से कैसे स्टाइल करें

आगे बढ़ने से पहले, यह महत्वपूर्ण है कि आप समझें कि कंपोजेबल क्या है। मैं यहां उस अवधारणा को समझाने के लिए नहीं रुकूंगा, क्योंकि मैंने पहले ही इस लेख में ऐसा किया है।

हम XML संसाधनों का उपयोग करके Android ऐप्स को कैसे स्टाइल करते थे

हमेशा की तरह, मैं इन विषयों पर प्रेरणा और थोड़ा इतिहास साझा करना पसंद करता हूं। यदि आप परवाह नहीं करते हैं, तो अगले अनुभाग पर जाएं जहां हम व्यावहारिक चीजों में उतरते हैं।

Android संसाधन

Android ऐप संसाधन प्रणाली एक ऐसी चीज है जिसके लिए Android टीम हाई-फाइव की हकदार है, कम से कम मेरी राय में। लेकिन हर डिज़ाइन निर्णय की तरह, एक स्थिति में एक विशेषता दूसरी स्थिति में दोष बन जाती है।

विशिष्ट होने के लिए, प्लेटफ़ॉर्म और एप्लिकेशन डेवलपर्स दोनों के लिए सबसे बड़ी चुनौतियों में से एक है जिसे मैं स्थानीयकृत संसाधन कहूंगा। मैं उन ऐप्स बनाने की चुनौती का जिक्र कर रहा हूं जो:

• विभिन्न भाषाओं और वर्णमालाओं में टेक्स्ट और ग्राफिक्स प्रदर्शित करते हैं
• विभिन्न फॉर्म फैक्टर (आयाम, घनत्व, आदि) के अनुपात में दिखते और महसूस होते हैं।

ये सिर्फ दो सामान्य उदाहरण हैं – और भी बहुत कुछ हैं। संसाधन प्रणाली हमें एक जगह देती है जहां ऐप डेवलपर्स स्थानीयकृत संसाधन प्रदान कर सकते हैं जिन्हें प्लेटफ़ॉर्म संकलन समय पर चुन सकता है। यह हमें उस बॉयलरप्लेट कोड को स्वयं लिखने से बचाता है।

विशेषता या दोष?

जबकि मैं कभी भी स्वयं स्थानीयकृत स्ट्रिंग संसाधनों के लिए आवश्यक बॉयलरप्लेट कोड का प्रबंधन नहीं करना चाहूंगा, इसका मतलब यह नहीं है कि मुझे XML लिखने में आनंद आता है।

वास्तव में, ऐसी बहुत कम चीजें हैं जिन्हें मैं XML में करना पसंद करूंगा Kotlin या Swift जैसी आधुनिक, मुहावरेदार और सुरुचिपूर्ण भाषा के बजाय। व्यक्तिगत प्राथमिकता के अलावा, एक अधिक तकनीकी कारण है कि XML संसाधन हमेशा आदर्श नहीं होते हैं।

कृपया ध्यान दें कि यह प्लेटफ़ॉर्म डेवलपर्स/इंजीनियर्स की आलोचना नहीं है। यह केवल इस अवलोकन का अवलोकन है कि डिज़ाइन निर्णयों के हमेशा लाभ और लागत होते हैं।

हमारे XML-आधारित संसाधनों को हमारे JVM-आधारित एप्लिकेशन कोड में एकीकृत करने के लिए, हमारे पास अनिवार्य रूप से अनुवाद (संकलन) की परतें और प्लेटफ़ॉर्म ब्रिज (API) होने चाहिए। यह प्लेटफ़ॉर्म और एप्लिकेशन डेवलपर्स दोनों के लिए कठिनाइयां पैदा कर सकता है।

दो सामान्य समस्याएं जिनका मैंने सामना किया:

• मैं एक ऐसे स्थान पर संसाधन तक पहुंच चाहता हूं जहां मैं उन प्लेटफ़ॉर्म API से सख्त युग्मन नहीं चाहता जो संसाधन प्रदान करते हैं
• मुझे केवल एक View का रूप बदलने के लिए कुछ हास्यास्पद बॉयलरप्लेट कोड लिखना पड़ता है (यानी, संसाधन स्टाइल और थीम के भीतर परिभाषित कुछ ओवरराइड करना)

मूल समस्या सभी शामिल लोगों के लिए सख्त युग्मन है View सिस्टम और Android संसाधन प्रणाली के साथ (जो स्वयं एक-दूसरे से सख्ती से युग्मित हैं)।

प्लेटफ़ॉर्म डेवलपर्स के लिए, इसका मतलब है कि उन्हें विशाल और पुराने कोडबेस के शीर्ष पर निर्माण करना होगा, या उनके आसपास काम करना होगा। इसमें जोड़ें कि उन्हें नई सुविधाओं को पुराने Android OS संस्करणों पर भी काम करने का प्रयास करना चाहिए, और यह एक बहुत ही थकाऊ काम बन जाता है।

हम एप्लिकेशन डेवलपर्स के लिए परिणाम अक्सर बहुत सारा बॉयलरप्लेट कोड, कुछ हैकी वर्कअराउंड चीजों के लिए जो सहज रूप से लगता है कि वे वन-लाइनर होने चाहिए। उस मुख्य API का उल्लेख नहीं करना जो इन संसाधनों को प्राप्त करने के लिए है Context, जो एक क्लास है जिसे आप वास्तव में मेमोरी में लीक नहीं करना चाहते।

Jetpack Compose में प्रवेश करें।

Jetpack Compose के साथ थीम, रंग और फॉन्ट कैसे सेट करें

पुराने सिस्टम की हमारी समीक्षा के साथ, आइए Android एप्लिकेशन को स्टाइल और थीम करने का एक अधिक सुंदर और सरल तरीका तलाशें। मैंने कहा था कि मैं इसे व्यावहारिक रखूंगा, लेकिन एक बिंदु की अनुमति दें।

चूंकि हम यह काम Kotlin में करेंगे, इसका मतलब एक बहुत महत्वपूर्ण बात है: हम और प्लेटफ़ॉर्म डेवलपर्स दोनों XML और JVM के बीच अनुवाद (संकलन) और API ब्रिज (Android के R क्लास और Context) से बहुत कम बंधे हैं।

सरल शब्दों में, इसका मतलब है कम बॉयलरप्लेट कोड, और रनटाइम पर अधिक नियंत्रण।

इस लेख के व्यावहारिक भाग के लिए, मेरा सुझाव है कि आप इस प्रक्रिया का पालन उस क्रम में करें जिस क्रम में मैं इसे समझाता हूं। मैंने इसे उस क्रम में संरचित किया है जिस क्रम में मैं एक नए ऐप में यह कोड लिखते समय पालन करता हूं।

Kotlin Compose के साथ Colors.xml संसाधनों को कैसे बदलें

यदि आपने पहले से अपने एप्लिकेशन के लिए रंग योजना तय नहीं की है, तो मैं सुझाव देता हूं कि आप आधिकारिक Material Design वेबसाइट पर उपलब्ध विभिन्न संसाधनों का उपयोग करें। आजमाएं:

• रंग पैलेट
• रंग उपकरण

यदि आप लाइट और डार्क ऐप थीम का समर्थन करने की योजना बना रहे हैं (शीघ्र ही समझाया गया), तो एक रंग योजना चुनने का प्रयास करें जो सफेद टेक्स्ट का समर्थन करती हो और एक रंग योजना जो काले टेक्स्ट का समर्थन करती हो।

Color.kt जैसी कोई फाइल बनाएं (नाम मायने नहीं रखता) और इसे अपरिवर्तनीय val मानों से भरें:

import androidx.compose.ui.graphics.Color val primaryGreen = Color(0XFF00bc00) val primaryCharcoal = Color(0xFF2b2b2b) val accentAmber = Color(0xFFffe400) val textColorLight = Color(0xDCFFFFFF) val textColorDark = Color(0xFFf3f3f3) val gridLineColorLight = Color.Black //...

आप या तो Color.Black जैसे पूर्वनिर्धारित मान का उपयोग कर सकते हैं या अपना खुद का ARGB Hex मान प्रदान कर सकते हैं।

चूंकि ARGB Hex केवल "0XFF00bc00" का अर्थ वर्णन करने के लिए शब्दजाल का एक गुच्छा है, मुझे अनुवाद करने दें:

• पहले दो वर्ण 0x कंपाइलर को बताते हैं कि यह एक हेक्साडेसिमल संख्या है
• अगले दो वर्ण, "FF" या "DC", पारदर्शिता/अपारदर्शिता/Aल्फा को हेक्स में दर्शाते हैं
• शेष छह वर्ण जोड़े Rेड, Green, और Bलू का प्रतिनिधित्व करते हैं
  

fontFamily विशेषता को कैसे जोड़ें और बदलें

टाइपोग्राफी (फॉन्ट) प्रबंधित करना भी बहुत आसान है। यह उस तरह की चीज है जहां Kotlin के डिफ़ॉल्ट तर्क बहुत उपयोगी हैं।

Type.kt जैसी कोई फाइल बनाएं (नाम अभी भी मायने नहीं रखता) और Typography क्लास बनाएं...:

val typography = Typography( body1 = TextStyle( fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, fontSize = 16.sp ), button = TextStyle( fontFamily = FontFamily.Default, fontWeight = FontWeight.Bold, fontSize = 32.sp ), caption = TextStyle( fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, fontSize = 12.sp ) ) //...

...और कुछ TextStyle क्लास:

//... val mainTitle = TextStyle( fontFamily = FontFamily.Default, fontWeight = FontWeight.Light, fontSize = 48.sp, textAlign = TextAlign.Center ) fun dropdownText(color: Color) = TextStyle( fontFamily = FontFamily.Default, fontWeight = FontWeight.Normal, fontSize = 32.sp, textAlign = TextAlign.Center, color = color ) //...

चाहे आप सार्वजनिक फ़ंक्शन या मान प्रदान करें (मैं यहां var का उपयोग करने की सलाह नहीं देता) यह आपकी व्यक्तिगत प्राथमिकता और वर्तमान आवश्यकताओं पर निर्भर करता है।

Jetpack Compose में ऐप थीम कैसे बनाएं

अपने कंपोजेबल में अपने थीम का उपयोग करने से पहले आपको कॉन्फिगर करने की आवश्यकता वाली अंतिम चीज़ एक MaterialTheme @Composable है। मेरा, मेरे लाइट और डार्क रंग पैलेट के साथ, GraphSudokuTheme नामक फाइल में है:

import androidx.compose.foundation.isSystemInDarkTheme import androidx.compose.material.MaterialTheme import androidx.compose.material.darkColors import androidx.compose.material.lightColors import androidx.compose.runtime.Composable import androidx.compose.ui.graphics.Color private val LightColorPalette = lightColors( primary = primaryGreen, secondary = textColorLight, surface = lightGrey, primaryVariant = gridLineColorLight, onPrimary = accentAmber, onSurface = accentAmber ) private val DarkColorPalette = darkColors( //मुख्य पृष्ठभूमि रंग primary = primaryCharcoal, //टेक्स्ट रंग के लिए उपयोग किया जाता है secondary = textColorDark, //सुडोकु बोर्ड की पृष्ठभूमि surface = lightGreyAlpha, //सुडोकु बोर्ड की ग्रिड लाइनें primaryVariant = gridLineColorLight, onPrimary = accentAmber, onSurface = accentAmber ) @Composable fun GraphSudokuTheme( darkTheme: Boolean = isSystemInDarkTheme(), content: @Composable () -> Unit ) { MaterialTheme( colors = if (darkTheme) DarkColorPalette else LightColorPalette, typography = typography, shapes = shapes, content = content ) } 

चूंकि आपको पहले से ही पता होना चाहिए कि कंपोजेबल क्या है (मैंने आपको उचित चेतावनी दी थी), यहां केवल नई चीज़ darkTheme: Boolean = isSystemInDarkTheme() है।

सरलीकृत व्याख्या देने के लिए, isSystemInDarkTheme() एक कॉल है जो किसी भी संगत Android डिवाइस से उपयोगकर्ता की लाइट या डार्क थीम की प्राथमिकता पूछता है।

यह एक बूलियन मान लौटाता है जिसका उपयोग हम टर्नरी (सशर्त) असाइनमेंट अभिव्यक्ति में कर सकते हैं जैसे colors = if (darkTheme) DarkColorPalette else LightColorPalette।

वास्तव में बस इतना ही। रंग, फॉन्ट, और दो थीम कुछ ही मिनटों में परिभाषित।

Compose में थीम का उपयोग कैसे करें

अब इस थीम को अपने ऐप में उपयोग करने का समय है। इस ऐप में, जिसमें केवल दो प्राथमिक स्क्रीन हैं, मैं बस एक Activity का उपयोग अपने कंपोजेबल के लिए कंटेनर के रूप में करता हूं:

class NewGameActivity : AppCompatActivity(), NewGameContainer { //... override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) //... setContent { GraphSudokuTheme { NewGameScreen( onEventHandler = logic::onEvent, viewModel ) } } //... }

जहां भी आप खुद को setContent {} कॉल करते हुए पाते हैं, शुरुआती लोगों के लिए मेरा सुझाव है कि तुरंत उसके अंदर अपना थीम कंपोजेबल रखें। ऐसा करने से स्टाइल जानकारी प्रत्येक नेस्टेड कंपोजेबल तक कैस्केड/विरासत में मिलेगी।

आप हो गए! लगभग।

स्टाइल और थीम को कैसे ओवरराइड करें

यदि आप कर सकते हैं, तो अपने लाइट और डार्क पैलेट में उन सभी रंगों को शामिल करने का प्रयास करें जिनकी आपको आवश्यकता होगी। इस तरह, जब आप MaterialTheme.colors.<Color> कॉल करते हैं, तो सिस्टम उपयुक्त पैलेट चुनने के लिए आवश्यक सशर्त तर्क को संभालेगा:

@Composable fun NewGameContent( onEventHandler: (NewGameEvent) -> Unit, viewModel: NewGameViewModel ) { Surface( Modifier .wrapContentHeight() .fillMaxWidth() ) { ConstraintLayout(Modifier.background(MaterialTheme.colors.primary)) { //... } //... } } 

हालांकि, कभी-कभी अपना स्वयं का सशर्त तर्क लिखना अधिक उपयुक्त होता है... या मैं बस आलसी हो गया। सौभाग्य से Compose कई ऐसे कॉन्फिगरेशन को गुणों के रूप में उपलब्ध कराता है:

@Composable fun DoneIcon(onEventHandler: (NewGameEvent) -> Unit) { Icon( imageVector = Icons.Filled.Done, tint = if (MaterialTheme.colors.isLight) textColorLight else textColorDark, contentDescription = null, modifier = Modifier .clickable( //... ) ) }

MaterialTheme.Colors.isLight एक बूलियन लौटाता है जो दर्शाता है कि वे किस मोड में हैं, फिर हम वहां से एक और टर्नरी असाइनमेंट का उपयोग कर सकते हैं।

Text Composable को कैसे स्टाइल करें

बस style तर्क को अपने टेक्स्ट स्टाइल में से एक के बराबर सेट करें (चाहे वह MaterialTheme से आता हो या Type.kt के भीतर स्टाइल में से एक):

Text( text = stat.toTime(), style = statsLabel.copy( color = if (isZero) Color.White else MaterialTheme.colors.onPrimary, fontWeight = FontWeight.Normal ), modifier = Modifier .wrapContentSize() .padding(end = 2.dp, bottom = 4.dp), textAlign = TextAlign.End )

TextStyle का अपना copy फ़ंक्शन तैयार है क्या आपको कुछ भी ओवरराइट करने की आवश्यकता हो।

और बस! अब आप जानते हैं कि Jetpack Compose का उपयोग करके एप्लिकेशन को कैसे स्टाइल और थीम करें। पढ़ने के लिए धनुक्स :)

सोशल

आप मुझे यहां Instagram पर और यहां Twitter पर पा सकते हैं।

यहां मेरे कुछ ट्यूटोरियल और कोर्स हैं

https://youtube.com/wiseass     https://www.freecodecamp.org/news/author/ryan-michael-kay/ https://skl.sh/35IdKsj (Android Studio के साथ Android का परिचय)