বিভিন্ন স্ক্রিনের আকারের জন্য টাইলস তৈরি করুন

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

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

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

প্রোটোলেআউট মেটেরিয়াল লাইব্রেরি আপনাকে আপনার টাইলস তৈরি করতে সাহায্য করার জন্য পূর্বনির্ধারিত লেআউট প্রদান করে। এই লেআউটগুলি ইতিমধ্যেই পর্দার আকারের সাথে মানিয়ে নেওয়ার জন্য ডিজাইন করা হয়েছে৷

ফিগমা ডিজাইন লেআউটগুলি পড়ুন, যা উপলব্ধ ক্যানোনিকাল লেআউটগুলি প্রদর্শন করে এবং সেগুলি ব্যবহার করে কীভাবে আপনার নকশা তৈরি করতে হয়:

আমরা বেশিরভাগ ব্যবহারের ক্ষেত্রে PrimaryLayout বা EdgeContentLayout টপ-লেভেল লেআউট হিসেবে সুপারিশ করি। setResponsiveContentInsetEnabled ব্যবহার করে প্রতিক্রিয়াশীল আচরণ সেট করুন, উদাহরণস্বরূপ:

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        // ...
    )
.build()

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

প্রোটোলেআউট মেটেরিয়াল লাইব্রেরির লেআউটগুলি ইতিমধ্যেই প্রতিক্রিয়াশীল এবং সঠিক উপাদান স্থাপন এবং দৃশ্যমানতার যত্ন নেয়। যাইহোক, কিছু ক্ষেত্রে আপনি সেরা ফলাফলের জন্য দৃশ্যমান উপাদানের সংখ্যা পরিবর্তন করতে চাইতে পারেন। উদাহরণস্বরূপ, আপনি একটি ছোট ডিসপ্লেতে 3টি বোতাম এবং একটি বড় ডিসপ্লেতে 5টি বোতাম চাইতে পারেন৷

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

PrimaryLayout.Builder(deviceParameters)
    .setResponsiveContentInsetEnabled(true)
    .setContent(
        MultiButtonLayout.Builder()
            .addButtonContent(button1)
            .addButtonContent(button2)
            .addButtonContent(button3)
            .apply {
                if (deviceParameters.screenHeightDp >= 225) {
                    addButtonContent(button4)
                    addButtonContent(button5)
                }
            }
            .build()
    )
    .setPrimaryLabelTextContent(label)
    .setPrimaryChipContent(compactChip)
    .build()

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

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

বিভিন্ন স্ক্রিনের আকারে আপনার লেআউট পরীক্ষা করা গুরুত্বপূর্ণ। TilePreviewHelper এবং TilePreviewData ক্লাস সহ টাইল প্রিভিউ টীকা ব্যবহার করুন:

@Preview(device = WearDevices.LARGE_ROUND)
fun smallPreview(context: Context) = TilePreviewData(
    onTileRequest = { request ->
        TilePreviewHelper.singleTimelineEntryTileBuilder(
            buildLayout()
        ).build()
    }
)

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

বড় ডিসপ্লেতে অতিরিক্ত বোতাম

ছোট এবং বড় ডিসপ্লে ব্রেকপয়েন্টের প্রভাব দেখায়

একটি সম্পূর্ণ উদাহরণের জন্য, GitHub এ মিডিয়া টাইলস নমুনা দেখুন।