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

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

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

ম্যাটেরিয়াল ৩ ব্যবহার করে রেসপন্সিভ লেআউট তৈরি করুন

লেআউটগুলিতে শতাংশ-ভিত্তিক মার্জিন থাকা উচিত। যেহেতু Compose ডিফল্টরূপে পরম মানে (absolute values) কাজ করে, তাই প্যাডিং গণনা করতে Horologist লাইব্রেরির rememberResponsiveColumnPadding ব্যবহার করুন এবং এটিকে ScreenScaffold এর contentPadding প্যারামিটার ও TransformingLazyColumn এর contentPadding প্যারামিটারে পাস করুন।

নিম্নলিখিত কোড স্নিপেটটি একটি 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,
                )
            }
        }
    }
}

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

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

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

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

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

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

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

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

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

সংলাপ

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

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

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

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

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

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

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 ComposeListPreview() {
    ComposeList()
}

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

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

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

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

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

কিছু গুরুত্বপূর্ণ বিষয় লক্ষণীয়:

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

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

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

./gradlew recordRoborazziDebug

ছবিগুলো যাচাই করুন

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

./gradlew verifyRoborazziDebug

স্ক্রিনশট টেস্টিং-এর একটি পূর্ণাঙ্গ উদাহরণের জন্য ComposeStarter স্যাম্পলটি দেখুন।