বিভিন্ন স্ক্রিন সাইজের জন্য ডেভেলপ করা

Compose for Wear OS Material ভার্সন ২.৫ ৩

---

আপনার অ্যাপটি সব সাইজের Wear OS ডিভাইসে ভালভাবে কাজ করা উচিত, যেখানে উপলভ্য সেখানে অতিরিক্ত স্পেসের সুবিধা নেওয়া উচিত এবং ছোট স্ক্রিনেও ভাল দেখাবে। এই নির্দেশিকা ব্যবহারকারীর অভিজ্ঞতা উন্নত করার জন্য সাজেশন প্রদান করে।

অ্যাডাপ্টিভ লেআউটের জন্য ডিজাইন নীতি সম্পর্কে আরও জানতে, ডিজাইন সংক্রান্ত নির্দেশিকা পড়ুন।

Material 3 ব্যবহার করে রেসপন্সিভ লেআউট তৈরি করা

লেআউটে শতাংশ-ভিত্তিক মার্জিন থাকতে হবে। Wear Compose Material 3-তে, ScreenScaffold অটোমেটিক শতাংশ-ভিত্তিক প্যাডিং গণনা করে এবং এর কন্টেন্ট ল্যাম্বডাতে contentPadding প্রদান করে; এই contentPadding প্যারামিটারটি TransformingLazyColumn-এ পাস করুন।

নিম্নলিখিত কোড স্নিপেট একটি TransformingLazyColumn কম্পোনেন্ট ব্যবহার করে কন্টেন্ট তৈরি করে যা বিভিন্ন Wear OS স্ক্রিনের সাইজে দারুণ দেখায়:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

এই উদাহরণে ScreenScaffold ও AppScaffold-এর ব্যবহারও দেখানো হয়েছে। এগুলি অ্যাপ এবং স্বতন্ত্র স্ক্রিনের মধ্যে সমন্বয় করে (নেভিগেশন রুট) যাতে সঠিক স্ক্রোলিং আচরণ এবং TimeText পজিশনিং নিশ্চিত করা যায়।

উপর ও নিচের প্যাডিংয়ের জন্য, নিম্নলিখিত বিষয়গুলিও মনে রাখবেন:

• Modifier.minimumVerticalContentPadding-এর ব্যবহার (যেমন ListHeaderDefaults.minimumTopListContentPadding এবং ButtonDefaults.minimumVerticalListContentPadding), যাতে TransformingLazyColumn অন্তত সাজেস্ট করা টপ ও বটম প্যাডিং ব্যবহার করে যখন সেইসব আইটেম তালিকার প্রান্তে দেখা যায়।
• তালিকার প্রথম আইটেমের জন্য ListHeader-এর ব্যবহার, সাধারণ Text কম্পোজেবলের পরিবর্তে।

সম্পূর্ণ স্পেসিফিকেশন Figma ডিজাইন কিট-এ পাওয়া যাবে। আরও বিবরণ ও উদাহরণের জন্য, দেখুন:

• Horologist লাইব্রেরি - Wear OS-এর জন্য অপ্টিমাইজ করা ও আলাদা অ্যাপ তৈরি করতে সাহায্য করে।
• ComposeStarter স্যাম্পেল - এই গাইডে উল্লেখ করা নীতিগুলি দেখানোর একটি উদাহরণ।
• JetCaster স্যাম্পেল - Horologist লাইব্রেরি ব্যবহার করে, বিভিন্ন স্ক্রিন সাইজে কাজ করার জন্য অ্যাপ তৈরি করার আরও জটিল উদাহরণ।

আপনার অ্যাপে স্ক্রল করার লেআউট ব্যবহার করা

আপনার স্ক্রিন প্রয়োগ করার সময় ডিফল্ট বিকল্প হিসেবে, এই পৃষ্ঠায় আগে দেখানো স্ক্রলিং লেআউট ব্যবহার করুন। এর ফলে, ডিসপ্লে সংক্রান্ত পছন্দ বা Wear OS ডিভাইসের স্ক্রিনের সাইজ যাই হোক না কেন, ব্যবহারকারীরা আপনার অ্যাপের কম্পোনেন্ট অ্যাক্সেস করতে পারবেন।

বিভিন্ন ডিভাইসের সাইজ ও ফন্ট-স্কেলিংয়ের প্রভাব।

ডায়ালগ

এছাড়াও, ডায়ালগ স্ক্রল করার সুবিধা থাকতে হবে, যদি না স্ক্রল করার সুবিধা না দেওয়ার কোনও খুব ভালো কারণ থাকে। AlertDialog কম্পোনেন্ট রেসপন্সিভ এবং ডিফল্ট হিসেবে স্ক্রল করা যায় যদি কন্টেন্ট ভিউপোর্ট উচ্চতার থেকে বেশি হয়।

কাস্টম স্ক্রিনের জন্য নন-স্ক্রলিং লেআউটের প্রয়োজন হতে পারে

কিছু স্ক্রিন এখনও স্ক্রল না করা লেআউটের জন্য উপযুক্ত হতে পারে। মিডিয়া অ্যাপের মূল প্লেয়ার স্ক্রিন এবং ফিটনেস অ্যাপের ওয়ার্কআউট স্ক্রিন হল এর কয়েকটি উদাহরণ।

