Compose में व्यू का इस्तेमाल करना

Compose के यूज़र इंटरफ़ेस (यूआई) में Android व्यू की हैरारकी शामिल की जा सकती है. यह तरीका, यह सुविधा तब काम आती है, जब आपको ऐसे यूज़र इंटरफ़ेस (यूआई) एलिमेंट इस्तेमाल करने हों जो अभी लिखें, पसंद करें AdView. इस तरीके से, उन कस्टम व्यू का फिर से इस्तेमाल किया जा सकता है जिन्हें आपने डिज़ाइन किया है.

व्यू एलिमेंट या हैरारकी शामिल करने के लिए, AndroidView का इस्तेमाल करें कंपोज़ेबल. AndroidView को एक Lambda फ़ंक्शन पास किया जाता है, जो View. AndroidView, update की सुविधा भी देता है कॉलबैक को तब कॉल किया जाता है, जब व्यू इनफ़्लेट होता है. AndroidView फिर से काम करता है जब भी कॉलबैक में State बदलता है. AndroidView, जैसे कि कई अन्य बिल्ट-इन कंपोज़ेबल, एक Modifier पैरामीटर लेते हैं, जिसका इस्तेमाल ताकि पैरंट कंपोज़ेबल में इसकी पोज़िशन सेट की जा सके.

@Composable
fun CustomView() {
    var selectedItem by remember { mutableStateOf(0) }

    // Adds view to Compose
    AndroidView(
        modifier = Modifier.fillMaxSize(), // Occupy the max size in the Compose UI tree
        factory = { context ->
            // Creates view
            MyView(context).apply {
                // Sets up listeners for View -> Compose communication
                setOnClickListener {
                    selectedItem = 1
                }
            }
        },
        update = { view ->
            // View's been inflated or state read in this block has been updated
            // Add logic here if necessary

            // As selectedItem is read here, AndroidView will recompose
            // whenever the state changes
            // Example of Compose -> View communication
            view.selectedItem = selectedItem
        }
    )
}

@Composable
fun ContentExample() {
    Column(Modifier.fillMaxSize()) {
        Text("Look at this CustomView!")
        CustomView()
    }
}

InteroperabilityAPIsSnippets.kt

व्यू बाइंडिंग के साथ AndroidView

एक्सएमएल लेआउट को एम्बेड करने के लिए, AndroidViewBinding एपीआई, जो androidx.compose.ui:ui-viewbinding लाइब्रेरी से मिला है. यहां की यात्रा पर हूं ऐसा करने पर, आपके प्रोजेक्ट में व्यू बाइंडिंग चालू होनी चाहिए.

@Composable
fun AndroidViewBindingExample() {
    AndroidViewBinding(ExampleLayoutBinding::inflate) {
        exampleView.setBackgroundColor(Color.GRAY)
    }
}
InteroperabilityAPIsSnippets.kt

लेज़ी लिस्ट में AndroidView

अगर लेज़ी लिस्ट में AndroidView का इस्तेमाल किया जा रहा है (LazyColumn, LazyRow, Pager वगैरह), AndroidView का इस्तेमाल करें ओवरलोड को 1.4.0-rc01 वर्शन में लॉन्च किया गया है. इस ओवरलोड की वजह से, आप Compose का इस्तेमाल कर सकते हैं मौजूदा View इंस्टेंस, जब शामिल कंपोज़िशन को पहले जैसा किया गया हो लेज़ी लिस्ट के मामले में होता है.

AndroidView के इस ओवरलोड से दो अतिरिक्त पैरामीटर जुड़ जाते हैं:

  • onReset - कॉलबैक का इस्तेमाल करके, यह बताया जाता है कि View फिर से इस्तेमाल किया गया. व्यू का फिर से इस्तेमाल करने के लिए, यह वैल्यू शून्य नहीं होनी चाहिए.
  • onRelease (ज़रूरी नहीं) - कॉलबैक का इस्तेमाल करके यह बताया जाता है कि View ने कंपोज़िशन से बाहर निकल गया है और उसे फिर से उपयोग नहीं किया जाएगा.

@OptIn(ExperimentalComposeUiApi::class)
@Composable
fun AndroidViewInLazyList() {
    LazyColumn {
        items(100) { index ->
            AndroidView(
                modifier = Modifier.fillMaxSize(), // Occupy the max size in the Compose UI tree
                factory = { context ->
                    MyView(context)
                },
                update = { view ->
                    view.selectedItem = index
                },
                onReset = { view ->
                    view.clear()
                }
            )
        }
    }
}
InteroperabilityAPIsSnippets.kt

Compose में फ़्रैगमेंट

Compose में Fragment जोड़ने के लिए, AndroidViewBinding कंपोज़ेबल का इस्तेमाल करें. AndroidViewBinding में फ़्रैगमेंट के हिसाब से हैंडलिंग है, जैसे कि फ़्रैगमेंट, जब कंपोज़ेबल कंपोज़ेबल को छोड़ता है.

ऐसा करने के लिए, FragmentContainerView वाले एक्सएमएल को बढ़ाएं आपके Fragment के मालिक के तौर पर.

उदाहरण के लिए, अगर आपने my_fragment_layout.xml तय किया है, तो इस तरह का कोड android:name एक्सएमएल एट्रिब्यूट को Fragment की क्लास का नाम:

<androidx.fragment.app.FragmentContainerView xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/fragment_container_view"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:name="com.example.compose.snippets.interop.MyFragment" />
my_fragment_layout.xml

