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

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

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

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

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

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 পজিশনিং নিশ্চিত করতে, এগুলি অ্যাপ এবং স্বতন্ত্র স্ক্রিনের মধ্যে কোঅর্ডিনেট করে (নেভিগেশন রুট)।

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

• সঠিক প্যাডিং নির্ধারণ করতে প্রথম ও শেষ ItemType-এর স্পেসিফিকেশন।
• তালিকার প্রথম আইটেমের জন্য ListHeader ব্যবহার করা হয়েছে, কারণ Text হেডারে প্যাডিং থাকা উচিত নয়।

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

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

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

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

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

ডায়ালগ

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

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

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

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

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

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

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 প্রিভিউ কনফিগার করা, কাস্টম হার্ডওয়্যার স্পেসিফিকেশন এবং স্ক্রল করা তালিকা প্রিভিউ করা সংক্রান্ত সম্পূর্ণ বিবরণের জন্য, Wear OS-এর জন্য Compose-এ আপনার 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 নমুনা দেখুন।