स्मार्टवॉच के लिए अलग-अलग साइज़ का इस्तेमाल करना

Compose को आज़माएं

Wear OS के लिए, Jetpack Compose को यूज़र इंटरफ़ेस (यूआई) टूलकिट के तौर पर इस्तेमाल करने का सुझाव दिया जाता है.

Wear OS पर Compose आज़माएं →

Wear OS पर मौजूद ऐप्लिकेशन, अन्य Android डिवाइसों की तरह ही लेआउट की तकनीकों का इस्तेमाल करते हैं हालांकि, इन्हें स्मार्टवॉच के लिए तय की गई पाबंदियों के हिसाब से डिज़ाइन करना होता है.

ध्यान दें: मोबाइल ऐप्लिकेशन के फ़ंक्शन और यूज़र इंटरफ़ेस (यूआई) को 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 यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी में मौजूद उन लेआउट का इस्तेमाल करें जो गोल स्क्रीन वाले डिवाइसों के साथ काम करते हैं.

• BoxInsetLayout का इस्तेमाल करके, गोल स्क्रीन के किनारों के पास मौजूद व्यू को कटने से बचाया जा सकता है.
• अगर आपको गोल स्क्रीन के लिए ऑप्टिमाइज़ की गई आइटम की वर्टिकल सूची दिखानी है और उसमें बदलाव करना है, तो घुमावदार लेआउट बनाने के लिए WearableRecyclerView का इस्तेमाल किया जा सकता है.

ऐप्लिकेशन डिज़ाइन करने के बारे में ज़्यादा जानने के लिए, Wear OS के डिज़ाइन से जुड़े दिशा-निर्देश पढ़ें.

BoxInsetLayout का इस्तेमाल करना

दूसरी इमेज. गोल स्क्रीन पर विंडो इनसेट.

Wear OS यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी में मौजूद 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 यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी में मौजूद WearableRecyclerView क्लास की मदद से, गोल स्क्रीन के लिए ऑप्टिमाइज़ किए गए घुमावदार लेआउट का विकल्प चुना जा सकता है. अपने ऐप्लिकेशन में स्क्रोल की जा सकने वाली सूचियों के लिए घुमावदार लेआउट चालू करने का तरीका जानने के लिए, Wear OS पर सूचियां बनाना लेख पढ़ें.