রচনায় পেজার

একটি বাম এবং ডান বা উপরে এবং নীচের পদ্ধতিতে বিষয়বস্তু ফ্লিপ করতে, আপনি যথাক্রমে 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 ব্যবহার করুন:

চিত্র ২ । 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),
        beyondBoundsPageCount = 10,
        flingBehavior = fling
    ) {
        PagerSampleItem(page = it)
    }
}
PagerSnippets.kt

{% শব্দার্থে %} {% endverbatim %} {% শব্দার্থে %} {% endverbatim %}
পূর্ববর্তী
সংশোধকদের তালিকা
পরবর্তী
ফ্লো লেআউট