রচনায় পেজার

একটি বাম এবং ডান বা উপরে এবং নীচের পদ্ধতিতে বিষয়বস্তু ফ্লিপ করতে, আপনি যথাক্রমে HorizontalPager এবং VerticalPager কম্পোজেবল ব্যবহার করতে পারেন। এই কম্পোজেবলগুলির ভিউ সিস্টেমে ViewPager অনুরূপ ফাংশন রয়েছে। ডিফল্টরূপে, HorizontalPager স্ক্রিনের পুরো প্রস্থ নেয়, VerticalPager পুরো উচ্চতা নেয়, এবং পেজাররা একবারে শুধুমাত্র একটি পৃষ্ঠা ফ্লাইং করে। এই ডিফল্ট সব কনফিগারযোগ্য.

HorizontalPager

একটি পেজার তৈরি করতে যা অনুভূমিকভাবে বাম এবং ডানদিকে স্ক্রোল করে, HorizontalPager ব্যবহার করুন:

চিত্র 1 । 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 ব্যবহার করুন:

চিত্র 2 । 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 সেট করুন।

পেজারে একটি আইটেমে স্ক্রোল করুন

পেজারে একটি নির্দিষ্ট পৃষ্ঠায় স্ক্রোল করতে, 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")
}
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 ফাংশন ব্যবহার করতে পারেন। উদাহরণস্বরূপ, প্রতিটি পৃষ্ঠা পরিবর্তনের একটি বিশ্লেষণ ইভেন্ট পাঠাতে, আপনি নিম্নলিখিতগুলি করতে পারেন:

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

চিত্র 3 । পেজার সামগ্রীর নীচে একটি বৃত্ত নির্দেশক দেখাচ্ছে৷

সামগ্রীতে আইটেম স্ক্রোল প্রভাব প্রয়োগ করুন

একটি সাধারণ ব্যবহারের ক্ষেত্রে আপনার পেজার আইটেমগুলিতে প্রভাব প্রয়োগ করতে স্ক্রোল অবস্থান ব্যবহার করা হয়। বর্তমানে নির্বাচিত পৃষ্ঠা থেকে একটি পৃষ্ঠা কত দূরে তা জানতে, আপনি PagerState.currentPageOffsetFraction ব্যবহার করতে পারেন। তারপরে আপনি নির্বাচিত পৃষ্ঠা থেকে দূরত্বের উপর ভিত্তি করে আপনার সামগ্রীতে রূপান্তর প্রভাব প্রয়োগ করতে পারেন।

চিত্র 4 । পেজার সামগ্রীতে রূপান্তর প্রয়োগ করা হচ্ছে

উদাহরণস্বরূপ, আইটেমগুলি কেন্দ্র থেকে কত দূরে রয়েছে তার উপর ভিত্তি করে অস্বচ্ছতা সামঞ্জস্য করতে, পেজারের ভিতরে একটি আইটেমে 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
    }
}
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

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)
    }
}
PagerSnippets.kt

একটি স্বয়ংক্রিয় অগ্রগতি পেজার তৈরি করুন

এই বিভাগটি বর্ণনা করে যে কীভাবে রচনায় পৃষ্ঠা নির্দেশক সহ একটি স্বয়ংক্রিয়-অগ্রসর পেজার তৈরি করা যায়। আইটেমগুলির সংগ্রহ স্বয়ংক্রিয়ভাবে অনুভূমিকভাবে স্ক্রোল করে, তবে ব্যবহারকারীরা ম্যানুয়ালি আইটেমগুলির মধ্যে সোয়াইপ করতে পারেন। একজন ব্যবহারকারী পেজারের সাথে ইন্টারঅ্যাক্ট করলে, এটি স্বয়ংক্রিয় অগ্রগতি বন্ধ করে দেয়।

মৌলিক উদাহরণ

একসাথে, নিম্নলিখিত স্নিপেটগুলি একটি ভিজ্যুয়াল সূচক সহ একটি মৌলিক স্বয়ংক্রিয়-অগ্রসর পেজার বাস্তবায়ন তৈরি করে, যেখানে প্রতিটি পৃষ্ঠা আলাদা রঙ হিসাবে রেন্ডার করে:

@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)
    }
}
PagerSnippets.kt

কোড সম্পর্কে মূল পয়েন্ট

• 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)
                )
            }
        }
    }
}
PagerSnippets.kt

কোড সম্পর্কে মূল পয়েন্ট

• একটি Box কম্পোজেবল মূল উপাদান হিসাবে ব্যবহৃত হয়।
  • Box ভিতরে, একটি Row সংমিশ্রণযোগ্য পৃষ্ঠা নির্দেশকগুলিকে অনুভূমিকভাবে সাজায়।
• একটি কাস্টম পৃষ্ঠা নির্দেশক একটি বৃত্তের সারি হিসাবে প্রদর্শিত হয়, যেখানে একটি circle ক্লিপ করা প্রতিটি Box একটি পৃষ্ঠার প্রতিনিধিত্ব করে।
• বর্তমান পৃষ্ঠার বৃত্তটি একটি DarkGray হিসাবে রঙিন, অন্য বৃত্তগুলি LightGray । currentPageIndex প্যারামিটার নির্ধারণ করে কোন বৃত্তটি গাঢ় ধূসর রঙে রেন্ডার করে।

ফলাফল

এই ভিডিওটি পূর্ববর্তী স্নিপেটগুলি থেকে মৌলিক স্বয়ংক্রিয় অগ্রগতি পেজার প্রদর্শন করে:

চিত্র 1 । প্রতিটি পৃষ্ঠার অগ্রগতির মধ্যে দুই সেকেন্ড বিলম্ব সহ একটি স্বয়ংক্রিয় অগ্রসর হওয়া পেজার।

{% শব্দার্থে %} {% endverbatim %}