लिखें और अन्य लाइब्रेरी

Compose में अपनी पसंदीदा लाइब्रेरी इस्तेमाल की जा सकती हैं. इस सेक्शन में, सबसे ज़्यादा काम आने वाली कुछ लाइब्रेरी को शामिल करने का तरीका बताया गया है.

गतिविधि

किसी गतिविधि में Compose का इस्तेमाल करने के लिए, आपको ComponentActivity का इस्तेमाल करना होगा. यह Activity की एक सबक्लास है. यह Compose को सही LifecycleOwner और कॉम्पोनेंट उपलब्ध कराती है. यह कुछ और एपीआई भी उपलब्ध कराता है. इनकी मदद से, आपके कोड को गतिविधि क्लास में मौजूद ओवरराइडिंग के तरीकों से अलग किया जा सकता है. Activity Compose इन एपीआई को कंपोज़ेबल के लिए उपलब्ध कराता है, ताकि कंपोज़ेबल के बाहर के तरीकों को ओवरराइड करने या Activity का कोई खास इंस्टेंस वापस पाने की ज़रूरत न पड़े. इसके अलावा, ये एपीआई यह पक्का करते हैं कि इन्हें सिर्फ़ एक बार शुरू किया जाए. साथ ही, ये रीकंपोज़िशन के दौरान बने रहते हैं. अगर कंपोज़ेबल को कंपोज़िशन से हटा दिया जाता है, तो ये एपीआई सही तरीके से बंद हो जाते हैं.

गतिविधि का नतीजा

rememberLauncherForActivityResult() API की मदद से, कंपोज़ेबल में किसी गतिविधि का नतीजा पाया जा सकता है:

@Composable
fun GetContentExample() {
    var imageUri by remember { mutableStateOf<Uri?>(null) }
    val launcher = rememberLauncherForActivityResult(ActivityResultContracts.GetContent()) { uri: Uri? ->
        imageUri = uri
    }
    Column {
        Button(onClick = { launcher.launch("image/*") }) {
            Text(text = "Load Image")
        }
        Image(
            painter = rememberAsyncImagePainter(imageUri),
            contentDescription = "My Image"
        )
    }
}
ComposeWithOtherLibraries.kt

इस उदाहरण में, एक सामान्य GetContent() अनुबंध दिखाया गया है. इस बटन पर टैप करने से अनुरोध लॉन्च हो जाता है. उपयोगकर्ता के इमेज चुनने और लॉन्चिंग गतिविधि पर वापस आने के बाद, rememberLauncherForActivityResult() के लिए ट्रेलिंग लैम्डा को लागू किया जाता है. इससे Coil के rememberImagePainter() फ़ंक्शन का इस्तेमाल करके, चुनी गई इमेज लोड होती है.

ActivityResultContract की किसी भी सबक्लास का इस्तेमाल, rememberLauncherForActivityResult() के पहले आर्ग्युमेंट के तौर पर किया जा सकता है. इसका मतलब है कि इस तकनीक का इस्तेमाल, फ़्रेमवर्क और अन्य सामान्य पैटर्न से कॉन्टेंट का अनुरोध करने के लिए किया जा सकता है. आपके पास अपने कस्टम अनुबंध बनाने और इस तकनीक के साथ उनका इस्तेमाल करने का विकल्प भी है.

रनटाइम अनुमतियों का अनुरोध करना

ऊपर बताए गए Activity Result API और rememberLauncherForActivityResult() का इस्तेमाल करके, RequestPermission कॉन्ट्रैक्ट का इस्तेमाल करके किसी एक अनुमति के लिए या RequestMultiplePermissions कॉन्ट्रैक्ट का इस्तेमाल करके एक से ज़्यादा अनुमतियों के लिए, रनटाइम अनुमतियों का अनुरोध किया जा सकता है.

Accompanist Permissions library का इस्तेमाल, इन एपीआई के ऊपर एक लेयर के तौर पर भी किया जा सकता है. इससे, अनुमतियों के लिए मौजूदा स्थिति को ऐसे स्टेट में मैप किया जा सकता है जिसका इस्तेमाल Compose UI कर सकता है.

सिस्टम के 'वापस जाएं' बटन को हैंडल करना

अपने कंपोज़ेबल में, कस्टम बैक नेविगेशन उपलब्ध कराने और सिस्टम के बैक बटन के डिफ़ॉल्ट व्यवहार को बदलने के लिए, आपका कंपोज़ेबल उस इवेंट को इंटरसेप्ट करने के लिए BackHandler का इस्तेमाल कर सकता है:

