कैननिकल लेआउट

कैननिकल लेआउट बेहतरीन साबित हुए हैं. इनमें कई तरह के काम किए जा सकते हैं. इनकी मदद से, अलग-अलग डिवाइस टाइप के हिसाब से बेहतरीन उपयोगकर्ता अनुभव मिलता है.

बड़ी स्क्रीन वाले डिवाइसों पर कैननिकल लेआउट दिखाने की इमेज.

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

Android फ़्रेमवर्क में खास कॉम्पोनेंट शामिल होते हैं, जिनकी मदद से लेआउट को आसानी से और भरोसेमंद तरीके से लागू किया जा सकता है.

कैननिकल लेआउट, दिलचस्प और उत्पादकता बढ़ाने वाले यूज़र इंटरफ़ेस (यूआई) बनाते हैं, जो शानदार ऐप्लिकेशन बनाने में मदद करते हैं.

अगर आप अडैप्टिव ऐप्लिकेशन के कैननिकल लेआउट के बारे में पहले से जानते हैं, लेकिन आपको नहीं पता है यह जानने के लिए कि कौनसे Android API का इस्तेमाल करना है, सीधे Applicability पर जाएं सेक्शन में जोड़ें.

list-detail

सूची की ज़्यादा जानकारी वाले लेआउट का वायरफ़्रेम.

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

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

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

मीडियम और कॉम्पैक्ट-विड्थ वाले डिसप्ले पर, सूची या जानकारी दिखती है. यह इस बात पर निर्भर करता है कि उपयोगकर्ता ने ऐप्लिकेशन के साथ कैसे इंटरैक्ट किया. जब सिर्फ़ सूची दिखती है, तो सूची में मौजूद किसी आइटम को चुनने पर, सूची के बजाय जानकारी दिखती है. जब सिर्फ़ जानकारी दिखती है, तो 'वापस जाएं' बटन को दबाने से सूची फिर से दिखने लगती है.

कॉन्फ़िगरेशन में हुए बदलावों की वजह से, डिसप्ले की विंडो के साइज़ की कैटगरी बदल सकती है. जैसे, डिवाइस के ओरिएंटेशन या ऐप्लिकेशन की विंडो के साइज़ में हुए बदलाव. सूची के ज़्यादा जानकारी वाले लेआउट में, ऐप्लिकेशन की स्थिति को बनाए रखते हुए, इस तरह से जवाब दिया जाता है:

  • अगर सूची और जानकारी वाले पैनल, दोनों को दिखाने वाले बड़े डिसप्ले को मीडियम या कॉम्पैक्ट में बदला जाता है, तो जानकारी वाला पैनल दिखता रहेगा और सूची वाला पैनल छिप जाएगा
  • अगर मीडियम या कॉम्पैक्ट-विड्थ वाले डिसप्ले में सिर्फ़ ज़्यादा जानकारी वाला पैनल दिखता है और विंडो का साइज़ क्लास बड़ा करके 'बड़ा करें' पर सेट किया जाता है, तो सूची और ज़्यादा जानकारी एक साथ दिखती है. साथ ही, सूची से पता चलता है कि ज़्यादा जानकारी वाले पैनल में मौजूद कॉन्टेंट से जुड़ा आइटम चुना गया है
  • अगर किसी मध्यम या कॉम्पैक्ट-विथ वाले डिसप्ले में सिर्फ़ सूची वाला पैनल दिखता है और उसे बड़ा करने के लिए बड़ा किया जाता है, तो सूची और प्लेसहोल्डर की जानकारी वाले पैनल को एक साथ दिखाया जाता है.

'सूची की जानकारी' विकल्प, मैसेजिंग ऐप्लिकेशन, संपर्क मैनेजर, फ़ाइल ब्राउज़र या ऐसे किसी भी ऐप्लिकेशन के लिए सही है जहां कॉन्टेंट को आइटम की सूची के तौर पर व्यवस्थित किया जा सकता है. इस सूची में, ज़्यादा जानकारी भी दिखती है.

पहली इमेज. मैसेजिंग ऐप्लिकेशन, जिसमें बातचीत की सूची और चुनी गई बातचीत की जानकारी दिख रही है.

लागू करना

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

SlidingPaneLayout लाइब्रेरी को व्यू या फ़्रैगमेंट के आधार पर, सूची की जानकारी वाले लेआउट लागू करने के लिए डिज़ाइन किया गया है.

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

