Jetpack Compose Kotlin: पूर्ण गाइड उदाहरण सहित

Jetpack Compose क्या है और इसकी आवश्यकता क्यों है?

Jetpack Compose, Google द्वारा विकसित Android के लिए यूज़र इंटरफ़ेस (UI) बनाने का एक आधुनिक टूलसेट है। पारंपरिक XML-लेआउट और View-सिस्टम के विपरीत, Compose डिक्लेरेटिव दृष्टिकोण का उपयोग करता है। इसका मतलब है कि आप यह बताते हैं कि UI को डेटा की प्रत्येक अवस्था में कैसा दिखना चाहिए, न कि इसे बदलने के लिए चरणों का क्रम।

Jetpack Compose के मुख्य लाभ:

• डिक्लेरेटिव: आप UI को स्टेट के फंक्शन के रूप में वर्णित करते हैं। जब स्टेट बदलता है, Compose स्वचालित रूप से केवल उन UI भागों को फिर से रेंडर करता है जो बदले हैं।
• कम कोड: XML + View की तुलना में, Compose कोड आमतौर पर छोटा और अधिक पठनीय होता है।
• सहजता: Kotlin भाषा का उपयोग करता है, जो Android डेवलपर्स के लिए कोड को अधिक स्वाभाविक बनाता है।
• प्रदर्शन: Compose नई Android आर्किटेक्चर के साथ काम करने के लिए अनुकूलित है और री-रेंडरिंग को कम करता है।
• संगतता: Compose को मौजूदा प्रोजेक्ट्स में धीरे-धीरे शामिल किया जा सकता है, पारंपरिक View के साथ इसका उपयोग करके।

Jetpack Compose सिर्फ एक लाइब्रेरी नहीं है, बल्कि एक संपूर्ण इकोसिस्टम है जिसमें एनिमेशन, नेविगेशन, टेस्टिंग और बहुत कुछ के लिए टूल शामिल हैं। यह Android डेवलपमेंट का भविष्य है, और Google सक्रिय रूप से इस पर स्विच करने की सलाह देता है।

Jetpack Compose की स्थापना (इंस्टॉलेशन)

चूंकि Jetpack Compose Android के लिए एक लाइब्रेरी है, इसे pip (Python) या npm (JavaScript) के माध्यम से स्थापित नहीं किया जाता है। इसके बजाय, इसे Gradle बिल्ड सिस्टम के माध्यम से Android प्रोजेक्ट में जोड़ा जाता है। यहाँ चरण-दर-चरण निर्देश दिए गए हैं:

1. Android Studio में प्रोजेक्ट सेटअप

"Empty Compose Activity" टेम्पलेट चुनकर एक नया Android प्रोजेक्ट बनाएं। Android Studio स्वचालित रूप से सभी आवश्यक डिपेंडेंसी सेट कर देगा।

2. मैन्युअल सेटअप (यदि प्रोजेक्ट पहले से मौजूद है)

build.gradle.kts फ़ाइल (प्रोजेक्ट स्तर पर) खोलें और सुनिश्चित करें कि plugins ब्लॉक में यह है:

plugins {
    id("com.android.application") version "8.2.0" apply false
    id("org.jetbrains.kotlin.android") version "1.9.20" apply false
}

फिर build.gradle.kts फ़ाइल (मॉड्यूल स्तर पर, आमतौर पर app) खोलें और यह जोड़ें:

plugins {
    id("com.android.application")
    id("org.jetbrains.kotlin.android")
}

android {
    namespace = "com.example.myapp"
    compileSdk = 34

    defaultConfig {
        applicationId = "com.example.myapp"
        minSdk = 24
        targetSdk = 34
        versionCode = 1
        versionName = "1.0"
    }

    buildFeatures {
        compose = true
    }

    composeOptions {
        kotlinCompilerExtensionVersion = "1.5.5"
    }

    kotlinOptions {
        jvmTarget = "17"
    }
}

dependencies {
    implementation(platform("androidx.compose:compose-bom:2024.01.00"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-graphics")
    implementation("androidx.compose.ui:ui-tooling-preview")
    implementation("androidx.compose.material3:material3")
    implementation("androidx.activity:activity-compose:1.8.2")
    debugImplementation("androidx.compose.ui:ui-tooling")
    debugImplementation("androidx.compose.ui:ui-test-manifest")
}

Gradle को सिंक करने के बाद, आप Jetpack Compose का उपयोग शुरू कर सकते हैं।

कोड उदाहरण के साथ त्वरित शुरुआत

शुरू करने का सबसे आसान तरीका "Hello, World!" टेक्स्ट वाली स्क्रीन बनाना है। इसके लिए, अपनी Activity (या किसी अन्य स्थान जहाँ आप Compose का उपयोग करते हैं) में setContent फंक्शन को कॉल करें:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material3.Text
import androidx.compose.found