ব্যবহারকারী-স্কেলেবল কন্টেন্ট সমর্থন করুন

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

একটি স্কেলিং কৌশল বেছে নিন

এই নির্দেশিকায় বর্ণিত কৌশলগুলি UI-কে স্ক্রিনের প্রস্থের সাথে মানানসই করে পুনর্গঠন এবং পুনর্গঠন করতে সাহায্য করে। এটি অনুভূমিক প্যানিংয়ের প্রয়োজনীয়তা এবং দীর্ঘ লাইনের লেখা পড়ার জন্য প্রয়োজনীয় হতাশাজনক "জিগ-জ্যাগ" গতি দূর করে একটি উল্লেখযোগ্য অ্যাক্সেসিবিলিটি সুবিধা প্রদান করে।

আরও পড়ুন : গবেষণা নিশ্চিত করে যে কম দৃষ্টিশক্তি সম্পন্ন ব্যবহারকারীদের জন্য, দ্বি-মাত্রিক প্যানিং প্রয়োজন এমন ইন্টারফেসের তুলনায় রিফ্লোয়িং কন্টেন্ট উল্লেখযোগ্যভাবে বেশি পঠনযোগ্য এবং নেভিগেট করা সহজ। আরও বিস্তারিত জানার জন্য, মোবাইল ডিভাইসে প্যান-এন্ড-স্ক্যান এবং রিফ্লোয়েবল কন্টেন্টের তুলনা দেখুন।

সকল উপাদান অথবা শুধুমাত্র টেক্সট উপাদান স্কেল করুন

নিম্নলিখিত টেবিলটি প্রতিটি স্কেলিং কৌশলের ভিজ্যুয়াল প্রভাব প্রদর্শন করে।

সুপারিশ

এখন যেহেতু আপনি দৃশ্যমান পার্থক্যগুলি দেখেছেন, নিম্নলিখিত টেবিলটি আপনাকে বিনিময় মূল্য নির্ধারণ করতে এবং আপনার সামগ্রীর জন্য সেরা কৌশলটি বেছে নিতে সহায়তা করবে।

জেটপ্যাক কম্পোজে স্কেলিং অঙ্গভঙ্গি সনাক্ত করুন

ব্যবহারকারী-স্কেলেবল কন্টেন্ট সমর্থন করার জন্য, আপনাকে প্রথমে মাল্টি-টাচ জেসচার সনাক্ত করতে হবে। জেটপ্যাক কম্পোজে, আপনি Modifier.transformable ব্যবহার করে এটি করতে পারেন।

transformable মডিফায়ার হল একটি উচ্চ-স্তরের API যা শেষ জেসচার ইভেন্ট থেকে zoomChange ডেল্টা প্রদান করে। এটি স্টেট আপডেট লজিককে সরাসরি সংগ্রহের জন্য সহজ করে তোলে (উদাহরণস্বরূপ, scale *= zoomChange ), যা এই নির্দেশিকায় বর্ণিত অভিযোজিত স্কেলিং কৌশলগুলির জন্য এটিকে আদর্শ করে তোলে।

উদাহরণ বাস্তবায়ন

নিম্নলিখিত উদাহরণগুলি দেখায় কিভাবে ঘনত্ব স্কেলিং এবং ফন্ট স্কেলিং কৌশলগুলি বাস্তবায়ন করতে হয়।

ঘনত্ব স্কেলিং

এই পদ্ধতিটি একটি UI এলাকার বেস density স্কেল করে। ফলস্বরূপ, সমস্ত লেআউট-ভিত্তিক পরিমাপ—প্যাডিং, স্পেসিং এবং কম্পোনেন্টের আকার সহ—এমনভাবে স্কেল করা হয় যেন স্ক্রিনের আকার বা রেজোলিউশন পরিবর্তিত হয়েছে। যেহেতু টেক্সটের আকারও ঘনত্বের উপর নির্ভর করে, তাই এটি আনুপাতিকভাবে স্কেল করে। এই কৌশলটি কার্যকর যখন আপনি একটি নির্দিষ্ট এলাকার মধ্যে সমস্ত উপাদানকে সমানভাবে বড় করতে চান, আপনার UI এর সামগ্রিক ভিজ্যুয়াল ছন্দ এবং অনুপাত বজায় রাখেন।

private class DensityScalingState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledDensity(): Density {
        return Density(
            currentDensity.density * scaleFactor.floatValue,
            currentDensity.fontScale
        )
    }
}
ScalableContentSnippets.kt

