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

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

गतिविधि

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

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

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

@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"
        )
    }
}

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

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

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

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

Accompanist Permissions लाइब्रेरी का इस्तेमाल, उन एपीआई के ऊपर एक लेयर के तौर पर भी किया जा सकता है. इससे, अनुमतियों के लिए दी गई मौजूदा स्थिति को उस स्थिति में मैप किया जा सकता है जिसका इस्तेमाल Compose यूज़र इंटरफ़ेस (यूआई) कर सकता है.

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

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

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

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

ViewModel

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

Groovy

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

Kotlin

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

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

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

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

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
) { /* ... */ }

इस्तेमाल से जुड़े दिशा-निर्देश

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

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

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

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

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

डेटा स्ट्रीम

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)
    }
}

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

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

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

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

Hilt

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

ViewModel सेक्शन में बताया गया viewModel() फ़ंक्शन, उस ViewModel का इस्तेमाल अपने-आप करता है जिसे Hilt, @HiltViewModel एनोटेशन के साथ बनाता है. हमने 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()
) { /* ... */ }

Hilt और नेविगेशन

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

Groovy

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

Kotlin

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

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

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

// 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)
        }
        /* ... */
    }
}

अगर आपको नेविगेशन रूट या नेविगेशन ग्राफ़ के दायरे में आने वाले 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)
            }
        }
    }
}

पृष्ठांकन

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

यहां Paging लाइब्रेरी के Compose एपीआई का एक उदाहरण दिया गया है:

@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")
        }
    }
}

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"
        )
    }
}