Jetpack Compose: यह क्या है, मुख्य अवधारणाएँ और Composable फ़ंक्शन

Jetpack Compose क्या है?

Jetpack Compose Google द्वारा Android यूज़र इंटरफ़ेस बनाने के लिए एक घोषणात्मक फ्रेमवर्क है, जिसकी घोषणा 2019 में की गई थी और 2021 में स्थिर रिलीज़ तक पहुँचा। पुराने View System (XML लेआउट + Activity/Fragment) के विपरीत, Compose एनोटेटेड Kotlin फ़ंक्शन — @Composable का उपयोग करता है। इंटरफ़ेस पूरी तरह से Kotlin में वर्णित है: XML और कोड के बीच कोई अलगाव नहीं है। इसने XML और Kotlin में बेमेल ID से संबंधित त्रुटियों की श्रेणी को समाप्त कर दिया (type-safe synthetic रिफैक्टरिंग में मदद नहीं करता था)।

Compose अपनी स्वयं की रेंडरिंग सिस्टम — Canvas पर बनाया गया है, जो View पदानुक्रम से बंधा नहीं है। प्रत्येक Composable View सिस्टम के onMeasure/onDraw को छोड़कर, सीधे Canvas पर स्वयं को चित्रित करता है। यह जटिल स्क्रीन पर प्रदर्शन लाभ प्रदान करता है: Google परीक्षणों (2023) में, 200 तत्वों वाली Compose स्क्रीन RecyclerView + ViewHolder पर समान स्क्रीन की तुलना में 40% तेज़ रेंडर हुई।

न्यूनतम आवश्यकताएँ और संगतता

Compose के लिए minSdk 21 (Android 5.0) और Kotlin 1.9+ आवश्यक है। Compose BOM (Bill of Materials) सभी Compose लाइब्रेरी के संस्करणों को सिंक्रोनाइज़ करता है। फ्रेमवर्क मौजूदा View System कोड के साथ संगत है: Compose XML लेआउट में ComposeView के माध्यम से एम्बेड किया जाता है, और पुराने View Compose पदानुक्रम में AndroidView के माध्यम से। Google Play Console (2025) के अनुसार, Android 5.0+ 97% सक्रिय उपकरणों को कवर करता है, इसलिए अधिकांश परियोजनाओं के लिए संगतता कोई सीमा नहीं है।

Composable फ़ंक्शन और कम्पोज़िशन

@Composable एक एनोटेशन है जो एक सामान्य Kotlin फ़ंक्शन को UI बिल्डिंग ब्लॉक में बदल देता है। Composable फ़ंक्शन वर्णन करता है कि इंटरफ़ेस का एक टुकड़ा कैसा दिखना चाहिए — टेक्स्ट, बटन, सूची। मान लौटाने के बजाय, फ़ंक्शन कम्पोज़िशन में UI घटकों को उत्सर्जित (emit) करता है। यह जनरेटर के समान है: प्रत्येक फ़ंक्शन कॉल करने पर स्क्रीन पर तत्व जोड़ता है।

@Composable
fun ProfileCard(name: String, avatarUrl: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        colors = CardDefaults.cardColors(
            containerColor = MaterialTheme.colorScheme.surface
        )
    ) {
        Row(verticalAlignment = Alignment.CenterVertically) {
            AsyncImage(
                model = avatarUrl,
                contentDescription = "अवतार",
                modifier = Modifier.size(48.dp).clip(CircleShape)
            )
            Spacer(Modifier.width(12.dp))
            Text(
                text = name,
                style = MaterialTheme.typography.titleMedium
            )
        }
    }
}

ProfileCard फ़ंक्शन पैरामीटर (name, avatarUrl) लेता है और Card → Row → AsyncImage + Text उत्सर्जित करता है। कम्पोज़िशन एक ही पास में उत्सर्जित घटकों का पेड़ है। यदि पैरामीटर नहीं बदले हैं, तो Compose फ़ंक्शन कॉल को छोड़ देता है (recomposition skip)। यदि केवल name बदला है, तो केवल Text कॉल किया जाएगा, शेष तत्व पुनः चित्रित नहीं होंगे। यह बुद्धिमान पुनर्संयोजन मैन्युअल View System ऑप्टिमाइज़ेशन पर Compose का मुख्य प्रदर्शन लाभ है।

स्लॉट और Content Lambda