var backHandlingEnabled by remember { mutableStateOf(true) }
BackHandler(backHandlingEnabled) {
    // Handle back press
}
ComposeWithOtherLibraries.kt

पहले आर्ग्युमेंट से यह कंट्रोल किया जाता है कि BackHandler फ़िलहाल चालू है या नहीं. इस आर्ग्युमेंट का इस्तेमाल करके, अपने हैंडलर को कुछ समय के लिए बंद किया जा सकता है. ऐसा आपके कॉम्पोनेंट की स्थिति के आधार पर किया जा सकता है. अगर उपयोगकर्ता, सिस्टम के बैक इवेंट को ट्रिगर करता है और BackHandler चालू है, तो ट्रेलिंग लैम्डा को शुरू किया जाएगा.

ViewModel

Architecture Components ViewModel लाइब्रेरी का इस्तेमाल करने पर, viewModel() फ़ंक्शन को कॉल करके, किसी भी कंपोज़ेबल से ViewModel को ऐक्सेस किया जा सकता है. अपनी Gradle फ़ाइल में यह डिपेंडेंसी जोड़ें:

Groovy

dependencies {
    implementation 'androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5'
}

Kotlin

dependencies {
    implementation("androidx.lifecycle:lifecycle-viewmodel-compose:2.8.5")
}

इसके बाद, अपने कोड में viewModel() फ़ंक्शन का इस्तेमाल किया जा सकता है.

class MyViewModel : ViewModel() { /*...*/ }

// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    viewModel: MyViewModel = viewModel()
) {
    // use viewModel here
}
ComposeWithOtherLibraries.kt

viewModel(), किसी मौजूदा ViewModel को दिखाता है या नया ViewModel बनाता है. डिफ़ॉल्ट रूप से, ViewModel को शामिल करने वाली ऐक्टिविटी, फ़्रैगमेंट या नेविगेशन डेस्टिनेशन के दायरे में रखा जाता है. साथ ही, इसे तब तक सेव रखा जाता है, जब तक स्कोप चालू रहता है.

उदाहरण के लिए, अगर कंपोज़ेबल का इस्तेमाल किसी गतिविधि में किया जाता है, तो viewModel() गतिविधि खत्म होने या प्रोसेस बंद होने तक एक ही इंस्टेंस दिखाता है.

class MyViewModel : ViewModel() { /*...*/ }
// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    // Returns the same instance as long as the activity is alive,
    // just as if you grabbed the instance from an Activity or Fragment
    viewModel: MyViewModel = viewModel()
) { /* ... */ }

@Composable
fun MyScreen2(
    viewModel: MyViewModel = viewModel() // Same instance as in MyScreen
) { /* ... */ }
ComposeWithOtherLibraries.kt

इस्तेमाल करने के लिए दिशा-निर्देश

आम तौर पर, ViewModel इंस्टेंस को स्क्रीन-लेवल कंपोज़ेबल पर ऐक्सेस किया जाता है. इसका मतलब है कि इन्हें ऐक्टिविटी, फ़्रैगमेंट या नेविगेशन ग्राफ़ के डेस्टिनेशन से कॉल किए गए रूट कंपोज़ेबल के पास ऐक्सेस किया जाता है. ऐसा इसलिए है, क्योंकि ViewModels डिफ़ॉल्ट रूप से, उन स्क्रीन लेवल ऑब्जेक्ट के लिए स्कोप किए जाते हैं. a ViewModel's लाइफ़साइकल और स्कोप के बारे में यहां ज़्यादा जानें.

ViewModel इंस्टेंस को अन्य कंपोज़ेबल में पास करने से बचें. इससे उन कंपोज़ेबल की टेस्टिंग करना ज़्यादा मुश्किल हो सकता है. साथ ही, प्रीव्यू काम नहीं कर सकते. इसके बजाय, उन्हें सिर्फ़ वह डेटा और फ़ंक्शन पैरामीटर के तौर पर पास करें जिनकी उन्हें ज़रूरत है.

सब स्क्रीन-लेवल कंपोज़ेबल के लिए, ViewModel इंस्टेंस का इस्तेमाल करके स्टेट मैनेज की जा सकती है. हालांकि, ViewModel के लाइफ़साइकल और स्कोप के बारे में पता होना चाहिए. अगर कंपोज़ेबल में सभी ज़रूरी चीज़ें शामिल हैं, तो Hilt का इस्तेमाल करके ViewModel को इंजेक्ट किया जा सकता है. इससे पैरंट कंपोज़ेबल से डिपेंडेंसी पास करने की ज़रूरत नहीं पड़ती.