इस फ़्रैगमेंट को Compose में इस तरह भरें:

@Composable
fun FragmentInComposeExample() {
    AndroidViewBinding(MyFragmentLayoutBinding::inflate) {
        val myFragment = fragmentContainerView.getFragment<MyFragment>()
        // ...
    }
}

InteroperabilityAPIsSnippets.kt

अगर आपको एक ही लेआउट में कई फ़्रैगमेंट इस्तेमाल करने हैं, तो पक्का करें कि हर FragmentContainerView के लिए यूनीक आईडी तय किया गया है.

Compose का इस्तेमाल करके Android फ़्रेमवर्क को कॉल करना

Compose, Android फ़्रेमवर्क क्लास के तहत काम करता है. उदाहरण के लिए, इसे होस्ट किया गया है जो Activity या Fragment जैसी Android व्यू क्लास में उपलब्ध हैं और Android का इस्तेमाल कर सकती हैं फ़्रेमवर्क क्लास, जैसे कि Context, सिस्टम रिसॉर्स, Service या BroadcastReceiver.

सिस्टम के संसाधनों के बारे में ज़्यादा जानने के लिए, Compose में संसाधन देखें.

स्थानीय लोगों की कंपोज़िशन

CompositionLocal क्लास कंपोज़ेबल फ़ंक्शन के ज़रिए, डेटा को इंप्लिसिट तरीके से पास करने की सुविधा देती हैं. वे खास हैं आम तौर पर यूज़र इंटरफ़ेस (यूआई) ट्री के किसी खास नोड में मान के साथ दिया जाता है. वह मान ये काम कर सकता है: CompositionLocal का एलान किए बिना, इसके कंपोज़ेबल डिसेंडेंट में इसका इस्तेमाल किया जा सकता है कंपोज़ेबल फ़ंक्शन में पैरामीटर के तौर पर होता है.

CompositionLocal का इस्तेमाल, अलग-अलग तरह के Android फ़्रेमवर्क के लिए वैल्यू लागू करने के लिए किया जाता है लिखें, जैसे कि Context, Configuration या View जिसमें लिखें कोड को संबंधित LocalContext, LocalConfiguration, या LocalView. ध्यान दें कि बेहतर तरीके से काम करने के लिए, CompositionLocal क्लास की शुरुआत Local से पहले की गई है IDE में अपने-आप पूरा होने की सुविधा के साथ खोजना.

CompositionLocal की मौजूदा वैल्यू को ऐक्सेस करने के लिए, उसके current का इस्तेमाल करें प्रॉपर्टी. उदाहरण के लिए, नीचे दिया गया कोड LocalContext.current, Toast.makeToast तरीके में.

@Composable
fun ToastGreetingButton(greeting: String) {
    val context = LocalContext.current
    Button(onClick = {
        Toast.makeText(context, greeting, Toast.LENGTH_SHORT).show()
    }) {
        Text("Greet")
    }
}
InteroperabilityAPIsSnippets.kt

बेहतर उदाहरण के लिए, केस स्टडी देखें: इसके आखिर में BroadcastReceivers सेक्शन होते हैं दस्तावेज़.

अन्य इंटरैक्शन

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

class OtherInteractionsActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        // get data from savedInstanceState
        setContent {
            MaterialTheme {
                ExampleComposable(data, onButtonClick = {
                    startActivity(Intent(this, MyActivity::class.java))
                })
            }
        }
    }
}

@Composable
fun ExampleComposable(data: DataExample, onButtonClick: () -> Unit) {
    Button(onClick = onButtonClick) {
        Text(data.title)
    }
}
InteroperabilityAPIsSnippets.kt

केस स्टडी: ब्रॉडकास्ट रिसीवर

उन सुविधाओं के ज़्यादा असल उदाहरण के लिए जिन्हें आपको माइग्रेट या लागू करना है लिखें और CompositionLocal और साइड इफ़ेक्ट, मान लें कि BroadcastReceiver को इससे रजिस्टर करना होगा सुविधाओं के साथ जोड़ा जा सकता है.

समाधान, मौजूदा संदर्भ का इस्तेमाल करने के लिए LocalContext का इस्तेमाल करता है और rememberUpdatedState और DisposableEffect के खराब असर.

@Composable
fun SystemBroadcastReceiver(
    systemAction: String,
    onSystemEvent: (intent: Intent?) -> Unit
) {
    // Grab the current context in this part of the UI tree
    val context = LocalContext.current

    // Safely use the latest onSystemEvent lambda passed to the function
    val currentOnSystemEvent by rememberUpdatedState(onSystemEvent)

    // If either context or systemAction changes, unregister and register again
    DisposableEffect(context, systemAction) {
        val intentFilter = IntentFilter(systemAction)
        val broadcast = object : BroadcastReceiver() {
            override fun onReceive(context: Context?, intent: Intent?) {
                currentOnSystemEvent(intent)
            }
        }

        context.registerReceiver(broadcast, intentFilter)

        // When the effect leaves the Composition, remove the callback
        onDispose {
            context.unregisterReceiver(broadcast)
        }
    }
}

@Composable
fun HomeScreen() {

    SystemBroadcastReceiver(Intent.ACTION_BATTERY_CHANGED) { batteryStatus ->
        val isCharging = /* Get from batteryStatus ... */ true
        /* Do something if the device is charging */
    }

    /* Rest of the HomeScreen */
}
InteroperabilityAPIsSnippets.kt

अगले चरण

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