Compose में दिखने की स्थिति को ट्रैक करना

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

• onVisibilityChanged - इस मॉडिफ़ायर से आपको तब सूचना मिलती है, जब किसी कंपोज़ेबल की विज़िबिलिटी बदलती है. यह हर बार कंपोज़ेबल दिखने पर, किसी कार्रवाई या साइड इफ़ेक्ट को ट्रिगर करने के लिए सबसे सही है.
• onLayoutRectChanged - यह मॉडिफ़ायर, रूट, विंडो, और स्क्रीन के हिसाब से कंपोज़ेबल की सीमाओं के बारे में जानकारी देता है. यह लो-लेवल कंट्रोल उपलब्ध कराता है और onVisibilityChanged के लिए बुनियादी एपीआई है. यह मॉडिफ़ायर, onGloballyPositioned जैसा ही है. हालांकि, यह बेहतर परफ़ॉर्मेंस देता है और इसमें ज़्यादा विकल्प मिलते हैं.

इन एपीआई का इस्तेमाल, मॉडिफ़ायर चेन के हिस्से के तौर पर किसी भी कंपोज़ेबल के साथ किया जा सकता है.

onVisibilityChanged की मदद से, दिखने की सेटिंग में हुए बदलावों को ट्रैक करना

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

किसी आइटम की 'किसको दिखे' सेटिंग में बदलाव होने पर सूचना पाने के लिए, onVisibilityChanged मॉडिफ़ायर का इस्तेमाल करें. इसका उदाहरण यहां दिया गया है:

Text(
    text = "Some text",
    modifier = Modifier
        .onVisibilityChanged { visible ->
            if (visible) {
                // Do something if visible
            } else {
                // Do something if not visible
            }
        }
        .padding(vertical = 8.dp)
)
VisibilitySnippets.kt

onVisibilityChanged मॉडिफ़ायर, बूलियन वैल्यू देता है. इससे कंपोज़ेबल की मौजूदा विज़िबिलिटी की स्थिति के बारे में पता चलता है. इसके अलावा, यह minFraction और minDurationMs जैसे पैरामीटर भी उपलब्ध कराता है. इनसे आपको यह तय करने का ज़्यादा कंट्रोल मिलता है कि विज़िबिलिटी कॉलबैक को कब ट्रिगर करना है.

onVisibilityChanged मॉडिफ़ायर के साथ भी, अन्य मॉडिफ़ायर की तरह ही क्रम मायने रखता है. ऊपर दिए गए उदाहरण में, एक कंपोज़ेबल फ़ंक्शन दिखाया गया है. यह फ़ंक्शन, पैडिंग के साथ टेक्स्ट रेंडर करता है. यह पक्का करने के लिए कि मॉडिफ़ायर, पैडिंग के साथ-साथ पूरे कंपोज़ेबल पर लागू हो, padding मॉडिफ़ायर से पहले onVisibilityChanged मॉडिफ़ायर जोड़ें.

विज़िबिलिटी कॉलबैक को ट्रिगर करने से पहले, कंपोज़ेबल पर समयसीमा सेट करें

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

किसी आइटम को तय समय तक दिखने के बाद कोई कार्रवाई ट्रिगर करने के लिए, onVisibilityChanged मॉडिफ़ायर में minDurationMs पैरामीटर का इस्तेमाल करें. यह पैरामीटर बताता है कि किसी कंपोज़ेबल को कम से कम कितने समय तक लगातार दिखना चाहिए, ताकि कॉलबैक ट्रिगर हो सके. अगर कंपोज़ेबल, तय समय से पहले दिखना बंद हो जाता है, तो टाइमर रीसेट हो जाता है. डिफ़ॉल्ट वैल्यू 0 मिलीसेकंड होती है.

नीचे दिए गए स्निपेट में, कंपोज़ेबल के तीन सेकंड तक दिखने के बाद, बैकग्राउंड को बैंगनी रंग में बदल दिया गया है:

var background by remember { mutableStateOf(PalePink) }
Card(
    modifier = modifier
        // ...
        .onVisibilityChanged(minDurationMs = 3000) {
            if (it) {
                background = MutedPlum
            }
        }
) {

    Box(
        modifier = Modifier
            // ...
            .background(background),
        contentAlignment = Alignment.Center,
    ) {
        // ...
    }
}
VisibilitySnippets.kt

कम से कम दिखने वाले फ़्रैक्शन को सेट करना

कॉम्पोज़ेबल के लिए, दिखने वाले फ़्रैक्शन की कम से कम वैल्यू सेट करने से, स्क्रोल किए जा सकने वाले कॉन्टेंट (उदाहरण के लिए, LazyColumn) के साथ काम करते समय मदद मिलती है. इससे, स्क्रीन के साइज़ से ज़्यादा बड़े आइटम के लिए डेटा फ़ेच करने की प्रोसेस को ऑप्टिमाइज़ किया जा सकता है.

ऐसे मामलों में, minFractionVisible मॉडिफ़ायर में minFractionVisible पैरामीटर का इस्तेमाल करें. इससे, उस फ़्रैक्शन को तय किया जा सकता है जिसे स्क्रीन पर दिखाना है, ताकि कंपोज़ेबल को 'दिख रहा है' के तौर पर मार्क किया जा सके.onVisibilityChanged इसकी वैल्यू, 0.0f से 1.0f के बीच कोई भी फ़्लोट नंबर हो सकती है. डिफ़ॉल्ट रूप से, इसे 1.0f पर सेट किया जाता है. 1.0f का मतलब है कि कंपोज़ेबल को स्क्रीन पर पूरी तरह से दिखना चाहिए, ताकि कॉलबैक ट्रिगर हो सके.

LazyColumn(
    modifier = modifier.fillMaxSize()
) {
    item {
        Box(
            modifier = Modifier
                // ...
                // Here the visible callback gets triggered when 20% of the composable is visible
                .onVisibilityChanged(
                    minFractionVisible = 0.2f,
                ) { visible ->
                    if (visible) {
                        // Call specific logic here
                        // viewModel.fetchDataFromNetwork()
                    }
                }
                .padding(vertical = 16.dp)
        ) {
            Text(
                text = "Sample Text",
                modifier = Modifier.padding(horizontal = 16.dp)
            )
        }
    }
}
VisibilitySnippets.kt

पहले इस्तेमाल किए गए उदाहरण में, कंपोज़ेबल के पूरी तरह से दिखने से पहले, Androidify बॉट को नेटवर्क से प्रीलोड किया जाता है. दूसरी इमेज में, तीसरा बॉट लोड नहीं होता, क्योंकि कंपोज़ेबल पूरी तरह से नहीं दिख रहा है. तीसरी इमेज में, minFractionVisible सेट है और तीसरा बॉट स्क्रीन पर पूरी तरह से दिखने से पहले लोड हो जाता है.