कस्टम पेज इंडिकेटर जोड़ना

पेज इंडिकेटर का इस्तेमाल करके, उपयोगकर्ताओं को अपने ऐप्लिकेशन के कॉन्टेंट में अपनी मौजूदा स्थिति समझने में मदद की जा सकती है. इससे, उन्हें प्रगति के बारे में विज़ुअल जानकारी मिलती है. नेविगेशनल क्यू तब काम के होते हैं, जब कॉन्टेंट को क्रम से दिखाया जाता है. जैसे, कैरसेल लागू करना, इमेज गैलरी और स्लाइड शो या सूचियों में पेजेशन.

वर्शन के साथ काम करना

इसे लागू करने के लिए, ज़रूरी है कि आपके प्रोजेक्ट का minSDK एपीआई लेवल 21 या उससे ज़्यादा पर सेट हो.

डिपेंडेंसी

कस्टम पेज इंडिकेटर के साथ हॉरिज़ॉन्टल पेजर बनाना

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

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize()
) { page ->
    // Our page content
    Text(
        text = "Page: $page",
    )
}
Row(
    Modifier
        .wrapContentHeight()
        .fillMaxWidth()
        .align(Alignment.BottomCenter)
        .padding(bottom = 8.dp),
    horizontalArrangement = Arrangement.Center
) {
    repeat(pagerState.pageCount) { iteration ->
        val color = if (pagerState.currentPage == iteration) Color.DarkGray else Color.LightGray
        Box(
            modifier = Modifier
                .padding(2.dp)
                .clip(CircleShape)
                .background(color)
                .size(16.dp)
        )
    }
}
PagerSnippets.kt

कोड के बारे में अहम जानकारी

• यह कोड HorizontalPager लागू करता है. इसकी मदद से, कॉन्टेंट के अलग-अलग पेजों के बीच, हॉरिज़ॉन्टल तौर पर स्वाइप किया जा सकता है. इस मामले में, हर पेज पर पेज नंबर दिखता है.
• rememberPagerState() फ़ंक्शन, पेजर को शुरू करता है और पेजों की संख्या को 4 पर सेट करता है. यह फ़ंक्शन एक स्टेटस ऑब्जेक्ट बनाता है, जो मौजूदा पेज को ट्रैक करता है. साथ ही, आपको पेजर को कंट्रोल करने की सुविधा देता है.
• pagerState.currentPage प्रॉपर्टी का इस्तेमाल यह तय करने के लिए किया जाता है कि किस पेज के इंडिकेटर को हाइलाइट किया जाना चाहिए.
• पेज इंडिकेटर, Row के लागू होने पर, पेजर के ओवरले में दिखता है.
• पेजर में हर पेज के लिए 16 डीपी का सर्कल बनाया जाता है. मौजूदा पेज के लिए इंडिकेटर, DarkGray के तौर पर दिखता है, जबकि बाकी इंडिकेटर सर्कल LightGray के तौर पर दिखते हैं.
• HorizontalPager में मौजूद Text कॉम्पोज़ेबल, हर पेज पर "पेज: [पेज नंबर]" टेक्स्ट दिखाता है.

नतीजे

ऐसे संग्रह जिनमें यह गाइड शामिल है

यह गाइड, चुने गए क्विक गाइड के कलेक्शन का हिस्सा है. इसमें Android डेवलपमेंट के बड़े लक्ष्यों के बारे में बताया गया है:

सूची या ग्रिड दिखाना

सूचियों और ग्रिड की मदद से, आपके ऐप्लिकेशन में संग्रहों को ऐसे दिखाया जा सकता है कि वे उपयोगकर्ताओं को देखने में अच्छे लगें और उन्हें आसानी से समझ आएं.

क्विक गाइड का कलेक्शन

इंटरैक्टिव कॉम्पोनेंट दिखाना

जानें कि कॉम्पोज़ेबल फ़ंक्शन की मदद से, Material Design डिज़ाइन सिस्टम के आधार पर, आसानी से खूबसूरत यूज़र इंटरफ़ेस (यूआई) कॉम्पोनेंट कैसे बनाए जा सकते हैं.

क्विक गाइड का कलेक्शन

क्या आपका कोई सवाल है या सुझाव/राय देनी है

अक्सर पूछे जाने वाले सवालों के पेज पर जाएं और क्विक गाइड के बारे में जानें. इसके अलावा, हमसे संपर्क करके अपने सुझाव/राय दें.

अक्सर पूछे जाने वाले सवालों पर जाएं सुझाव/राय दें या शिकायत सबमिट करें