अगर आपका ViewModel डाइमेंशन, दूसरे आइटम पर निर्भर करता है, तो viewModel() डाइमेंशन, पैरामीटर के तौर पर ViewModelProvider.Factory को लेता है. हालांकि, यह पैरामीटर वैकल्पिक होता है.

Compose में ViewModel के बारे में ज़्यादा जानकारी पाने के लिए, इंटरऑपरेबिलिटी के दस्तावेज़ देखें. साथ ही, यह भी जानें कि नेविगेशन कंपोज़ लाइब्रेरी, गतिविधियों, और फ़्रैगमेंट के साथ इंस्टेंस का इस्तेमाल कैसे किया जाता है.

डेटा स्ट्रीम

Compose में, Android के सबसे लोकप्रिय स्ट्रीम-आधारित समाधानों के लिए एक्सटेंशन शामिल हैं. इनमें से हर एक्सटेंशन, अलग-अलग आर्टफ़ैक्ट से मिलता है:

  • LiveData.observeAsState(), androidx.compose.runtime:runtime-livedata:$composeVersion आर्टफ़ैक्ट में शामिल है.
  • Flow.collectAsState() के लिए, किसी अन्य डिपेंडेंसी की ज़रूरत नहीं होती.
  • androidx.compose.runtime:runtime-rxjava2:$composeVersion या androidx.compose.runtime:runtime-rxjava3:$composeVersion आर्टफ़ैक्ट में शामिल किया गया हो.Observable.subscribeAsState()

ये आर्टफ़ैक्ट, लिसनर के तौर पर रजिस्टर होते हैं और वैल्यू को State के तौर पर दिखाते हैं. जब भी कोई नई वैल्यू मिलती है, तब Compose, यूज़र इंटरफ़ेस (यूआई) के उन हिस्सों को फिर से कंपोज़ करता है जहां उस state.value का इस्तेमाल किया जाता है. उदाहरण के लिए, इस कोड में ShowData, हर बार exampleLiveData के नई वैल्यू देने पर फिर से कंपोज़ होता है.

// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    viewModel: MyViewModel = viewModel()
) {
    val dataExample = viewModel.exampleLiveData.observeAsState()

    // Because the state is read here,
    // MyScreen recomposes whenever dataExample changes.
    dataExample.value?.let {
        ShowData(dataExample)
    }
}
ComposeWithOtherLibraries.kt

Compose में एसिंक्रोनस कार्रवाइयां

Jetpack Compose की मदद से, कंपोज़ेबल के अंदर कोरूटीन का इस्तेमाल करके एसिंक्रोनस ऑपरेशन किए जा सकते हैं.

ज़्यादा जानकारी के लिए, साइड इफ़ेक्ट से जुड़े दस्तावेज़ में LaunchedEffect, produceState, और rememberCoroutineScope एपीआई देखें.

नेविगेशन कॉम्पोनेंट, Jetpack Compose ऐप्लिकेशन के साथ काम करता है. ज़्यादा जानकारी के लिए, Compose का इस्तेमाल करके नेविगेट करना और Jetpack Navigation को Navigation Compose पर माइग्रेट करना लेख पढ़ें.

Hilt

Android ऐप्लिकेशन में डिपेंडेंसी इंजेक्शन के लिए, Hilt का इस्तेमाल करने का सुझाव दिया जाता है. यह Compose के साथ आसानी से काम करता है.

ViewModel सेक्शन में बताया गया viewModel() फ़ंक्शन, @HiltViewModel एनोटेशन की मदद से Hilt के बनाए गए ViewModel का इस्तेमाल अपने-आप करता है. हमने Hilt के ViewModel इंटिग्रेशन के बारे में जानकारी देने वाला दस्तावेज़ उपलब्ध कराया है.

@HiltViewModel
class MyViewModel @Inject constructor(
    private val savedStateHandle: SavedStateHandle,
    private val repository: ExampleRepository
) : ViewModel() { /* ... */ }

// import androidx.lifecycle.viewmodel.compose.viewModel
@Composable
fun MyScreen(
    viewModel: MyViewModel = viewModel()
) { /* ... */ }

ComposeWithOtherLibraries.kt

Hilt और नेविगेशन

Hilt, Navigation Compose लाइब्रेरी के साथ भी इंटिग्रेट होता है. अपनी Gradle फ़ाइल में, यहां दी गई अतिरिक्त डिपेंडेंसी जोड़ें:

Groovy

dependencies {
    implementation 'androidx.hilt:hilt-navigation-compose:1.2.0'
}