सूची के ज़्यादा जानकारी वाले व्यू या फ़्रैगमेंट के बीच डेटा पास करने के लिए, डेटा ट्रांसफ़र करने का तरीका लागू करें. ViewModel का सुझाव इसलिए दिया जाता है, क्योंकि यह कारोबारी लॉजिक को सेव करने और कॉन्फ़िगरेशन में होने वाले बदलावों के बाद भी काम करता है.

SlidingPaneLayout अपने-आप यह तय करता है कि सूची और जानकारी को एक साथ दिखाना है या अलग-अलग. अगर किसी विंडो में, सूची और जानकारी को एक साथ दिखाने के लिए ज़रूरत के मुताबिक हॉरिज़ॉन्टल स्पेस है, तो दोनों एक साथ दिखते हैं. अगर विंडो में ज़रूरत के मुताबिक स्पेस नहीं है, तो ऐप्लिकेशन के साथ उपयोगकर्ता के इंटरैक्शन के आधार पर, सूची या जानकारी दिखती है.

लागू करने का उदाहरण देखने के लिए, स्लाइडिंग पैनल के साथ सूची की जानकारी सैंपल देखें.

गतिविधि एम्बेड करना

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

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

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

ज़्यादा जानकारी के लिए, गतिविधि एम्बेड करना देखें.

लागू करने का उदाहरण देखने के लिए, गतिविधि को एम्बेड करने के साथ सूची की जानकारी सैंपल देखें.

फ़ीड

फ़ीड लेआउट का वायरफ़्रेम.

फ़ीड लेआउट, कॉन्फ़िगर किए जा सकने वाले ग्रिड में मिलते-जुलते कॉन्टेंट एलिमेंट को व्यवस्थित करता है. इससे, बड़ी संख्या में कॉन्टेंट को तुरंत और आसानी से देखा जा सकता है.

साइज़ और पोज़िशन, कॉन्टेंट एलिमेंट के बीच संबंध बनाते हैं.

कॉन्टेंट ग्रुप बनाने के लिए, एलिमेंट को एक ही साइज़ में रखें और उन्हें एक साथ रखें. आस-पास मौजूद एलिमेंट के मुकाबले, उन्हें बड़ा करके उन पर ध्यान खींचा जाता है.

कार्ड और सूचियां, फ़ीड लेआउट के सामान्य कॉम्पोनेंट हैं.

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

फ़ीड, खास तौर पर खबरों और सोशल मीडिया ऐप्लिकेशन के लिए सही होते हैं.

दूसरी इमेज. सोशल मीडिया ऐप्लिकेशन, जिसमें अलग-अलग साइज़ के कार्ड में पोस्ट दिख रही हैं.

लागू करना

RecyclerView, एक कॉलम में बड़ी संख्या में आइटम को बेहतर तरीके से रेंडर करता है. GridLayoutManager, आइटम को ग्रिड में लेआउट करता है. इससे आइटम के साइज़ और स्पैन को कॉन्फ़िगर किया जा सकता है.

आइटम के लिए तय की गई कम से कम चौड़ाई सेट करने के लिए, उपलब्ध डिसप्ले एरिया के साइज़ के आधार पर ग्रिड कॉलम कॉन्फ़िगर करें.

GridLayoutManager की डिफ़ॉल्ट स्पैनिंग रणनीति, हर आइटम के लिए एक स्पैन होती है. इसे कस्टम SpanSizeLookup बनाकर बदला जा सकता है. कुछ आइटम को दूसरे आइटम के मुकाबले ज़्यादा अहमियत देने के लिए, स्पैन में बदलाव करें.

कॉम्पैक्ट-विड्थ वाले डिसप्ले पर, GridLayoutManager के बजाय LinearLayoutManager का इस्तेमाल करें. हालांकि, ऐसा सिर्फ़ तब करें, जब डिसप्ले में सिर्फ़ एक कॉलम के लिए ज़रूरत के मुताबिक जगह हो.

लागू करने का उदाहरण देखने के लिए, व्यू वाला फ़ीड सैंपल देखें.

सहायक पैनल

पैनल लेआउट का वायरफ़्रेम.

सहायक पैनल लेआउट, ऐप्लिकेशन के कॉन्टेंट को प्राइमरी और सेकंडरी डिसप्ले के हिस्सों में व्यवस्थित करता है.

मुख्य डिसप्ले एरिया, ऐप्लिकेशन विंडो के ज़्यादातर हिस्से (आम तौर पर, करीब दो तिहाई) पर होता है. इसमें मुख्य कॉन्टेंट होता है. सेकंडरी डिसप्ले एरिया एक पैनल होता है, जो ऐप्लिकेशन विंडो के बाकी हिस्से को कवर करता है. साथ ही, इसमें मुख्य कॉन्टेंट से जुड़ा कॉन्टेंट दिखाया जाता है.

