ऐप्लिकेशन के लेआउट

Compose को आज़माएं
Wear OS पर Jetpack Compose, Wear OS के लिए सुझाया गया यूज़र इंटरफ़ेस टूलकिट है.

अलग-अलग शेप वाली स्मार्टवॉच को मैनेज करने का तरीका जानने के बाद, तय करें कि आपको किस सर्फ़ेस का इस्तेमाल करना है.

ऐप्लिकेशन के सामान्य लेआउट में ये शामिल हैं:

  • सिंगल स्क्रीन (सबसे आसान): यूज़र इंटरफ़ेस (यूआई) एलिमेंट सिर्फ़ उतने होते हैं जितने एक बार में बिना स्क्रोल किए दिखते हैं.
  • वर्टिकल कंटेनर (सबसे सामान्य): इसमें कॉन्टेंट, स्क्रीन पर दिखने वाले हिस्से से बाहर होता है. इसे स्क्रोल करके ऐक्सेस किया जा सकता है.
  • अन्य विकल्प: सूचियां, पेजिंग या 2D पैनिंग.

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

ध्यान दें: अपनी गतिविधि के लिए, ComponentActivity से इनहेरिट करें. अगर फ़्रैगमेंट का इस्तेमाल किया जाता है, तो FragmentActivity से इनहेरिट करें. गतिविधि के अन्य टाइप में, मोबाइल के हिसाब से यूज़र इंटरफ़ेस (यूआई) के एलिमेंट इस्तेमाल किए जाते हैं. Wear OS के लिए इनकी ज़रूरत नहीं होती.

सिंगल स्क्रीन

उपयोगकर्ता को एक ही स्क्रीन पर सभी एलिमेंट दिखते हैं. इसके लिए, उसे स्क्रोल करने की ज़रूरत नहीं पड़ती. इसका मतलब है कि आपको सिर्फ़ कुछ एलिमेंट शामिल करने की अनुमति है.

पहली इमेज. सिंगल स्क्रीन लेआउट का उदाहरण.

अपने एलिमेंट व्यवस्थित करने के लिए, सिंगल स्क्रीन को BoxInsetLayout के साथ ConstraintLayout के कॉम्बिनेशन में इस्तेमाल करें.

वर्टिकल कंटेनर

वर्टिकल कंटेनर, ऐप्लिकेशन के लेआउट का सबसे सामान्य टाइप होता है. कुछ कॉन्टेंट स्क्रीन पर नहीं दिखता, लेकिन स्क्रोल करके उसे ऐक्सेस किया जा सकता है.

दूसरी इमेज में, ऐप्लिकेशन के कई लेआउट दिखाए गए हैं. इनमें से सिर्फ़ कुछ कॉन्टेंट को घड़ी की गोल स्क्रीन पर देखा जा सकता है. इन उदाहरणों में, मुख्य कॉन्टेंट कंटेनर के सबसे ऊपर वाले हिस्से में है. साथ ही, अन्य क्रिटिकल यूज़र जर्नी (सीयूजे) और सेटिंग सबसे नीचे हैं. कॉन्टेंट को लेआउट करने का यह सबसे सही तरीका है.

दूसरी इमेज. वर्टिकल कंटेनर लेआउट के उदाहरण.

सिंगल स्क्रीन ऐप्लिकेशन लेआउट में BoxInsetLayout का इस्तेमाल किया जाता है, लेकिन यहां इसका इस्तेमाल न करें. इसके बजाय, NestedScrollView के अंदर ConstraintLayout का इस्तेमाल करें. ConstraintLayout के अंदर, अपने ऐप्लिकेशन के लिए सबसे काम के विजेट रखें. इससे आपको गोल डिसप्ले के किनारों पर मौजूद अतिरिक्त जगह का फ़ायदा मिलता है.

तीसरी इमेज. NestedScrollView के अंदर मौजूद ConstraintLayout में मौजूद कॉन्टेंट.

पक्का करें कि आपके वर्टिकल कंटेनर में सबसे ऊपर और सबसे नीचे मौजूद कॉन्टेंट इतना छोटा हो कि वह गोलाकार डिसप्ले के सबसे ऊपर और सबसे नीचे फ़िट हो जाए. जैसा कि तीसरे फ़िगर में दिए गए उदाहरण में दिखाया गया है.

ध्यान दें: जब भी हो सके, अपने NestedScrollView में स्क्रोल इंडिकेटर जोड़ें. इसके लिए, XML में android:scrollbars="vertical" सेट करें. इससे लोगों को यह पता चलता है कि और भी कॉन्टेंट उपलब्ध है. साथ ही, उन्हें यह भी पता चलता है कि वे पूरे कॉन्टेंट में कहां हैं.

ऐप्लिकेशन लेआउट के अन्य विकल्प

  • सूचियां: Wearable डिवाइसों के लिए ऑप्टिमाइज़ किए गए WearableRecyclerView विजेट की मदद से, डेटा के बड़े सेट दिखाएं. ज़्यादा जानकारी के लिए, Wear OS पर सूचियां बनाना लेख पढ़ें.
  • हॉरिज़ॉन्टल पेजिंग: अगर इस्तेमाल के उदाहरणों में एक से ज़्यादा मिलती-जुलती स्क्रीन हैं, तो हॉरिज़ॉन्टल स्वाइप का इस्तेमाल करें. अगर हॉरिज़ॉन्टल पेजिंग का इस्तेमाल किया जाता है, तो आपको बाएं किनारे से स्वाइप करके खारिज करने की सुविधा देनी होगी.
  • 2D पैनिंग: मैप जैसे इस्तेमाल के उदाहरणों के लिए, उपयोगकर्ता अलग-अलग दिशाओं में खींचकर पैन कर सकते हैं. अगर आपकी गतिविधि पूरी स्क्रीन पर दिखती है, तो swipe-to-dismiss सुविधा चालू करें.