Kotlin

dependencies {
    implementation("androidx.hilt:hilt-navigation-compose:1.2.0")
}

Navigation Compose का इस्तेमाल करते समय, अपने @HiltViewModel एनोटेट किए गए ViewModel का इंस्टेंस पाने के लिए, हमेशा hiltViewModel कंपोज़ेबल फ़ंक्शन का इस्तेमाल करें. यह @AndroidEntryPoint के साथ एनोटेट किए गए फ़्रैगमेंट या गतिविधियों के साथ काम करता है.

उदाहरण के लिए, अगर ExampleScreen नेविगेशन ग्राफ़ में कोई डेस्टिनेशन है, तो ExampleViewModel के स्कोप किए गए इंस्टेंस को पाने के लिए hiltViewModel() को कॉल करें. यह इंस्टेंस, डेस्टिनेशन के लिए स्कोप किया गया है. इसे नीचे दिए गए कोड स्निपेट में दिखाया गया है:

// import androidx.hilt.navigation.compose.hiltViewModel

@Composable
fun MyApp() {
    val navController = rememberNavController()
    val startRoute = "example"
    NavHost(navController, startDestination = startRoute) {
        composable("example") { backStackEntry ->
            // Creates a ViewModel from the current BackStackEntry
            // Available in the androidx.hilt:hilt-navigation-compose artifact
            val viewModel = hiltViewModel<MyViewModel>()
            MyScreen(viewModel)
        }
        /* ... */
    }
}
ComposeWithOtherLibraries.kt

अगर आपको ViewModel का वह इंस्टेंस वापस पाना है जो नेविगेशन रूट या नेविगेशन ग्राफ़ के स्कोप में है, तो hiltViewModel कंपोज़ेबल फ़ंक्शन का इस्तेमाल करें. साथ ही, पैरामीटर के तौर पर उससे जुड़ा backStackEntry पास करें:

// import androidx.hilt.navigation.compose.hiltViewModel
// import androidx.navigation.compose.getBackStackEntry

@Composable
fun MyApp() {
    val navController = rememberNavController()
    val startRoute = "example"
    val innerStartRoute = "exampleWithRoute"
    NavHost(navController, startDestination = startRoute) {
        navigation(startDestination = innerStartRoute, route = "Parent") {
            // ...
            composable("exampleWithRoute") { backStackEntry ->
                val parentEntry = remember(backStackEntry) {
                    navController.getBackStackEntry("Parent")
                }
                val parentViewModel = hiltViewModel<ParentViewModel>(parentEntry)
                ExampleWithRouteScreen(parentViewModel)
            }
        }
    }
}
ComposeWithOtherLibraries.kt

पृष्ठांकन

Paging library की मदद से, डेटा को धीरे-धीरे लोड करना आसान हो जाता है. साथ ही, यह Compose में काम करती है. पेजिंग रिलीज़ पेज में, प्रोजेक्ट और उसके वर्शन में जोड़ी जाने वाली अतिरिक्त paging-compose डिपेंडेंसी के बारे में जानकारी होती है.

यहां Paging library के Compose API का एक उदाहरण दिया गया है:

@Composable
fun MyScreen(flow: Flow<PagingData<String>>) {
    val lazyPagingItems = flow.collectAsLazyPagingItems()
    LazyColumn {
        items(
            lazyPagingItems.itemCount,
            key = lazyPagingItems.itemKey { it }
        ) { index ->
            val item = lazyPagingItems[index]
            Text("Item is $item")
        }
    }
}
ComposeWithOtherLibraries.kt

Compose में पेजिंग का इस्तेमाल करने के बारे में ज़्यादा जानकारी के लिए, सूचियों और ग्रिड का दस्तावेज़ देखें.

Maps

अपने ऐप्लिकेशन में Google Maps की सुविधा देने के लिए, Maps Compose लाइब्रेरी का इस्तेमाल किया जा सकता है. यहां इस्तेमाल का एक उदाहरण दिया गया है:

@Composable
fun MapsExample() {
    val singapore = LatLng(1.35, 103.87)
    val cameraPositionState = rememberCameraPositionState {
        position = CameraPosition.fromLatLngZoom(singapore, 10f)
    }
    GoogleMap(
        modifier = Modifier.fillMaxSize(),
        cameraPositionState = cameraPositionState
    ) {
        Marker(
            state = remember { MarkerState(position = singapore) },
            title = "Singapore",
            snippet = "Marker in Singapore"
        )
    }
}
ComposeWithOtherLibraries.kt