Compose में पेजर

कॉन्टेंट को बाएं और दाएं या ऊपर-नीचे तरीके से फ़्लिप करने के लिए, यह HorizontalPager और VerticalPager और कंपोज़ेबल. इन कंपोज़ेबल में इससे मिलते-जुलते फ़ंक्शन हैं व्यू में ViewPager सिस्टम. डिफ़ॉल्ट रूप से, HorizontalPager, स्क्रीन की पूरी चौड़ाई में दिखता है. VerticalPager पूरी ऊंचाई ले लेता है और पेजर सिर्फ़ एक पेज को समय. इन डिफ़ॉल्ट सेटिंग को कॉन्फ़िगर किया जा सकता है.

HorizontalPager

क्षैतिज रूप से बाएं और दाएं स्क्रोल करने वाला पेजर बनाने के लिए, इसका इस्तेमाल करें HorizontalPager:

पहली इमेज. HorizontalPager का डेमो

// Display 10 items
val pagerState = rememberPagerState(pageCount = {
    10
})
HorizontalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}
PagerSnippets.kt

VerticalPager

ऊपर और नीचे स्क्रोल करने वाला पेजर बनाने के लिए, VerticalPager का इस्तेमाल करें:

दूसरी इमेज. VerticalPager का डेमो

// Display 10 items
val pagerState = rememberPagerState(pageCount = {
    10
})
VerticalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier.fillMaxWidth()
    )
}
PagerSnippets.kt

लेज़ी क्रिएशन

HorizontalPager और VerticalPager, दोनों के पेज लेज़ी हैं संगीत, ज़रूरत के हिसाब से बनाया गया और लेआउट में उपलब्ध कराया जाता है. उपयोगकर्ता के तौर पर कंपोज़ेबल में स्क्रोल किया जाता है और कंपोज़ेबल, ऐसे सभी पेजों को हटा देता है जो अब आवश्यक है.

ज़्यादा पेजों को ऑफ़स्क्रीन लोड करें

डिफ़ॉल्ट रूप से, पेजर स्क्रीन पर सिर्फ़ दिखने वाले पेजों को लोड करता है. ज़्यादा पेज लोड करने के लिए ऑफ़स्क्रीन, beyondBoundsPageCount को शून्य से ज़्यादा मान पर सेट करें.

पेजर में किसी आइटम तक स्क्रोल करें

पेजर में किसी खास पेज तक स्क्रोल करने के लिए, PagerState ऑब्जेक्ट इस्तेमाल कर रहा है rememberPagerState() और इसे state पैरामीटर के तौर पर पेजर में पास करें. कॉल किया जा सकता है PagerState#scrollToPage() CoroutineScope के अंदर, इस स्थिति में:

val pagerState = rememberPagerState(pageCount = {
    10
})
HorizontalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
    )
}

// scroll to page
val coroutineScope = rememberCoroutineScope()
Button(onClick = {
    coroutineScope.launch {
        // Call scroll to on pagerState
        pagerState.scrollToPage(5)
    }
}, modifier = Modifier.align(Alignment.BottomCenter)) {
    Text("Jump to Page 5")
}
PagerSnippets.kt

अगर आप पेज को ऐनिमेट करना चाहते हैं, तो PagerState#animateScrollToPage() फ़ंक्शन:

val pagerState = rememberPagerState(pageCount = {
    10
})

HorizontalPager(state = pagerState) { page ->
    // Our page content
    Text(
        text = "Page: $page",
        modifier = Modifier
            .fillMaxWidth()
            .height(100.dp)
    )
}

// scroll to page
val coroutineScope = rememberCoroutineScope()
Button(onClick = {
    coroutineScope.launch {
        // Call scroll to on pagerState
        pagerState.animateScrollToPage(5)
    }
}, modifier = Modifier.align(Alignment.BottomCenter)) {
    Text("Jump to Page 5")
}
PagerSnippets.kt

पेज की स्थिति में हुए बदलावों के बारे में सूचना पाएं

