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

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

पहली इमेज. जब कंपोज़ेबल को स्क्रीन पर लगातार तीन सेकंड तक दिखाया जाता है, तब बैकग्राउंड का रंग गुलाबी से बदलकर प्लम हो जाता है.

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

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

ऐसे मामलों में, onVisibilityChanged मॉडिफ़ायर में minFractionVisible पैरामीटर का इस्तेमाल करें. इससे, उस फ़्रैक्शन को तय किया जा सकता है जिसे स्क्रीन पर दिखाना है, ताकि कंपोज़ेबल को 'दिख रहा है' के तौर पर मार्क किया जा सके. इसकी वैल्यू, 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)
            )
        }
    }
}

दूसरी इमेज. minFractionVisible सेट किए बिना. तीसरी इमेज. minFractionVisible को 0.2f के तौर पर सेट किया गया है.

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

पीछे जाएं
इंट्रिनसिक मेज़रमेंट