पैनल के लेआउट, लैंडस्केप ओरिएंटेशन में बड़ी चौड़ाई वाले डिसप्ले पर अच्छी तरह से काम करते हैं. विंडो के साइज़ के हिसाब से कक्षाएं इस्तेमाल करना देखें. मीडियम या कॉम्पैक्ट‑विड्थ वाले डिसप्ले पर, मुख्य और सेकंडरी डिसप्ले एरिया, दोनों को दिखाया जा सकता है. ऐसा तब किया जा सकता है, जब कॉन्टेंट को छोटे डिसप्ले स्पेस में दिखाया जा सकता हो या अतिरिक्त कॉन्टेंट को शुरुआत में नीचे या साइड शीट में छिपाया जा सकता हो. इस शीट को मेन्यू या बटन जैसे कंट्रोल की मदद से ऐक्सेस किया जा सकता है.

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

सहायक पैनल के इस्तेमाल के उदाहरणों में ये शामिल हैं:

  • प्रॉडक्टिविटी ऐप्लिकेशन: कोई दस्तावेज़ या स्प्रेडशीट, जिसमें समीक्षक की टिप्पणियां हों
  • मीडिया ऐप्लिकेशन: स्ट्रीमिंग वीडियो के साथ, सहायक पैनल में मिलते-जुलते वीडियो की सूची या संगीत के एल्बम के साथ प्लेलिस्ट की जानकारी
  • ऐप्लिकेशन खोजें और रेफ़रंस दें: क्वेरी इनपुट फ़ॉर्म, जिसमें नतीजे एक पैनल में दिखते हैं
तीसरी इमेज. सहायक पैनल में प्रॉडक्ट के ब्यौरे वाला शॉपिंग ऐप्लिकेशन.

लागू करना

साथ काम करने वाले पैनल का लेआउट, हेल्पर लेआउट का इस्तेमाल करके लागू किया जाता है. जैसे LinearLayout या ConstraintLayout. विंडो के साइज़ की क्लास सेट अप करना जो आपके ऐप्लिकेशन के लिए उपलब्ध हॉरिज़ॉन्टल डिसप्ले स्पेस को तीन कैटगरी: कॉम्पैक्ट (< 600dp), मीडियम (>= 600dp), और बड़ा किया गया (>= 840dp).

हर विंडो साइज़ क्लास के लिए, लेआउट इस तरह तय करें:

  • कॉम्पैक्ट: ऐप्लिकेशन के संसाधन layout फ़ोल्डर में, ऐसा कॉन्टेंट रखें जिसमें मुख्य कॉन्टेंट के नीचे या बॉटम शीट के अंदर, मुख्य कॉन्टेंट वाले पैनल को रेंडर करता है
  • मीडियम: layout-w600dp फ़ोल्डर में, सहायक पैनल का कॉन्टेंट दें, ताकि मुख्य कॉन्टेंट और सहायक पैनल, एक साथ रेंडर हो सकें. साथ ही, हॉरिज़ॉन्टल डिसप्ले स्पेस को बराबर बांटा जा सके
  • बड़ा किया गया: layout-w840dp फ़ोल्डर में, सहायक पैनल का कॉन्टेंट शामिल करें, ताकि मुख्य कॉन्टेंट और सहायक पैनल एक साथ रेंडर हो सकें. हालांकि, सहायक पैनल, हॉरिज़ॉन्टल स्पेस का सिर्फ़ 30% हिस्सा लेता है और बाकी 70% हिस्सा मुख्य कॉन्टेंट के लिए होता है

मुख्य कॉन्टेंट और सहायक पैनल के बीच कम्यूनिकेशन के लिए, ViewModel का इस्तेमाल करें. भले ही, व्यू, फ़्रैगमेंट या दोनों का इस्तेमाल किया जा रहा हो.

लागू करने के उदाहरणों के लिए, नीचे दिए गए सैंपल देखें:

लागू होने की शर्तें

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

अलग-अलग तरह के ऐप्लिकेशन में लागू किए गए कैननिकल लेआउट के उदाहरणों के लिए, बड़ी स्क्रीन वाली गैलरी देखें.

चौथी इमेज. बड़ी स्क्रीन के कैननिकल लेआउट का डिसिज़न ट्री.

अन्य संसाधन