PagerState में तीन प्रॉपर्टी मौजूद हैं, जिनमें पेजों के बारे में जानकारी दी गई है: currentPage settledPage, और targetPage.

  • currentPage: स्नैप स्थिति का सबसे निकटतम पेज. डिफ़ॉल्ट रूप से, स्नैप पोज़िशन, लेआउट की शुरुआत में है.
  • settledPage: वह पेज नंबर, जब कोई ऐनिमेशन या स्क्रोलिंग नहीं चल रही हो. यह यह, currentPage प्रॉपर्टी से अलग है, जिसमें currentPage स्नैप स्थिति के काफ़ी पास होने पर पेज तुरंत अपडेट हो जाता है, सभी ऐनिमेशन चलने तक, settledPage वैसा ही रहेगा.
  • targetPage: स्क्रोलिंग मूवमेंट के लिए सुझाई गई स्टॉप पोज़िशन.

इन वैरिएबल में हुए बदलावों के बारे में जानने के लिए, snapshotFlow फ़ंक्शन का इस्तेमाल किया जा सकता है और उन पर प्रतिक्रिया दें. उदाहरण के लिए, पेज में होने वाले हर बदलाव के बारे में Analytics इवेंट भेजने के लिए, ये काम किए जा सकते हैं:

val pagerState = rememberPagerState(pageCount = {
    10
})

LaunchedEffect(pagerState) {
    // Collect from the a snapshotFlow reading the currentPage
    snapshotFlow { pagerState.currentPage }.collect { page ->
        // Do something with each page change, for example:
        // viewModel.sendPageSelectedEvent(page)
        Log.d("Page change", "Page changed to $page")
    }
}

VerticalPager(
    state = pagerState,
) { page ->
    Text(text = "Page: $page")
}
PagerSnippets.kt

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

किसी पेज पर इंंडिकेटर जोड़ने के लिए, जानकारी पाने के लिए PagerState ऑब्जेक्ट का इस्तेमाल करें इसके बारे में जानकारी मिलेगी कि पेजों की संख्या में से कौनसा पेज चुना गया है. साथ ही, अपने कस्टम इंडिकेटर.

उदाहरण के लिए, अगर आपको एक सामान्य सर्कल इंडिकेटर चाहिए, तो एक साथ सर्कल चुना जा सकता है और पेज चुने गए होने के आधार पर सर्कल का रंग बदला जा सकता है. pagerState.currentPage:

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

पेजर, कॉन्टेंट के नीचे सर्कल इंडिकेटर दिखा रहा है
तीसरी इमेज. पेजर, कॉन्टेंट के नीचे सर्कल इंडिकेटर दिखा रहा है

कॉन्टेंट पर आइटम स्क्रोल इफ़ेक्ट लागू करें

अपने पेजर पर इफ़ेक्ट लागू करने के लिए स्क्रोल करने की स्थिति का इस्तेमाल करना, इसका एक सामान्य इस्तेमाल है आइटम. यह पता लगाने के लिए कि कोई पेज, चुने गए मौजूदा पेज से कितनी दूर है इस्तेमाल PagerState.currentPageOffsetFraction. इसके बाद, शॉर्ट वीडियो की दूरी के हिसाब से, कॉन्टेंट में बदलाव करने के इफ़ेक्ट लागू किए जा सकते हैं चुने हुए पेज से.

चौथी इमेज. पेजर के कॉन्टेंट में बदलाव लागू करना

उदाहरण के लिए, आइटम की अपारदर्शिता (ओपैसिटी) को इस आधार पर अडजस्ट करना कि वे बीच में, alpha को इनका इस्तेमाल करके बदलें Modifier.graphicsLayer पेजर में मौजूद किसी आइटम पर:

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(state = pagerState) { page ->
    Card(
        Modifier
            .size(200.dp)
            .graphicsLayer {
                // Calculate the absolute offset for the current page from the
                // scroll position. We use the absolute value which allows us to mirror
                // any effects for both directions
                val pageOffset = (
                    (pagerState.currentPage - page) + pagerState
                        .currentPageOffsetFraction
                    ).absoluteValue

                // We animate the alpha, between 50% and 100%
                alpha = lerp(
                    start = 0.5f,
                    stop = 1f,
                    fraction = 1f - pageOffset.coerceIn(0f, 1f)
                )
            }
    ) {
        // Card content
    }
}
PagerSnippets.kt

कस्टम पेज का साइज़

डिफ़ॉल्ट रूप से, HorizontalPager और VerticalPager पूरी चौड़ाई वाले फ़ॉर्मैट पर होते हैं या पूरी ऊंचाई देता है. pageSize वैरिएबल में से किसी एक पर Fixed, Fill (डिफ़ॉल्ट) या पसंद के मुताबिक साइज़ का कैलकुलेशन.

