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) के साथ काम किया जा रहा हो. इससे स्क्रीन के साइज़ से ज़्यादा बड़े आइटम के लिए, डेटा फ़ेच करने की प्रोसेस को ऑप्टिमाइज़ किया जा सकता है.

ऐसे मामलों में, 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)
            )
        }
    }
}
VisibilitySnippets.kt

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