Wear OS पर मौजूद ऐप्लिकेशन, अन्य Android डिवाइसों जैसी ही लेआउट तकनीकों का इस्तेमाल करते हैं लेकिन उसे खास तौर पर घड़ी के हिसाब से डिज़ाइन किया जाना चाहिए.
ध्यान दें: किसी मोबाइल ऐप्लिकेशन से Wear OS में, जिस फ़ंक्शन और यूज़र इंटरफ़ेस (यूआई) को पोर्ट न करें एक अच्छा उपयोगकर्ता अनुभव मिलता है.
अगर ऐप्लिकेशन को हैंडहेल्ड वाले किसी आयताकार डिवाइस के लिए डिज़ाइन किया जाता है, तो स्क्रीन के कोनों के पास मौजूद कॉन्टेंट जिन्हें गोल घड़ियों पर काटा जा सकता है. अगर स्क्रोल की जा सकने वाली वर्टिकल सूची का इस्तेमाल किया जा रहा है, तो कोई समस्या हो सकती है, क्योंकि उपयोगकर्ता पेज को स्क्रोल करके कॉन्टेंट को बीच में देख सकता है. हालांकि, सिंगल स्क्रीन के लिए, से उपयोगकर्ता को खराब अनुभव मिलता है.
अगर लेआउट के लिए इन सेटिंग का इस्तेमाल किया जाता है, तो डिवाइसों पर टेक्स्ट गलत तरीके से दिखता है राउंड स्क्रीन के साथ:
a<ndroidx.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" > T<extView 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 का इस्तेमाल करें
![](https://developer.android.com/static/wear/images/02_uilib.png?authuser=19&hl=hi)
दूसरा डायग्राम. गोल स्क्रीन पर विंडो इनसेट में दिख रहे हैं.
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 पर सूचियां बनाएं.