এইসব ক্ষেত্রে, Figma ডিজাইন কিট-এ দেওয়া ক্যানোনিকাল নির্দেশিকা দেখুন এবং সঠিক মার্জিন ব্যবহার করে স্ক্রিনের সাইজের সাথে মানানসই ডিজাইন প্রয়োগ করুন।

ব্রেকপয়েন্টের মাধ্যমে আলাদা আলাদা অভিজ্ঞতা প্রদান করা

আরও বড় ডিসপ্লেতে আপনি অতিরিক্ত কন্টেন্ট ও ফিচার দেখাতে পারবেন। এই ধরনের আলাদা আলাদা অভিজ্ঞতা প্রদান করতে, স্ক্রিন সাইজ ব্রেকপয়েন্ট ব্যবহার করুন, স্ক্রিনের সাইজ ২২৫ ডিপি-র বেশি হলে আলাদা লেআউট দেখান:

const val LARGE_DISPLAY_BREAKPOINT = 225

@Composable
fun isLargeDisplay() =
    LocalConfiguration.current.screenWidthDp >= LARGE_DISPLAY_BREAKPOINT

// ...
// ... use in your Composables:
    if (isLargeDisplay()) {
        // Show additional content.
    } else {
        // Show content only for smaller displays.
    }
    // ...
List.kt

ডিজাইন সংক্রান্ত নির্দেশিকা থেকে এই ধরনের সুযোগ সম্পর্কে আরও জানতে পারবেন।

প্রিভিউ ব্যবহার করে স্ক্রিন ও ফন্টের সাইজের কম্বিনেশন পরীক্ষা করুন

কম্পোজ প্রিভিউ আপনাকে বিভিন্ন Wear OS স্ক্রিন সাইজের জন্য ডেভেলপ করতে সাহায্য করে। নিম্নলিখিত বিষয়গুলি দেখতে ডিভাইস ও ফন্ট-স্কেলিং প্রিভিউয়ের সংজ্ঞা ব্যবহার করুন:

• সাইজের ক্ষেত্রে আপনার স্ক্রিন কেমন দেখায়, যেমন, সবচেয়ে ছোট স্ক্রিনের সাথে সবচেয়ে বড় ফন্ট।
• বিভিন্ন ব্রেকপয়েন্টে আপনার আলাদা অভিজ্ঞতা কেমন কাজ করে।

আপনার অ্যাপের সব স্ক্রিনের জন্য WearPreviewDevices এবং WearPreviewFontScales ব্যবহার করে প্রিভিউ প্রয়োগ করা নিশ্চিত করুন। Wear OS প্রিভিউ, কাস্টম হার্ডওয়্যার স্পেসিফিকেশন এবং স্ক্রল করা তালিকার প্রিভিউ কনফিগার করার বিষয়ে সম্পূর্ণ বিবরণের জন্য, Compose for Wear OS-এ আপনার UI-এর প্রিভিউ দেখুন।

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ComposeListPreview() {
    ComposeList()
}
List.kt

স্ক্রিনশট টেস্টিং

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

স্ক্রিনশট টেস্টিং আপনার কোডবেসের নির্দিষ্ট লোকেশনে রিগ্রেশন শনাক্ত করতেও সাহায্য করে।

স্ক্রিনশট টেস্টিংয়ের জন্য আমাদের স্যাম্পেল Roborazzi ব্যবহার করে:

1. Roborazzi ব্যবহার করার জন্য আপনার প্রোজেক্ট এবং অ্যাপ build.gradle ফাইল কনফিগার করুন।
2. আপনার অ্যাপে থাকা প্রতিটি স্ক্রিনের জন্য একটি স্ক্রিনশট টেস্ট তৈরি করুন। যেমন, নিম্নলিখিত কোডটি একটি তালিকা সহ স্ক্রিনের জন্য একটি স্ক্রিনশট টেস্ট দেখায়:

@RunWith(ParameterizedRobolectricTestRunner::class)
class ComposeListScreenTest(
    override val device: WearDevice
) : WearScreenshotTest() {
    override val tolerance = 0.02f

    @Test
    fun myScreenTest() =
        runTest {
            AppScaffold {
                ComposeList()
            }
        }

    companion object {
        @JvmStatic
        @ParameterizedRobolectricTestRunner.Parameters
        fun devices() = WearDevice.entries
    }
}
ListTest.kt

মনে রাখার মতো কিছু গুরুত্বপূর্ণ পয়েন্ট:

• WearDevice.entries-এ সবচেয়ে জনপ্রিয় Wear OS ডিভাইসের সংজ্ঞা থাকে যাতে স্ক্রিন সাইজের প্রতিনিধিত্বমূলক রেঞ্জে পরীক্ষা চালানো যায়।

গোল্ডেন ইমেজ জেনারেট করুন

আপনার স্ক্রিনের জন্য ছবি তৈরি করতে, টার্মিনালে নিম্নলিখিত কমান্ড রান করুন:

./gradlew recordRoborazziDebug

ছবি যাচাই করুন

আগে থেকে থাকা ছবির সাথে পরিবর্তন যাচাই করতে, টার্মিনালে নিম্নলিখিত কমান্ড রান করুন:

./gradlew verifyRoborazziDebug

স্ক্রিনশট টেস্টিংয়ের সম্পূর্ণ উদাহরণ দেখতে, ComposeStarter স্যাম্পেল দেখুন।