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

ध्यान दें: यह गाइड, Android व्यू के इस्तेमाल से जुड़ी है. इसलिए, Wear OS के लिए कंपोज़ करें, यह एलान करने वाला एक आधुनिक तरीका है हम पहने जाने वाले डिवाइसों पर यूज़र इंटरफ़ेस (यूआई) बनाने के बारे में सोच रहे हैं. Jetpack 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 पर सूचियां बनाएं.