Compose के साथ बेहतर अनुभव पाने के लिए, Android फ़ोन नंबर Studio. इसमें स्मार्ट एडिटर की कई सुविधाएं शामिल हैं, जैसे कि नया प्रोजेक्ट टेंप्लेट के साथ-साथ आपके कंपोज़ यूज़र इंटरफ़ेस (यूआई) और ऐनिमेशन की तुरंत झलक देखने की सुविधा भी मिलती है.
नया Compose ऐप्लिकेशन प्रोजेक्ट बनाने और सेट अप करने के लिए इन निर्देशों का पालन करें किसी मौजूदा ऐप्लिकेशन प्रोजेक्ट के लिए लिखें या Compose में लिखे गए सैंपल ऐप्लिकेशन को इंपोर्ट करें.
Compose की सुविधा का इस्तेमाल करके नया ऐप्लिकेशन बनाएं
अगर आपको ऐसा नया प्रोजेक्ट शुरू करना है जिसमें Compose की सुविधा डिफ़ॉल्ट रूप से शामिल हो, तो Android Studio में कई प्रोजेक्ट टेंप्लेट मौजूद हैं, जिनसे आपको शुरुआत करने में मदद मिलती है. यहां की यात्रा पर हूं एक ऐसा नया प्रोजेक्ट बनाएं जिसमें Compose का सेटअप सही तरीके से किया गया हो, इस तरह आगे बढ़ें:
- अगर आप Android Studio में आपका स्वागत है विंडो में हैं, तो नया शुरू करें Android Studio प्रोजेक्ट. अगर आपके पास पहले से ही Android Studio प्रोजेक्ट खुला हुआ है, तो फ़ाइल > चुनें नया > नया प्रोजेक्ट चुनें.
- प्रोजेक्ट टेंप्लेट चुनें विंडो में, खाली करें गतिविधि पर जाएं और आगे बढ़ें पर क्लिक करें.
- अपना प्रोजेक्ट कॉन्फ़िगर करें विंडो में, ये काम करें:
- नाम, पैकेज का नाम, और जगह की जानकारी सेव करें को सामान्य तरीके से सेट करें करते. ध्यान दें कि भाषा ड्रॉपडाउन मेन्यू में, Kotlin विकल्प उपलब्ध है, क्योंकि Jetpack Compose सिर्फ़ इन क्लास में काम करती है Kotlin.
- कम से कम एपीआई लेवल ड्रॉपडाउन मेन्यू में, एपीआई लेवल 21 या उसके बाद के लेवल को चुनें.
- पूरा करें पर क्लिक करें.
अब आप Jetpack Compose का इस्तेमाल करके ऐप्लिकेशन डेवलप करने के लिए तैयार हैं. आपकी मदद करने के लिए शुरू करें और जानें कि टूलकिट की मदद से क्या-क्या किया जा सकता है. इसके लिए, Jetpack आज़माएं लिखने का ट्यूटोरियल.
किसी मौजूदा ऐप्लिकेशन के लिए, कंपोज़ की सुविधा सेट अप करना
सबसे पहले, Compose का इस्तेमाल करके कंपोज़ कंपाइलर को कॉन्फ़िगर करें कंपाइलर Gradle प्लग इन.
इसके बाद, अपने ऐप्लिकेशन की build.gradle
फ़ाइल में यह परिभाषा जोड़ें:
ग्रूवी
android {
buildFeatures {
compose true
}
}
Kotlin
android {
buildFeatures {
compose = true
}
}
Android BuildFeatures
में compose
फ़्लैग को true
पर सेट करना
ब्लॉक, Android Studio में लिखें सुविधा को चालू करता है.
आखिर में, Compose BOM और Compose लाइब्रेरी डिपेंडेंसी का सबसेट जोड़ें तो आपको नीचे दिए गए ब्लॉक से अपनी डिपेंडेंसी का इस्तेमाल करना होगा:
ग्रूवी
dependencies {
def composeBom = platform('androidx.compose:compose-bom:2024.06.00')
implementation composeBom
androidTestImplementation composeBom
// Choose one of the following:
// Material Design 3
implementation 'androidx.compose.material3:material3'
// or Material Design 2
implementation 'androidx.compose.material:material'
// or skip Material Design and build directly on top of foundational components
implementation 'androidx.compose.foundation:foundation'
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation 'androidx.compose.ui:ui'
// Android Studio Preview support
implementation 'androidx.compose.ui:ui-tooling-preview'
debugImplementation 'androidx.compose.ui:ui-tooling'
// UI Tests
androidTestImplementation 'androidx.compose.ui:ui-test-junit4'
debugImplementation 'androidx.compose.ui:ui-test-manifest'
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation 'androidx.compose.material:material-icons-core'
// Optional - Add full set of material icons
implementation 'androidx.compose.material:material-icons-extended'
// Optional - Add window size utils
implementation 'androidx.compose.material3:material3-window-size-class'
// Optional - Integration with activities
implementation 'androidx.activity:activity-compose:1.9.0'
// Optional - Integration with ViewModels
implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1'
// Optional - Integration with LiveData
implementation 'androidx.compose.runtime:runtime-livedata'
// Optional - Integration with RxJava
implementation 'androidx.compose.runtime:runtime-rxjava2'
}
Kotlin
dependencies {
val composeBom = platform("androidx.compose:compose-bom:2024.06.00")
implementation(composeBom)
androidTestImplementation(composeBom)
// Choose one of the following:
// Material Design 3
implementation("androidx.compose.material3:material3")
// or Material Design 2
implementation("androidx.compose.material:material")
// or skip Material Design and build directly on top of foundational components
implementation("androidx.compose.foundation:foundation")
// or only import the main APIs for the underlying toolkit systems,
// such as input and measurement/layout
implementation("androidx.compose.ui:ui")
// Android Studio Preview support
implementation("androidx.compose.ui:ui-tooling-preview")
debugImplementation("androidx.compose.ui:ui-tooling")
// UI Tests
androidTestImplementation("androidx.compose.ui:ui-test-junit4")
debugImplementation("androidx.compose.ui:ui-test-manifest")
// Optional - Included automatically by material, only add when you need
// the icons but not the material library (e.g. when using Material3 or a
// custom design system based on Foundation)
implementation("androidx.compose.material:material-icons-core")
// Optional - Add full set of material icons
implementation("androidx.compose.material:material-icons-extended")
// Optional - Add window size utils
implementation("androidx.compose.material3:material3-window-size-class")
// Optional - Integration with activities
implementation("androidx.activity:activity-compose:1.9.0")
// Optional - Integration with ViewModels
implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.6.1")
// Optional - Integration with LiveData
implementation("androidx.compose.runtime:runtime-livedata")
// Optional - Integration with RxJava
implementation("androidx.compose.runtime:runtime-rxjava2")
}
Jetpack Compose के सैंपल ऐप्लिकेशन आज़माएं
Jetpack Compose की सुविधाओं के साथ तेज़ी से एक्सपेरिमेंट करने के लिए: GitHub पर होस्ट किए गए, Jetpack Compose के सैंपल ऐप्लिकेशन आज़माए जा रहे हैं. इंपोर्ट करने के लिए Android Studio से ऐप्लिकेशन प्रोजेक्ट का सैंपल डाउनलोड करें. इसके लिए, यहां दिया गया तरीका अपनाएं:
- अगर आप Android Studio में आपका स्वागत है विंडो में हैं, तो इंपोर्ट करें Android के लिए कोड सैंपल. अगर आपके पास पहले से ही Android Studio प्रोजेक्ट खुला हुआ है, तो फ़ाइल > चुनें नया > मेन्यू बार से सैंपल इंपोर्ट करें.
- सैंपल ब्राउज़ करें विज़र्ड के ऊपरी हिस्से के पास मौजूद खोज बार में, "लिखें".
- खोज के नतीजों में से, Jetpack Compose का कोई सैंपल ऐप्लिकेशन चुनें और आगे बढ़ें पर क्लिक करें.
- ऐप्लिकेशन का नाम और प्रोजेक्ट की जगह बदलें या डिफ़ॉल्ट वैल्यू.
- पूरा करें पर क्लिक करें.
Android Studio, आपके बताए गए पाथ पर सैंपल ऐप्लिकेशन डाउनलोड करेगा. इसके बाद,
प्रोजेक्ट. इसके बाद, हर उदाहरण में MainActivity.kt
की जांच करके, यह देखा जा सकता है
Jetpack Compose के एपीआई, जैसे कि क्रॉसफ़ेड ऐनिमेशन, कस्टम कॉम्पोनेंट, और
टाइपोग्राफ़ी, और इन-IDE झलक में हल्के और गहरे रंग दिखाएं.
अगर आपको Wear OS के लिए Jetpack Compose का इस्तेमाल करना है, तो Wear OS पर Jetpack Compose की सुविधा सेट अप करना लेख पढ़ें.
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose की मदद से नेविगेट करना
- Compose के लेआउट की जांच करना
- फ़ोकस करने के लिए प्रतिक्रिया दें