कॉन्टेंट को बाएं और दाएं या ऊपर-नीचे तरीके से फ़्लिप करने के लिए,
यह
HorizontalPager
और
VerticalPager
और कंपोज़ेबल. इन कंपोज़ेबल में इससे मिलते-जुलते फ़ंक्शन हैं
व्यू में ViewPager
सिस्टम. डिफ़ॉल्ट रूप से, HorizontalPager
, स्क्रीन की पूरी चौड़ाई में दिखता है.
VerticalPager
पूरी ऊंचाई ले लेता है और पेजर सिर्फ़ एक पेज को
समय. इन डिफ़ॉल्ट सेटिंग को कॉन्फ़िगर किया जा सकता है.
HorizontalPager
क्षैतिज रूप से बाएं और दाएं स्क्रोल करने वाला पेजर बनाने के लिए, इसका इस्तेमाल करें
HorizontalPager
:
// Display 10 items val pagerState = rememberPagerState(pageCount = { 10 }) HorizontalPager(state = pagerState) { page -> // Our page content Text( text = "Page: $page", modifier = Modifier.fillMaxWidth() ) }
VerticalPager
ऊपर और नीचे स्क्रोल करने वाला पेजर बनाने के लिए, VerticalPager
का इस्तेमाल करें:
// Display 10 items val pagerState = rememberPagerState(pageCount = { 10 }) VerticalPager(state = pagerState) { page -> // Our page content Text( text = "Page: $page", modifier = Modifier.fillMaxWidth() ) }
लेज़ी क्रिएशन
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") }
अगर आप पेज को ऐनिमेट करना चाहते हैं, तो
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") }
पेज की स्थिति में हुए बदलावों के बारे में सूचना पाएं
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") }
पेज इंंडिकेटर जोड़ना
किसी पेज पर इंंडिकेटर जोड़ने के लिए, जानकारी पाने के लिए 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) ) } }
कॉन्टेंट पर आइटम स्क्रोल इफ़ेक्ट लागू करें
अपने पेजर पर इफ़ेक्ट लागू करने के लिए स्क्रोल करने की स्थिति का इस्तेमाल करना, इसका एक सामान्य इस्तेमाल है
आइटम. यह पता लगाने के लिए कि कोई पेज, चुने गए मौजूदा पेज से कितनी दूर है
इस्तेमाल
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 } }
कस्टम पेज का साइज़
डिफ़ॉल्ट रूप से, HorizontalPager
और VerticalPager
पूरी चौड़ाई वाले फ़ॉर्मैट पर होते हैं या
पूरी ऊंचाई देता है. pageSize
वैरिएबल में से किसी एक पर
Fixed
,
Fill
(डिफ़ॉल्ट) या पसंद के मुताबिक साइज़ का कैलकुलेशन.
उदाहरण के लिए, 100.dp
की फ़िक्स चौड़ाई वाले पेज को सेट करने के लिए:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, pageSize = PageSize.Fixed(100.dp) ) { page -> // page content }
व्यूपोर्ट के साइज़ के हिसाब से पेजों का साइज़ बदलने के लिए, पसंद के मुताबिक पेज साइज़ का इस्तेमाल करें
गणना. पसंद के मुताबिक प्रतिक्रिया वाला इमोजी बनाएं
PageSize
ऑब्जेक्ट के बीच की दूरी को ध्यान में रखते हुए, availableSpace
को तीन से विभाजित करें
आइटम के बीच:
private val threePagesPerViewport = object : PageSize { override fun Density.calculateMainAxisPageSize( availableSpace: Int, pageSpacing: Int ): Int { return (availableSpace - 2 * pageSpacing) / 3 } }
कॉन्टेंट पैडिंग
HorizontalPager
और VerticalPager
, दोनों में कॉन्टेंट की पैडिंग (जगह) बदलने की सुविधा काम करती है,
इसकी मदद से, पेजों के साइज़ और अलाइनमेंट के लिए मनमुताबिक बदलाव किए जा सकते हैं.
उदाहरण के लिए, start
पैडिंग (जगह) को सेट करने पर, पेज के आखिर में अलाइन होती है:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, contentPadding = PaddingValues(start = 64.dp), ) { page -> // page content }
start
और end
पैडिंग (जगह) को एक ही वैल्यू पर सेट करने से, आइटम सेंटर सेंटर में चला जाता है
क्षैतिज रूप से:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, contentPadding = PaddingValues(horizontal = 32.dp), ) { page -> // page content }
end
पैडिंग को सेट करने से, पेज शुरुआत में अलाइन होते हैं:
val pagerState = rememberPagerState(pageCount = { 4 }) HorizontalPager( state = pagerState, contentPadding = PaddingValues(end = 64.dp), ) { page -> // page content }
मिलते-जुलते इफ़ेक्ट पाने के लिए, 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) } }
आपके लिए सुझाव
- ध्यान दें: JavaScript बंद होने पर लिंक टेक्स्ट दिखता है
- Compose में ConstraintLayout
- ग्राफ़िक्स मॉडिफ़ायर
CoordinatorLayout
को Compose में माइग्रेट करें