Composable फ़ंक्शन सक्रिय रूप से स्लॉट का उपयोग करते हैं — ट्रेलिंग लैम्ब्डा, content: @Composable (() -> Unit)। यह कंटेनर बनाने की अनुमति देता है: Card, Column, Row content लैम्ब्डा स्वीकार करते हैं, और सामग्री स्लॉट में एम्बेड हो जाती है। Slot API ने android:layout_gravity जैसी XML विशेषताओं को बदल दिया — अब चाइल्ड तत्वों की स्थिति कंटेंट ब्लॉक के अंदर Kotlin कोड द्वारा सेट की जाती है।

Compose में स्थिति प्रबंधन

Compose में स्थिति (State) कोई भी मान है जो समय के साथ बदल सकता है। जब स्थिति बदलती है, तो Compose इस स्थिति को पढ़ने वाले सभी घटकों के लिए पुनर्संयोजन निर्धारित करता है। तंत्र React hooks जैसा दिखता है: mutableStateOf MutableState<T> लौटाता है, .value पढ़ना स्वचालित रूप से वर्तमान कम्पोज़िशन को परिवर्तनों की सदस्यता देता है।

@Composable
fun CounterExample() {
    var count by remember { mutableStateOf(0) }

    Column(modifier = Modifier.padding(16.dp)) {
        Text("क्लिक किया: $count")
        Button(onClick = { count++ }) {
            Text("बढ़ाएँ")
        }
    }
}

@Composable
fun UserScreen(viewModel: UserViewModel) {
    val userName by viewModel.userName.collectAsState()
    Text("उपयोगकर्ता: $userName")
}

remember पुनर्संयोजनों के बीच मान को संरक्षित करता है — अन्यथा प्रत्येक UI अपडेट पर mutableStateOf नया बनाया जाएगा। collectAsState() ViewModel से StateFlow को Compose-संगत स्थिति में परिवर्तित करता है। अनुशंसा — स्क्रीन-स्तरीय स्थिति के लिए ViewModel के साथ StateFlow का उपयोग करें, और स्थानीय स्थिति (जैसे विस्तारित कार्ड) के लिए mutableStateOf का। यह विभाजन स्मार्ट/डम्ब घटक सिद्धांत का पालन करता है।

State Hoisting

State Hoisting बाल घटक से मूल घटक में स्थिति को ऊपर उठाने का पैटर्न है। मूल पैरामीटर के माध्यम से मान और कॉलबैक पास करता है, बाल परिवर्तन पर कॉलबैक कॉल करता है। मूल mutableStateOf रखता है, बाल केवल पैरामीटर रखता है। यह घटक को पुन: प्रयोज्य और परीक्षण योग्य बनाता है: उसी TextField का उपयोग किसी भी डेटा स्रोत के साथ किया जा सकता है।

Modifier — दृश्य स्वरूप अनुकूलन

Modifier एक ऑब्जेक्ट है जो Composable परिवर्तनों का वर्णन करता है: आकार, पैडिंग, पृष्ठभूमि, क्लिक हैंडलिंग, एनिमेशन, स्क्रॉल। मॉडिफ़ायर कॉल श्रृंखला के माध्यम से लागू किए जाते हैं: Modifier.fillMaxWidth().padding(16.dp).background(Color.Blue).clickable { }. प्रत्येक कॉल जोड़ी गई संपत्ति के साथ एक नया Modifier लौटाता है — मूल ऑब्जेक्ट का कोई उत्परिवर्तन नहीं।

मॉडिफ़ायर का क्रम महत्वपूर्ण है। Modifier.padding(16.dp).background(Color.Blue) पैडिंग वाले क्षेत्र को रंगता है। Modifier.background(Color.Blue).padding(16.dp) आंतरिक आयत को रंगता है, और पैडिंग पारदर्शी रहती है। यांत्रिकी CSS बॉक्स मॉडल जैसी है: पहले padding → background margin + background की तरह काम करता है; पहले background → padding background + आंतरिक पैडिंग की तरह काम करता है। डेवलपर को बस याद रखना होगा: पहले padding = बाहरी मार्जिन, बाद में padding = आंतरिक पैडिंग।

कस्टम मॉडिफ़ायर

यदि अंतर्निहित मॉडिफ़ायर पर्याप्त नहीं हैं, तो Modifier.composed { ... } या Modifier.then() के माध्यम से कस्टम मॉडिफ़ायर बनाया जाता है। कस्टम मॉडिफ़ायर के अंदर, लेआउट माप (Modifier.layout { measurable, constraints -> ... }), ड्रॉइंग (Modifier.drawWithContent { ... }), जेस्चर (Modifier.pointerInput { ... }) का उपयोग किया जा सकता है। उदाहरण: क्लिक पर स्पंदन एनिमेशन के लिए मॉडिफ़ायर — आकार मापता है, क्लिक पर animateFloatAsState के माध्यम से स्केल एनिमेशन शुरू करता है।

