Jetpack Compose Glimmer में हॉरिज़ॉन्टल पेजर

XR डिवाइस, जिन पर यह सुविधा काम करती है

इस गाइड की मदद से, इन XR डिवाइस के लिए बेहतर अनुभव बनाए जा सकते हैं.

XR डिवाइस के टाइप के बारे में जानें →

XR डिवाइस के टाइप के बारे में जानें →

Jetpack Compose Glimmer में, GlimmerHorizontalPager एक ऐसा लेआउट है जिसे ज़रूरत पड़ने पर लोड किया जाता है. यह हॉरिज़ॉन्टली स्क्रोल किया जा सकता है और इसमें पेज क्रम से व्यवस्थित होते हैं. यह Compose Foundation में मौजूद स्टैंडर्ड HorizontalPager की तरह ही होता है. हालांकि, इसे Glimmer के बिहेवियर और डिफ़ॉल्ट वैल्यू के साथ डिसप्ले ग्लास के लिए ऑप्टिमाइज़ किया गया है.

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

मुख्य पैरामीटर और लेआउट के विकल्प

GlimmerHorizontalPager में, स्पेसिंग, लेआउट अलाइनमेंट, और लेज़ी लोडिंग को कंट्रोल करने के लिए, पसंद के मुताबिक बनाए जा सकने वाले पैरामीटर उपलब्ध होते हैं. इनमें से कुछ पैरामीटर यहां दिए गए हैं:

सभी उपलब्ध पैरामीटर के बारे में जानने के लिए, रेफ़रंस का पूरा दस्तावेज़ देखें.

ऐनिमेटेड टेक्स्ट मोशन के लिए सुझाव

डिसप्ले ग्लास पर पेजर स्नैप ऐनिमेशन और ट्रांज़िशन के दौरान, डिफ़ॉल्ट टेक्स्ट रेंडरिंग में पिक्सल-स्नैपिंग आर्टफ़ैक्ट दिख सकते हैं. TextMotion.Animated सेट करने से, लेआउट ऐनिमेशन के दौरान टेक्स्ट सही तरीके से रेंडर होता है:

Text(
    text = "Page: $page",
    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
)
GlimmerHorizontalPagerSample.kt

उदाहरण: हॉरिज़ॉन्टल पेजर

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

// Hoist the pager state, specifying the total page count with a lambda.
val pagerState = rememberGlimmerPagerState(pageCount = { 10 })

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
) { page ->
    // Use Glimmer components like Card and Text for optimized glasses styling.
    Card(modifier = Modifier.fillMaxWidth()) {
        Text(
            text = "Page: $page",
            // Recommended: use TextMotion.Animated for smooth transitions in a pager.
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
}
GlimmerHorizontalPagerSample.kt

कोड के बारे में अहम बातें

• स्टेट: पेजर की स्थिति को मैनेज करने के लिए, rememberGlimmerPagerState(pageCount = { 10 }) का इस्तेमाल करके, GlimmerPagerState को शुरू करता है.
• पेज स्लॉट कॉन्टेंट: हर कार्ड को रेंडर करने के लिए, GlimmerPagerScope लैम्डा में पेज इंडेक्स page को स्वीकार करता है.
• स्मूद ऐनिमेशन टेक्स्ट स्टाइल: LocalTextStyle.current को कॉपी करता है और साफ़ तौर पर TextMotion.Animated को चालू करता है.
• अपने-आप दिखने वाला पेज इंडिकेटर: Compose के स्टैंडर्ड पेजर के उलट, जिनमें इंडिकेटर के लिए किसी बाहरी कॉम्पोनेंट की ज़रूरत होती है, GlimmerHorizontalPager में डिफ़ॉल्ट रूप से, डॉट-स्टाइल वाला पेज इंडिकेटर अपने-आप एम्बेड हो जाता है.

पेज इंडिकेटर

डिफ़ॉल्ट रूप से, GlimmerHorizontalPager डॉट-आधारित पेज इंडिकेटर रेंडर करता है, जिसमें GlimmerHorizontalPagerDefaults.PageIndicator का इस्तेमाल किया जाता है. इंडिकेटर, अपने-आप कलर स्कीम के हिसाब से अडजस्ट हो जाता है:

• ऐक्टिव डॉट, आस-पास के सबसे नज़दीकी surface से रिज़ॉल्व किए गए कॉन्टेंट कलर का इस्तेमाल करता है.

साफ़ तौर पर कलर तय करने के लिए, पसंद के मुताबिक बनाया गया PageIndicator पास किया जा सकता है. इसके अलावा, डॉट को अपने पसंद के मुताबिक बनाए गए लेआउट से बदला जा सकता है:

GlimmerHorizontalPager(
    state = pagerState,
    modifier = Modifier.fillMaxSize(),
    // Use a page numbers instead of the default dot-indicator
    pageIndicator = {
        Text(
            text = "${pagerState.currentPage + 1} / ${pagerState.pageCount}",
            style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
        )
    }
)
GlimmerHorizontalPagerSample.kt