कैननिकल लेआउट, आज़माए गए और अलग-अलग तरह के लेआउट होते हैं. ये अलग-अलग साइज़, कॉन्फ़िगरेशन या डाइमेंशन वाले डिवाइसों पर लोगों को बेहतरीन अनुभव देते हैं.
कैननिकल लेआउट, छोटी स्क्रीन वाले फ़ोन के साथ-साथ टैबलेट, फ़ोल्ड किए जा सकने वाले डिवाइसों, और ChromeOS डिवाइसों पर काम करते हैं. लेआउट, मटीरियल डिज़ाइन के दिशा-निर्देशों के मुताबिक बनाए गए हैं. इसलिए, ये देखने में अच्छे होने के साथ-साथ काम के भी हैं.
Android फ़्रेमवर्क में खास कॉम्पोनेंट शामिल होते हैं. इनकी मदद से, लेआउट को आसानी से और भरोसेमंद तरीके से लागू किया जा सकता है.
कैननिकल लेआउट से, लोगों की दिलचस्पी बढ़ाने वाले और प्रॉडक्टिविटी बढ़ाने वाले यूज़र इंटरफ़ेस (यूआई) बनाए जाते हैं. ये यूआई, बेहतरीन ऐप्लिकेशन की बुनियाद होते हैं.
अगर आप अडैप्टिव ऐप्लिकेशन के कैननिकल लेआउट के बारे में पहले से जानते हैं, लेकिन आपको नहीं पता है यह जानने के लिए कि कौनसे Android API का इस्तेमाल करना है, सीधे Applicability पर जाएं सेक्शन में जोड़ें.
सूची की जानकारी
सूची-जानकारी लेआउट की मदद से, उपयोगकर्ता ऐसे आइटम की सूचियां एक्सप्लोर कर सकते हैं जिनके बारे में जानकारी दी गई हो, ब्यौरा दिया गया हो या अन्य पूरक जानकारी दी गई हो. इसे आइटम की जानकारी कहा जाता है.
लेआउट, ऐप्लिकेशन विंडो को अगल-बगल मौजूद दो पैन में बांटता है: एक सूची के लिए और दूसरा ज़्यादा जानकारी के लिए. उपयोगकर्ता, आइटम की जानकारी दिखाने के लिए सूची से आइटम चुनते हैं. ज़्यादा जानकारी दिखाने वाले डीप लिंक, ज़्यादा जानकारी वाले पैनल में अतिरिक्त कॉन्टेंट दिखाते हैं.
ज़्यादा चौड़ाई वाले डिसप्ले (विंडो के साइज़ के हिसाब से क्लास का इस्तेमाल करना लेख पढ़ें) में, सूची और जानकारी, दोनों को एक साथ दिखाया जा सकता है. सूची में मौजूद किसी आइटम को चुनने पर, जानकारी वाले पैनल में उस आइटम से जुड़ा कॉन्टेंट दिखता है.
मीडियम और कॉम्पैक्ट चौड़ाई वाले डिसप्ले पर, सूची या जानकारी में से कोई एक चीज़ दिखती है. यह इस बात पर निर्भर करता है कि उपयोगकर्ता ने ऐप्लिकेशन के साथ किस तरह इंटरैक्ट किया है. सिर्फ़ सूची दिखने पर, सूची में मौजूद किसी आइटम को चुनने पर, सूची की जगह जानकारी दिखती है. सिर्फ़ जानकारी दिखने पर, 'वापस जाएं' बटन दबाने से सूची फिर से दिखती है.
डिवाइस के ओरिएंटेशन या ऐप्लिकेशन की विंडो के साइज़ में बदलाव जैसे कॉन्फ़िगरेशन में बदलाव होने पर, डिसप्ले की विंडो के साइज़ की क्लास बदल सकती है. सूची-ज़्यादा जानकारी वाला लेआउट, ऐप्लिकेशन की स्थिति को बनाए रखते हुए, उसके हिसाब से काम करता है:
- अगर ज़्यादा चौड़ाई वाला डिसप्ले, सूची और जानकारी, दोनों पैनल दिखाता है, तो उसे छोटा या कॉम्पैक्ट करने पर, जानकारी वाला पैनल दिखता रहता है और सूची वाला पैनल छिप जाता है
- अगर मीडियम या कॉम्पैक्ट चौड़ाई वाले डिसप्ले में सिर्फ़ जानकारी वाला पैनल दिखता है और विंडो का साइज़ क्लास बढ़कर बड़ा हो जाता है, तो सूची और जानकारी एक साथ दिखती हैं. साथ ही, सूची से पता चलता है कि जानकारी वाले पैनल में मौजूद कॉन्टेंट से जुड़ा आइटम चुना गया है
- अगर मीडियम या कॉम्पैक्ट चौड़ाई वाले डिसप्ले में सिर्फ़ सूची वाला पैन दिखता है और चौड़ाई बढ़ने पर, सूची और प्लेसहोल्डर के तौर पर ज़्यादा जानकारी वाला पैन एक साथ दिखता है
सूची-जानकारी वाला लेआउट, मैसेजिंग ऐप्लिकेशन, संपर्क जानकारी मैनेज करने वाले ऐप्लिकेशन, इंटरैक्टिव मीडिया ब्राउज़र या ऐसे किसी भी ऐप्लिकेशन के लिए सबसे सही है जहां कॉन्टेंट को आइटम की सूची के तौर पर व्यवस्थित किया जा सकता है. इससे ज़्यादा जानकारी मिलती है.
लागू करना
सूची की ज़्यादा जानकारी वाला लेआउट, कई तरह की टेक्नोलॉजी की मदद से बनाया जा सकता है. जैसे, लिखें, व्यू, और लेगसी ऐप्लिकेशन के लिए गतिविधि को जोड़ना. यह तय करने में मदद पाने के लिए कि आपके ऐप्लिकेशन के लिए कौनसी टेक्नोलॉजी सबसे सही है, लागू होने की शर्तें सेक्शन देखें.
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 का इस्तेमाल करें. भले ही, व्यू, फ़्रैगमेंट या दोनों का इस्तेमाल किया जा रहा हो.
लागू करने के उदाहरणों के लिए, नीचे दिए गए सैंपल देखें:
लागू होने की शर्तें
कैननिकल लेआउट की मदद से, कॉन्टेंट को अलग-अलग तरह से दिखाया जा सकता है. इससे कॉन्टेंट को आसानी से ऐक्सेस किया जा सकता है और चीज़ों को बेहतर तरीके से एक्सप्लोर किया जा सकता है. आपके ऐप्लिकेशन के इस्तेमाल के उदाहरणों के हिसाब से, सबसे अच्छा लेआउट और लागू करने की रणनीति तय करने के लिए, यहां दिए गए फ़्लोचार्ट का इस्तेमाल करें.
अलग-अलग तरह के ऐप्लिकेशन में लागू किए गए कैननिकल लेआउट के उदाहरणों के लिए, बड़ी स्क्रीन वाली गैलरी देखें.
अन्य संसाधन
- मटीरियल डिज़ाइन — कैननिकल लेआउट