একটি প্যারালাক্স স্ক্রলিং প্রভাব তৈরি করুন

প্যারালাক্স স্ক্রলিং এমন একটি কৌশল যেখানে ব্যাকগ্রাউন্ড এবং ফোরগ্রাউন্ড কন্টেন্ট ভিন্ন গতিতে স্ক্রল হয়। ব্যবহারকারীরা স্ক্রল করার সময় আরও গতিশীল অভিজ্ঞতা তৈরি করতে, আপনি আপনার অ্যাপের UI উন্নত করার জন্য এই কৌশলটি প্রয়োগ করতে পারেন।

ফলাফল

চিত্র ১. প্যারালাক্স প্রভাবসহ একটি স্ক্রোলিং তালিকা।

সংস্করণ সামঞ্জস্যতা

এই বাস্তবায়নের জন্য আপনার প্রোজেক্টের minSDK অবশ্যই API লেভেল ২১ বা তার বেশি হতে হবে।

নির্ভরশীলতা

প্যারালাক্স এফেক্ট তৈরি করুন

প্যারালাক্স এফেক্টটি প্রয়োগ করতে, স্ক্রলিং কম্পোজেবল থেকে স্ক্রলিং ভ্যালুর একটি ভগ্নাংশ সেই কম্পোজেবলটিতে প্রয়োগ করতে হয় যেখানে প্যারালাক্স এফেক্টটি প্রয়োজন। নিচের কোড স্নিপেটটি দুটি নেস্টেড ভিজ্যুয়াল এলিমেন্ট—একটি ছবি এবং একটি টেক্সট ব্লক—নিয়ে সেগুলোকে একই দিকে ভিন্ন ভিন্ন গতিতে স্ক্রল করে: 

@Composable
fun ParallaxEffect() {
    fun Modifier.parallaxLayoutModifier(scrollState: ScrollState, rate: Int) =
        layout { measurable, constraints ->
            val placeable = measurable.measure(constraints)
            val height = if (rate > 0) scrollState.value / rate else scrollState.value
            layout(placeable.width, placeable.height) {
                placeable.place(0, height)
            }
        }

    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .verticalScroll(scrollState),
    ) {

        Image(
            painterResource(id = R.drawable.cupcake),
            contentDescription = "Android logo",
            contentScale = ContentScale.Fit,
            // Reduce scrolling rate by half.
            modifier = Modifier.parallaxLayoutModifier(scrollState, 2)
        )

        Text(
            text = stringResource(R.string.detail_placeholder),
            modifier = Modifier
                .background(Color.White)
                .padding(horizontal = 8.dp),

        )
    }
}
ParallaxEffect.kt

কোড সম্পর্কে মূল বিষয়গুলো

  • কম্পোজেবলটির স্ক্রলের হার সমন্বয় করার জন্য একটি কাস্টম layout মডিফায়ার তৈরি করে।
  • Image Text চেয়ে ধীর গতিতে স্ক্রল করে, ফলে এই দুটি উপাদান ভিন্ন গতিতে উল্লম্বভাবে স্থানান্তরিত হওয়ায় একটি প্যারালাক্স প্রভাব তৈরি হয়।

যে সংগ্রহগুলিতে এই নির্দেশিকাটি রয়েছে

এই নির্দেশিকাটি বিশেষভাবে নির্বাচিত কুইক গাইড সংকলনগুলোর একটি অংশ, যা অ্যান্ড্রয়েড ডেভেলপমেন্টের বৃহত্তর লক্ষ্যগুলো পূরণ করে:

তালিকা এবং গ্রিড আপনার অ্যাপকে সংগ্রহগুলিকে এমন একটি দৃষ্টিনন্দন রূপে প্রদর্শন করতে সাহায্য করে যা ব্যবহারকারীদের জন্য সহজে বোধগম্য হয়।
দ্রুত নির্দেশিকা সংগ্রহ
আপনার অ্যান্ড্রয়েড অ্যাপকে একটি সুন্দর রূপ ও অনুভূতি দিতে উজ্জ্বল ও আকর্ষণীয় ভিজ্যুয়াল ব্যবহারের কৌশলগুলো জেনে নিন।
দ্রুত নির্দেশিকা সংগ্রহ

টেক্সট প্রদর্শন করুন

যেকোনো UI-এর একটি কেন্দ্রীয় অংশ হলো টেক্সট। আপনার অ্যাপে টেক্সট উপস্থাপনের বিভিন্ন উপায় জেনে নিন, যা ব্যবহারকারীকে একটি আনন্দদায়ক অভিজ্ঞতা দেবে।
দ্রুত নির্দেশিকা সংগ্রহ

কোনো প্রশ্ন বা মতামত থাকলে

আমাদের প্রায়শই জিজ্ঞাসিত প্রশ্নাবলী পেজে গিয়ে সংক্ষিপ্ত নির্দেশিকাগুলো সম্পর্কে জানুন অথবা আমাদের সাথে যোগাযোগ করে আপনার মতামত জানান।
প্রায়শই জিজ্ঞাসিত প্রশ্নাবলীতে যান মতামত দিন