जेटपैक कंपोज़ के साथ ऐप को स्टाइल और थीम कैसे करें

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

Android के लिए कंपोज़ एक नया UI ढांचा है (हालांकि डेस्कटॉप और वेब समर्थन विकसित किया जा रहा है), जो पुराने XML-आधारित व्यू सिस्टम को बदल देता है।

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

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

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

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

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

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

Android संसाधन

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

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

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

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

सुविधा या दोष?

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

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

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

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

मैं जिन दो सामान्य समस्याओं का सामना कर रहा था, वे थीं:

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

मूल समस्या इसमें शामिल सभी लोगों के लिए टाइट कपलिंग . है व्यू सिस्टम और एंड्रॉइड रिसोर्स सिस्टम (जो स्वयं एक साथ कसकर जुड़े हुए हैं) के लिए।

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

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

जेटपैक लिखें दर्ज करें।

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

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

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

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

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

Cotlin Compose के साथ Colors.xml रिसोर्सेज को कैसे बदलें

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

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

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

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

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 या अपना खुद का एआरजीबी हेक्स मान प्रदान करें।

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

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

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

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

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 . मेरे पास ग्राफ़सुडोकूथीम नामक फ़ाइल में मेरा, और मेरे हल्के और गहरे रंग के पैलेट हैं:

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(
    //main background color
    primary = primaryCharcoal,
    //used for text color
    secondary = textColorDark,
    //background of sudoku board
    surface = lightGreyAlpha,
    //grid lines of sudoku board
    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 में उपयोग कर सकते हैं .

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

लिखें में थीम का उपयोग कैसे करें

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

class NewGameActivity : AppCompatActivity(), NewGameContainer {
	//...
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
		//...

        setContent {
            GraphSudokuTheme {
                NewGameScreen(
                    onEventHandler = logic::onEvent,
                    viewModel
                )
            }
        }
		//...
    }

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

आप कर चुके हैं! लगभग।

शैलियों और थीम को कैसे ओवरराइड करें

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

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

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

@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 एक बूलियन लौटाता है जो दर्शाता है कि वे किस मोड में हैं, फिर हम वहां से एक और टर्नरी असाइनमेंट का उपयोग कर सकते हैं।

किसी टेक्स्ट को कंपोज़ेबल कैसे स्टाइल करें

बस 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 का उपयोग करके किसी एप्लिकेशन को स्टाइल और थीम कैसे किया जाता है। पढ़ने के लिए धन्यवाद :)

सामाजिक

आप मुझे यहां इंस्टाग्राम पर और यहां ट्विटर पर ढूंढ सकते हैं।

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

https://youtube.com/wiseass https://www.freecodecamp.org/news/author/ryan-michael-kay/ https://skl.sh/35IdKsj (एंड्रॉइड स्टूडियो के साथ एंड्रॉइड का परिचय)