একটি বাম এবং ডান বা উপরে এবং নীচের পদ্ধতিতে বিষয়বস্তু ফ্লিপ করতে, আপনি যথাক্রমে 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() ) }
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() ) }
অলস সৃষ্টি
HorizontalPager
এবং VerticalPager
উভয়ের পৃষ্ঠাগুলি অলসভাবে তৈরি করা হয় এবং যখন প্রয়োজন হয় তখন সাজানো হয়। ব্যবহারকারী পৃষ্ঠাগুলির মাধ্যমে স্ক্রোল করার সাথে সাথে, কম্পোজেবল যেকোন পৃষ্ঠাগুলিকে সরিয়ে দেয় যা আর প্রয়োজন হয় না।
অফস্ক্রিনে আরও পৃষ্ঠা লোড করুন
ডিফল্টরূপে, পেজার শুধুমাত্র পর্দায় দৃশ্যমান পৃষ্ঠাগুলি লোড করে। অফস্ক্রিনে আরও পৃষ্ঠা লোড করতে, শূন্যের চেয়ে বেশি মানে beyondBoundsPageCount
সেট করুন।
পেজারে একটি আইটেমে স্ক্রোল করুন
পেজারে একটি নির্দিষ্ট পৃষ্ঠায় স্ক্রোল করতে, rememberPagerState()
ব্যবহার করে একটি PagerState
অবজেক্ট তৈরি করুন এবং পেজারে state
প্যারামিটার হিসাবে এটি পাস করুন। আপনি একটি CoroutineScope
ভিতরে এই রাজ্যে PagerState#scrollToPage()
কল করতে পারেন:
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
ফাংশন ব্যবহার করতে পারেন। উদাহরণস্বরূপ, প্রতিটি পৃষ্ঠা পরিবর্তনের একটি বিশ্লেষণ ইভেন্ট পাঠাতে, আপনি নিম্নলিখিতগুলি করতে পারেন:
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
ব্যবহার করতে পারেন। তারপরে আপনি নির্বাচিত পৃষ্ঠা থেকে দূরত্বের উপর ভিত্তি করে আপনার সামগ্রীতে রূপান্তর প্রভাব প্রয়োগ করতে পারেন।
উদাহরণস্বরূপ, আইটেমগুলি কেন্দ্র থেকে কত দূরে রয়েছে তার উপর ভিত্তি করে অস্বচ্ছতা সামঞ্জস্য করতে, পেজারের ভিতরে একটি আইটেমে Modifier.graphicsLayer
ব্যবহার করে alpha
পরিবর্তন করুন:
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 }
VerticalPager
জন্য অনুরূপ প্রভাব অর্জন করতে আপনি top
এবং bottom
মানগুলি সেট করতে পারেন। মান 32.dp
এখানে শুধুমাত্র একটি উদাহরণ হিসাবে ব্যবহার করা হয়েছে; আপনি প্রতিটি প্যাডিং মাত্রা যেকোনো মান সেট করতে পারেন।
স্ক্রোল আচরণ কাস্টমাইজ করুন
ডিফল্ট HorizontalPager
এবং VerticalPager
কম্পোজেবল নির্দিষ্ট করে কিভাবে স্ক্রলিং অঙ্গভঙ্গি পেজারের সাথে কাজ করে। যাইহোক, আপনি pagerSnapDistance
বা flingBehavior
এর মতো ডিফল্টগুলি কাস্টমাইজ এবং পরিবর্তন করতে পারেন।
স্ন্যাপ দূরত্ব
ডিফল্টরূপে, HorizontalPager
এবং VerticalPager
সর্বোচ্চ সংখ্যক পৃষ্ঠা সেট করে যা একটি ফ্লিং অঙ্গভঙ্গি একবারে একটি পৃষ্ঠায় স্ক্রোল করতে পারে। এটি পরিবর্তন করতে, flingBehavior
এ pagerSnapDistance
সেট করুন:
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), beyondViewportPageCount = 10, flingBehavior = fling ) { PagerSampleItem(page = it) } }
একটি স্বয়ংক্রিয় অগ্রগতি পেজার তৈরি করুন
এই বিভাগটি বর্ণনা করে যে কীভাবে রচনায় পৃষ্ঠা নির্দেশক সহ একটি স্বয়ংক্রিয়-অগ্রসর পেজার তৈরি করা যায়। আইটেমগুলির সংগ্রহ স্বয়ংক্রিয়ভাবে অনুভূমিকভাবে স্ক্রোল করে, তবে ব্যবহারকারীরা ম্যানুয়ালি আইটেমগুলির মধ্যে সোয়াইপ করতে পারেন। একজন ব্যবহারকারী পেজারের সাথে ইন্টারঅ্যাক্ট করলে, এটি স্বয়ংক্রিয় অগ্রগতি বন্ধ করে দেয়।
মৌলিক উদাহরণ
একসাথে, নিম্নলিখিত স্নিপেটগুলি একটি ভিজ্যুয়াল সূচক সহ একটি মৌলিক স্বয়ংক্রিয়-অগ্রসর পেজার বাস্তবায়ন তৈরি করে, যেখানে প্রতিটি পৃষ্ঠা আলাদা রঙ হিসাবে রেন্ডার করে:
@Composable fun AutoAdvancePager(pageItems: List<Color>, modifier: Modifier = Modifier) { Box(modifier = Modifier.fillMaxSize()) { val pagerState = rememberPagerState(pageCount = { pageItems.size }) val pagerIsDragged by pagerState.interactionSource.collectIsDraggedAsState() val pageInteractionSource = remember { MutableInteractionSource() } val pageIsPressed by pageInteractionSource.collectIsPressedAsState() // Stop auto-advancing when pager is dragged or one of the pages is pressed val autoAdvance = !pagerIsDragged && !pageIsPressed if (autoAdvance) { LaunchedEffect(pagerState, pageInteractionSource) { while (true) { delay(2000) val nextPage = (pagerState.currentPage + 1) % pageItems.size pagerState.animateScrollToPage(nextPage) } } } HorizontalPager( state = pagerState ) { page -> Text( text = "Page: $page", textAlign = TextAlign.Center, modifier = modifier .fillMaxSize() .background(pageItems[page]) .clickable( interactionSource = pageInteractionSource, indication = LocalIndication.current ) { // Handle page click } .wrapContentSize(align = Alignment.Center) ) } PagerIndicator(pageItems.size, pagerState.currentPage) } }
কোড সম্পর্কে মূল পয়েন্ট
-
AutoAdvancePager
ফাংশন স্বয়ংক্রিয় অগ্রগতির সাথে একটি অনুভূমিকভাবে পেজিং দৃশ্য তৈরি করে। এটি ইনপুট হিসাবেColor
বস্তুর একটি তালিকা নেয়, যা প্রতিটি পৃষ্ঠার জন্য পটভূমির রঙ হিসাবে ব্যবহৃত হয়। -
pagerState
rememberPagerState
ব্যবহার করে তৈরি করা হয়েছে, যা পেজারের অবস্থা ধারণ করে। -
pagerIsDragged
এবংpageIsPressed
ট্র্যাক ব্যবহারকারী ইন্টারঅ্যাকশন। -
LaunchedEffect
প্রতি দুই সেকেন্ডে পেজারটিকে স্বয়ংক্রিয়ভাবে অগ্রসর করে, যদি না ব্যবহারকারী পেজারটিকে টেনে না নেয় বা পৃষ্ঠাগুলির একটিতে চাপ দেয়। -
HorizontalPager
পৃষ্ঠাগুলির একটি তালিকা প্রদর্শন করে, প্রতিটিতে একটিText
কম্পোজযোগ্য পৃষ্ঠা নম্বর প্রদর্শন করে। সংশোধক পৃষ্ঠাটি পূরণ করে,pageItems
থেকে পটভূমির রঙ সেট করে এবং পৃষ্ঠাটিকে ক্লিকযোগ্য করে তোলে।
@Composable fun PagerIndicator(pageCount: Int, currentPageIndex: Int, modifier: Modifier = Modifier) { Box(modifier = Modifier.fillMaxSize()) { Row( modifier = Modifier .wrapContentHeight() .fillMaxWidth() .align(Alignment.BottomCenter) .padding(bottom = 8.dp), horizontalArrangement = Arrangement.Center ) { repeat(pageCount) { iteration -> val color = if (currentPageIndex == iteration) Color.DarkGray else Color.LightGray Box( modifier = modifier .padding(2.dp) .clip(CircleShape) .background(color) .size(16.dp) ) } } } }
কোড সম্পর্কে মূল পয়েন্ট
- একটি
Box
কম্পোজেবল মূল উপাদান হিসাবে ব্যবহৃত হয়।-
Box
ভিতরে, একটিRow
সংমিশ্রণযোগ্য পৃষ্ঠা নির্দেশকগুলিকে অনুভূমিকভাবে সাজায়।
-
- একটি কাস্টম পৃষ্ঠা নির্দেশক একটি বৃত্তের সারি হিসাবে প্রদর্শিত হয়, যেখানে একটি
circle
ক্লিপ করা প্রতিটিBox
একটি পৃষ্ঠার প্রতিনিধিত্ব করে। - বর্তমান পৃষ্ঠার বৃত্তটি একটি
DarkGray
হিসাবে রঙিন, অন্য বৃত্তগুলিLightGray
।currentPageIndex
প্যারামিটার নির্ধারণ করে কোন বৃত্তটি গাঢ় ধূসর রঙে রেন্ডার করে।
ফলাফল
এই ভিডিওটি পূর্ববর্তী স্নিপেটগুলি থেকে মৌলিক স্বয়ংক্রিয় অগ্রগতি পেজার প্রদর্শন করে:
এখন দেখানোর মতো কোনও সাজেশন নেই।
আপনার Google অ্যাকাউন্টে সাইন-ইন করে দেখুন।