उदाहरण के लिए, 100.dp की फ़िक्स चौड़ाई वाले पेज को सेट करने के लिए:

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    pageSize = PageSize.Fixed(100.dp)
) { page ->
    // page content
}
PagerSnippets.kt

व्यूपोर्ट के साइज़ के हिसाब से पेजों का साइज़ बदलने के लिए, पसंद के मुताबिक पेज साइज़ का इस्तेमाल करें गणना. पसंद के मुताबिक प्रतिक्रिया वाला इमोजी बनाएं PageSize ऑब्जेक्ट के बीच की दूरी को ध्यान में रखते हुए, availableSpace को तीन से विभाजित करें आइटम के बीच:

private val threePagesPerViewport = object : PageSize {
    override fun Density.calculateMainAxisPageSize(
        availableSpace: Int,
        pageSpacing: Int
    ): Int {
        return (availableSpace - 2 * pageSpacing) / 3
    }
}
PagerSnippets.kt

कॉन्टेंट पैडिंग

HorizontalPager और VerticalPager, दोनों में कॉन्टेंट की पैडिंग (जगह) बदलने की सुविधा काम करती है, इसकी मदद से, पेजों के साइज़ और अलाइनमेंट के लिए मनमुताबिक बदलाव किए जा सकते हैं.

उदाहरण के लिए, start पैडिंग (जगह) को सेट करने पर, पेज के आखिर में अलाइन होती है:

शुरुआत की पैडिंग वाला पेजर, जिसमें कॉन्टेंट को पेज के आखिरी हिस्से से अलाइन किया गया है

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(start = 64.dp),
) { page ->
    // page content
}
PagerSnippets.kt

start और end पैडिंग (जगह) को एक ही वैल्यू पर सेट करने से, आइटम सेंटर सेंटर में चला जाता है क्षैतिज रूप से:

पेज के शुरुआती और आखिरी पैडिंग (जगह) वाला पेजर, जिसमें कॉन्टेंट को बीच में दिखाया गया है

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(horizontal = 32.dp),
) { page ->
    // page content
}
PagerSnippets.kt

end पैडिंग को सेट करने से, पेज शुरुआत में अलाइन होते हैं:

स्टार्ट और एंड पैडिंग वाला पेजर, जिसमें कॉन्टेंट को शुरुआत में अलाइन किया गया है

val pagerState = rememberPagerState(pageCount = {
    4
})
HorizontalPager(
    state = pagerState,
    contentPadding = PaddingValues(end = 64.dp),
) { page ->
    // page content
}
PagerSnippets.kt

मिलते-जुलते असर पाने के लिए, top और bottom वैल्यू को सेट किया जा सकता है VerticalPager. 32.dp वैल्यू का इस्तेमाल सिर्फ़ उदाहरण के तौर पर किया गया है; तुम सेट कर सकती हो हर पैडिंग डाइमेंशन को किसी भी वैल्यू पर सेट कर सकते हैं.

स्क्रोल करने के तरीके को पसंद के मुताबिक बनाएं

HorizontalPager और VerticalPager कंपोज़ेबल में डिफ़ॉल्ट रूप से यह बताया जाता है कि स्क्रोलिंग जेस्चर, पेजर के साथ काम करते हैं. हालांकि, आपके पास अपनी पसंद के मुताबिक बदलाव करने और डिफ़ॉल्ट, जैसे कि pagerSnapDistance या flingBehavior.

स्नैप की दूरी

डिफ़ॉल्ट रूप से, HorizontalPager और VerticalPager ऐसे पेज जिन्हें फ़्लिंग जेस्चर की मदद से एक बार में एक पेज से आगे स्क्रोल किया जा सकता है. बदलने के लिए यह, सेट pagerSnapDistance flingBehavior पर:

val pagerState = rememberPagerState(pageCount = { 10 })

val fling = PagerDefaults.flingBehavior(
    state = pagerState,
    pagerSnapDistance = PagerSnapDistance.atMost(10)
)

Column(modifier = Modifier.fillMaxSize()) {
    HorizontalPager(
        state = pagerState,
        pageSize = PageSize.Fixed(200.dp),
        beyondBoundsPageCount = 10,
        flingBehavior = fling
    ) {
        PagerSampleItem(page = it)
    }
}
PagerSnippets.kt

पीछे जाएं
List of modifiers
आगे बढ़ें
Flow layouts