বিভিন্ন ঘড়ি আকার হ্যান্ডেল

কম্পোজ পদ্ধতিটি চেষ্টা করুন
Wear OS-এর জন্য Jetpack Compose হলো প্রস্তাবিত UI টুলকিট।
Wear OS-এ Compose ব্যবহার করে দেখুন →

Wear OS-এর অ্যাপগুলো অন্যান্য অ্যান্ড্রয়েড ডিভাইসের মতোই লেআউট কৌশল ব্যবহার করে, কিন্তু সেগুলোকে ঘড়ির নির্দিষ্ট সীমাবদ্ধতা মাথায় রেখে ডিজাইন করতে হয়।

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

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

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

<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/text"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:text="@string/very_long_hello_world"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

এই সমস্যা সমাধানের জন্য, Wear OS UI লাইব্রেরিতে থাকা গোলাকার ডিভাইস সমর্থন করে এমন লেআউট ব্যবহার করুন।

  • গোলাকার স্ক্রিনের প্রান্তের কাছাকাছি ভিউগুলো যাতে কেটে না যায়, তা প্রতিরোধ করতে আপনি BoxInsetLayout ব্যবহার করতে পারেন।
  • যখন আপনি গোলাকার স্ক্রিনের জন্য অপ্টিমাইজ করা আইটেমের একটি উল্লম্ব তালিকা প্রদর্শন ও পরিচালনা করতে চান, তখন একটি বাঁকানো লেআউট তৈরি করতে আপনি WearableRecyclerView ব্যবহার করতে পারেন।

অ্যাপ ডিজাইন সম্পর্কে আরও তথ্যের জন্য, Wear OS ডিজাইন নির্দেশিকা পড়ুন।

BoxInsetLayout ব্যবহার করুন

চিত্র ২. একটি গোলাকার পর্দায় জানালার অন্তর্নির্মিত অংশ।

Wear OS UI লাইব্রেরির BoxInsetLayout ক্লাসটি আপনাকে গোলাকার স্ক্রিনের জন্য উপযোগী একটি লেআউট নির্ধারণ করতে দেয়। এই ক্লাসটি ব্যবহার করে আপনি সহজেই স্ক্রিনের কেন্দ্রে বা প্রান্তের কাছাকাছি ভিউগুলোকে সারিবদ্ধ করতে পারেন।

চিত্র ২-এর ধূসর বর্গক্ষেত্রটি সেই এলাকা নির্দেশ করে, যেখানে BoxInsetLayout প্রয়োজনীয় উইন্ডো ইনসেট প্রয়োগ করার পর গোলাকার স্ক্রিনে তার চাইল্ড ভিউগুলোকে স্বয়ংক্রিয়ভাবে স্থাপন করতে পারে। এই এলাকার মধ্যে প্রদর্শিত হওয়ার জন্য, চাইল্ড ভিউগুলো layout_boxedEdges অ্যাট্রিবিউটে নিম্নলিখিত মানগুলো নির্দিষ্ট করে:

  • top , bottom , left , এবং right এর একটি সমন্বয়। উদাহরণস্বরূপ, "left|top" মানটি চাইল্ডটির বাম এবং উপরের প্রান্তকে চিত্র ২-এর ধূসর বর্গক্ষেত্রের ভিতরে স্থাপন করে।
  • "all" ভ্যালুটি চাইল্ডের সমস্ত কন্টেন্টকে চিত্র ২-এর ধূসর বর্গক্ষেত্রটির ভিতরে স্থাপন করে। ভিতরে একটি ConstraintLayout থাকলে এটিই সবচেয়ে প্রচলিত পদ্ধতি।

চিত্র ২-এ দেখানো লেআউটটি <BoxInsetLayout> এলিমেন্ট ব্যবহার করে এবং এটি গোলাকার স্ক্রিনে কাজ করে:

<androidx.wear.widget.BoxInsetLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_height="match_parent"
    android:layout_width="match_parent"
    android:padding="15dp">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="5dp"
        app:layout_boxedEdges="all">

        <TextView
            android:layout_height="wrap_content"
            android:layout_width="match_parent"
            android:text="@string/sometext"
            android:textAlignment="center"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            android:src="@drawable/cancel" />

        <ImageButton
            android:background="@android:color/transparent"
            android:layout_height="50dp"
            android:layout_width="50dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            android:src="@drawable/ok" />

    </androidx.constraintlayout.widget.ConstraintLayout>

</androidx.wear.widget.BoxInsetLayout>

লেআউটের যে অংশগুলো গাঢ় অক্ষরে চিহ্নিত করা হয়েছে, সেগুলো লক্ষ্য করুন:

  • android:padding="15dp"

    এই লাইনটি <BoxInsetLayout> এলিমেন্টে প্যাডিং নির্ধারণ করে।

  • android:padding="5dp"

    এই লাইনটি ভেতরের ConstraintLayout এলিমেন্টে প্যাডিং নির্ধারণ করে।

  • app:layout_boxedEdges="all"

    এই লাইনটি নিশ্চিত করে যে গোলাকার স্ক্রিনে ConstraintLayout এলিমেন্ট এবং এর চাইল্ডগুলো উইন্ডো ইনসেট দ্বারা নির্ধারিত এলাকার মধ্যে আবদ্ধ থাকে।

একটি বক্র বিন্যাস ব্যবহার করুন

Wear OS UI লাইব্রেরির WearableRecyclerView ক্লাসটি আপনাকে গোলাকার স্ক্রিনের জন্য অপ্টিমাইজ করা একটি কার্ভড লেআউট বেছে নেওয়ার সুযোগ দেয়। আপনার অ্যাপে স্ক্রোলযোগ্য তালিকার জন্য কার্ভড লেআউট চালু করতে, Wear OS-এ তালিকা তৈরি করুন দেখুন।