एनिमेशन के लिए, Compose animate*AsState (animateFloatAsState, animateColorAsState, animateDpAsState) प्रदान करता है — परिवर्तन पर मान पुरानी और नई स्थिति के बीच एनिमेट होते हैं। प्रवेश/निकास एनिमेशन के लिए — AnimatedVisibility और AnimatedContent अंतर्निहित संक्रमणों (fade, slide, expand) के साथ। सभी एनिमेशन ग्राफ़िक्स लेयर पर काम करते हैं, अनावश्यक कम्पोज़िशन ट्रिगर नहीं करते।

Side Effects: LaunchedEffect, DisposableEffect, remember

Composable फ़ंक्शन को सीधे साइड इफ़ेक्ट (नेटवर्क अनुरोध, टाइमर, सब्सक्रिप्शन) नहीं करने चाहिए — वे प्रत्येक पुनर्संयोजन पर कॉल किए जाते हैं, जिससे डुप्लिकेट अनुरोध होंगे। साइड इफ़ेक्ट के लिए, Compose Effect फ़ंक्शन का परिवार प्रदान करता है: LaunchedEffect कम्पोज़िशन में प्रवेश पर कोरूटीन शुरू करता है और बाहर निकलने पर रद्द करता है, DisposableEffect — उन संसाधनों के लिए जिन्हें स्पष्ट सफ़ाई की आवश्यकता है (सेंसर, BroadcastReceiver)।

@Composable
fun SensorReader() {
    val context = LocalContext.current
    var sensorValue by remember { mutableStateOf(0f) }

    DisposableEffect(Unit) {
        val sensor = registerSensorListener(context) { value ->
            sensorValue = value
        }
        onDispose {
            unregisterSensorListener(sensor)
        }
    }

    Text("मान: $sensorValue")
}

@Composable
fun UserGreeting(userId: String) {
    LaunchedEffect(userId) {
        val profile = api.fetchProfile(userId)
        // स्थिति अद्यतन
    }
}

LaunchedEffect(userId) पुनः शुरू होता है यदि userId बदलता है — पिछला कोरूटीन रद्द हो जाता है, नया userId के साथ नया शुरू होता है। यह मैन्युअल अनुरोध रद्दीकरण प्रबंधन को समाप्त करता है। DisposableEffect(Unit) — एक निश्चित कुंजी Unit वाला इफ़ेक्ट, कम्पोज़िशन में प्रवेश पर फायर होता है और बाहर निकलने पर onDispose कॉल करता है। SensorReader लिसनर रजिस्टर करता है और स्क्रीन छोड़ने पर अनसब्सक्राइब करता है — लीक के जोखिम के बिना।

rememberCoroutineScope

यदि कोरूटीन को कम्पोज़िशन में प्रवेश पर नहीं बल्कि किसी घटना (बटन क्लिक) पर शुरू करने की आवश्यकता है, तो rememberCoroutineScope() का उपयोग करें। यह Composable जीवनचक्र से बंधा CoroutineScope लौटाता है, जिसमें DisposableEffect की आवश्यकता नहीं है। उदाहरण: बटन क्लिक पर नेटवर्क अनुरोध शुरू करना — scope.launch { viewModel.loadData() }.

Jetpack Compose बनाम View System: तुलना

Compose और View System के बीच चुनाव 2026 में Android डेवलपर्स के लिए मुख्य आर्किटेक्चरल प्रश्न है। दोनों प्रौद्योगिकियाँ Google द्वारा समर्थित हैं, लेकिन Compose मुख्य दिशा है जिस पर Google संसाधन खर्च करता है। View System केवल महत्वपूर्ण सुधार प्राप्त करता है और विकसित नहीं हो रहा है। अंतर सिंटैक्स, स्थिति प्रबंधन, प्रदर्शन और विकास समय में प्रकट होता है।

नई परियोजनाओं के लिए, Google Jetpack Compose को UI विकास के मानक के रूप में अनुशंसित करता है। View System 2021 से पहले लिखे कोड को बनाए रखने और उन मामलों के लिए बना हुआ है जहाँ न्यूनतम APK आकार महत्वपूर्ण है (उदाहरण के लिए, प्रवेश स्तर के उपकरणों वाले उभरते बाजारों के लिए)। Compose अपने घोषणात्मक सिंटैक्स और अंतर्निहित एनिमेशन के कारण View System की तुलना में UI कोड की मात्रा को 30–50% तक कम करता है।