ফন্ট স্কেলিং

এই কৌশলটি আরও লক্ষ্যবস্তু, শুধুমাত্র fontScale ফ্যাক্টর পরিবর্তন করে। এর ফলে শুধুমাত্র টেক্সট উপাদানগুলি বৃদ্ধি পায় বা সঙ্কুচিত হয়, অন্যদিকে অন্যান্য সমস্ত লেআউট উপাদান - যেমন কন্টেইনার, প্যাডিং এবং আইকন - একটি নির্দিষ্ট আকারে থাকে। পঠন-নিবিড় অ্যাপগুলিতে টেক্সটের সুস্পষ্টতা উন্নত করার জন্য এই কৌশলটি বেশ উপযুক্ত।

class FontScaleState(
    // Note: For accessibility, typical min/max values are ~0.75x and ~3.5x.
    private val minScale: Float = 0.75f,
    private val maxScale: Float = 3.5f,
    private val currentDensity: Density
) {
    val transformableState = TransformableState { zoomChange, _, _ ->
        scaleFactor.floatValue =
            (scaleFactor.floatValue * zoomChange).coerceIn(minScale, maxScale)
    }
    val scaleFactor = mutableFloatStateOf(1f)
    fun scaledFont(): Density {
        return Density(
            currentDensity.density,
            currentDensity.fontScale * scaleFactor.floatValue
        )
    }
}
ScalableContentSnippets.kt

শেয়ার করা ডেমো UI

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

@Composable
private fun DemoCard() {
    Card(
        modifier = Modifier
            .width(360.dp)
            .padding(16.dp),
        shape = RoundedCornerShape(12.dp)
    ) {
        Column(
            modifier = Modifier.padding(16.dp),
            verticalArrangement = Arrangement.spacedBy(16.dp)
        ) {
            Text("Demo Card", style = MaterialTheme.typography.headlineMedium)
            var isChecked by remember { mutableStateOf(true) }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Text("Demo Switch", Modifier.weight(1f), style = MaterialTheme.typography.bodyLarge)
                Switch(checked = isChecked, onCheckedChange = { isChecked = it })
            }
            Row(verticalAlignment = Alignment.CenterVertically) {
                Icon(Icons.Filled.Person, "Icon", Modifier.size(32.dp))
                Spacer(Modifier.width(8.dp))
                Text("Demo Icon", style = MaterialTheme.typography.bodyLarge)
            }
            Row(
                Modifier.fillMaxWidth(),
                horizontalArrangement = Arrangement.SpaceBetween
            ) {
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Blue)
                )
                Box(
                    Modifier
                        .width(100.dp)
                        .weight(1f)
                        .height(80.dp)
                        .background(Color.Red)
                )
            }
            Text(
                "Demo Text: Lorem ipsum dolor sit amet, consectetur adipiscing elit," +
                    " sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
                style = MaterialTheme.typography.bodyMedium,
                textAlign = TextAlign.Justify
            )
        }
    }
}
ScalableContentSnippets.kt

টিপস এবং বিবেচনা

আরও মার্জিত এবং সহজলভ্য অভিজ্ঞতা তৈরি করতে, নিম্নলিখিত সুপারিশগুলি বিবেচনা করুন:

• নন-ইঙ্গিত স্কেল নিয়ন্ত্রণ অফার করার কথা বিবেচনা করুন : কিছু ব্যবহারকারীর অঙ্গভঙ্গিতে অসুবিধা হতে পারে। এই ব্যবহারকারীদের সমর্থন করার জন্য, স্কেলটি সামঞ্জস্য বা রিসেট করার একটি বিকল্প উপায় প্রদান করার কথা বিবেচনা করুন যা অঙ্গভঙ্গির উপর নির্ভর করে না।
• সকল স্কেলের জন্য তৈরি করুন : অ্যাপ-মধ্যস্থ স্কেলিং এবং সিস্টেম-ওয়াইড ফন্ট বা ডিসপ্লে সেটিংস উভয়ের সাথেই আপনার UI পরীক্ষা করুন। আপনার অ্যাপের লেআউটগুলি কন্টেন্ট ভাঙা, ওভারল্যাপ করা বা লুকানো ছাড়াই সঠিকভাবে মানিয়ে নিচ্ছে কিনা তা পরীক্ষা করুন। অ্যাডাপ্টিভ লেআউট কীভাবে তৈরি করবেন সে সম্পর্কে আরও জানুন।