বিভিন্ন স্ক্রিনের আকারের জন্য বিকাশ করুন

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

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

Horologist ব্যবহার করে প্রতিক্রিয়াশীল লেআউট তৈরি করুন

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

• অনুভূমিক মার্জিনগুলি ডিভাইসের পর্দার আকারের শতাংশের উপর ভিত্তি করে সঠিকভাবে সেট করা হয়েছে৷
• উপরের এবং নীচের ব্যবধান সঠিকভাবে সেট করা হয়েছে। এটি বিশেষ চ্যালেঞ্জ উপস্থাপন করে কারণ প্রস্তাবিত উপরের এবং নীচের ব্যবধানটি ব্যবহৃত উপাদানগুলির উপর নির্ভর করতে পারে। উদাহরণস্বরূপ, একটি তালিকায় ব্যবহার করার সময় একটি Chip একটি Text উপাদানের সাথে আলাদা ব্যবধান থাকা উচিত।
• TimeText মার্জিন সঠিকভাবে সেট করা হয়েছে।

নিম্নলিখিত কোড স্নিপেট বিভিন্ন Wear OS স্ক্রীন আকারে দুর্দান্ত দেখায় এমন সামগ্রী তৈরি করতে ScalingLazyColumn লেআউটের Horologist-এর সংস্করণ ব্যবহার করে:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

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

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

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

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

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

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

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

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

ডায়ালগ

ডায়ালগগুলিও স্ক্রোলযোগ্য হওয়া উচিত, যদি না করার খুব ভাল কারণ না থাকে। ResponsiveDialog উপাদান, হরোলজিস্ট দ্বারা প্রদত্ত, নিম্নলিখিতগুলি যোগ করে:

• ডিফল্টরূপে স্ক্রলিং।
• সঠিক শতাংশ-ভিত্তিক মার্জিন।
• বর্ধিত ট্যাপ-টার্গেট প্রদান করার জন্য স্থান অনুমতি দেয় এমন বোতামগুলি তাদের প্রস্থকে সামঞ্জস্য করে।

প্রতিক্রিয়াশীল ডায়ালগ, ডিফল্টরূপে স্ক্রলিং প্রদান করে এবং উপলব্ধ স্থানের সাথে খাপ খায় এমন বোতাম।

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

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

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

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

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

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.
}

ডিজাইন নির্দেশিকা এই সুযোগগুলির আরও চিত্রিত করে।

প্রিভিউ ব্যবহার করে স্ক্রীন এবং ফন্টের আকারের সমন্বয় পরীক্ষা করুন

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

• আপনার স্ক্রিনগুলি কীভাবে আকারের চরম আকারে দেখায়, উদাহরণস্বরূপ, সবচেয়ে ছোট স্ক্রীনের সাথে যুক্ত বৃহত্তম ফন্ট।
• ব্রেকপয়েন্ট জুড়ে আপনার ভিন্ন অভিজ্ঞতা কীভাবে আচরণ করে।

আপনি আপনার অ্যাপের সমস্ত স্ক্রিনের জন্য WearPreviewDevices এবং WearPreviewFontScales ব্যবহার করে প্রিভিউ প্রয়োগ করছেন তা নিশ্চিত করুন।

@WearPreviewDevices
@WearPreviewFontScales
@Composable
fun ListScreenPreview() {
    ListScreen()
}

স্ক্রিনশট পরীক্ষা

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

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

আমাদের নমুনা স্ক্রিনশট পরীক্ষার জন্য Roborazzi ব্যবহার করে:

1. Roborazzi ব্যবহার করতে আপনার প্রকল্প এবং app build.gradle ফাইল কনফিগার করুন।
2. আপনার অ্যাপে থাকা প্রতিটি স্ক্রিনের জন্য একটি স্ক্রিনশট পরীক্ষা তৈরি করুন। উদাহরণস্বরূপ, ComposeStarter নমুনায়, GreetingScreenTest এ দেখানো হিসাবে GreetingScreen জন্য একটি পরীক্ষা কার্যকর করা হয়েছে:

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

    @Test
    fun greetingScreenTest() = runTest {
        AppScaffold(
            timeText = { ResponsiveTimeText(timeSource = FixedTimeSource) }
        ) {
            GreetingScreen(greetingName = "screenshot", onShowList = {})
        }
    }

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

উল্লেখ্য কিছু গুরুত্বপূর্ণ পয়েন্ট:

• FixedTimeSource আপনাকে স্ক্রিনশট তৈরি করতে দেয় যেখানে TimeText পরিবর্তিত হয় না এবং অসাবধানতাবশত পরীক্ষাগুলি ব্যর্থ হয়।
• WearDevice.entries সর্বাধিক জনপ্রিয় Wear OS ডিভাইসের সংজ্ঞা রয়েছে যাতে পরীক্ষাগুলি স্ক্রিনের আকারের একটি প্রতিনিধি পরিসরে চালানো হয়।

সোনালী ছবি তৈরি করুন

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

./gradlew recordRoborazziDebug

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

বিদ্যমান চিত্রগুলির বিরুদ্ধে পরিবর্তনগুলি যাচাই করতে, একটি টার্মিনালে নিম্নলিখিত কমান্ডটি চালান:

./gradlew verifyRoborazziDebug

স্ক্রিনশট পরীক্ষার একটি সম্পূর্ণ উদাহরণের জন্য, ComposeStarter নমুনা দেখুন।