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 मॉडिफ़ायर, बूलियन वैल्यू देता है. इससे कंपोज़ेबल के दिखने की मौजूदा स्थिति का पता चलता है. इसके अलावा, इसमें minFractionVisible और 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 का मतलब है कि कंपोज़ेबल को स्क्रीन पर पूरी तरह से दिखना चाहिए या अगर यह व्यूपोर्ट से बड़ा है, तो पूरे व्यूपोर्ट को भरना चाहिए.

जब दिखने वाला हिस्सा minFractionVisible से ज़्यादा होता है या जब कंपोज़ेबल पूरी तरह से दिखता है या व्यूपोर्ट को भरता है, तब कॉलबैक को true मिलता है. ऐसा न होने पर, false मिलता है.

LazyColumn(
    modifier = modifier.fillMaxSize()
) {
    item {
        Box(
            modifier = Modifier
                // ...
                // Here `visible` is `true` when more than 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 सेट है. साथ ही, तीसरा बॉट स्क्रीन पर पूरी तरह दिखने से पहले ही लोड हो जाता है.

किसी कंपोज़ेबल को छिपाना और उसकी जगह को बनाए रखना

किसी कंपोज़ेबल के आस-पास के लेआउट में बदलाव किए बिना उसे छिपाने के लिए, visible मॉडिफ़ायर का इस्तेमाल करें. false पास करने पर, कंपोज़ेबल को अब भी मेज़र किया जाता है, लेकिन उसे प्लेस या ड्रॉ नहीं किया जाता. alpha को 0f पर सेट करने के बजाय, visible(false) का इस्तेमाल करने पर, एलिमेंट को सुलभता ट्री से भी हटा दिया जाता है. साथ ही, टच इंटरैक्शन को बंद कर दिया जाता है. हालांकि, एलिमेंट के लेआउट स्पेस को सुरक्षित रखा जाता है.

यहां दिए गए उदाहरण में, एक चेक आइकॉन दिखाया गया है. यह आइकॉन छिपा होने पर भी अपनी जगह बनाए रखता है, ताकि इसके बगल में मौजूद टेक्स्ट अपनी जगह से न हिले:

Row(modifier, verticalAlignment = Alignment.CenterVertically) {
    Icon(
        painter = painterResource(R.drawable.check),
        contentDescription = "Saved",
        modifier = Modifier
            // The icon keeps its space while it's hidden, so the text doesn't move.
            .visible(isSaved)
    )
    Text("Draft", Modifier.padding(start = 8.dp))
}

visible का इस्तेमाल तब करें, जब कंपोज़ेबल के दिखने और गायब होने पर, उसके आस-पास का लेआउट नहीं हिलना चाहिए. कंपोज़ेबल और उसके स्पेस को हटाने के लिए, उसे कॉल न करें या उसे ऐनिमेट करने के लिए, AnimatedVisibility का इस्तेमाल करें.

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