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 सेट है और तीसरा बॉट स्क्रीन पर पूरी तरह से दिखने से पहले लोड हो जाता है.