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

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

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

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

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

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

list-detail

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

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

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

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

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

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

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

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

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

लागू करना

Compose के डिक्लेरेटिव पैराडाइम में, विंडो के साइज़ क्लास के लॉजिक का इस्तेमाल किया जाता है. इससे यह तय होता है कि सूची और ज़्यादा जानकारी वाले पैनल को एक साथ दिखाया जाए या नहीं. यह विंडो के साइज़ क्लास के चौड़े या छोटे होने पर तय होता है.

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

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

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

फ़ीड

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

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

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

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

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

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

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

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

लागू करना

A feed consists of a large number of content elements in a vertical scrolling container laid out in a grid. Lazy lists efficiently render a large number of items in columns or rows. Lazy grids render items in grids, supporting configuration of the item sizes and spans.

Configure the columns of the grid layout based on the available display area to set the minimum allowable width for grid items. When defining grid items, adjust column spans to emphasize some items over others.

For section headers, dividers, or other items designed to occupy the full width of the feed, use maxLineSpan to take up the full width of the layout.

On compact-width displays that don't have enough space to show more than one column, LazyVerticalGrid behaves just like a LazyColumn.

For an example implementation, see the Feed with Compose sample.

सहायक पैनल

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

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

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

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

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

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

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

लागू करना

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

विंडो के साइज़ की मौजूदा क्लास के साथ-साथ मुख्य कॉन्टेंट और सहायक कॉन्टेंट में मौजूद डेटा के साथ-साथ सभी सुविधाओं को हाइलाइट करें.

कॉम्पैक्ट-विड्थ डिसप्ले के लिए, मुख्य कॉन्टेंट के नीचे या बॉटम शीट में सहायक कॉन्टेंट डालें. मीडियम और बड़े किए गए साइज़ के लिए, मुख्य कॉन्टेंट के बगल में सहायक कॉन्टेंट रखें. कॉन्टेंट और उपलब्ध जगह के हिसाब से, कॉन्टेंट का साइज़ सही रखें. मीडियम चौड़ाई के लिए, डिसप्ले स्पेस को मुख्य और सहायक कॉन्टेंट के बीच बराबर बांटें. बड़े किए गए विज्ञापन की चौड़ाई के लिए, मुख्य कॉन्टेंट को 70% और सहायक कॉन्टेंट को 30% जगह दें.

लागू करने का उदाहरण देखने के लिए, Compose के साथ सहायता पैनल सैंपल देखें.

अन्य संसाधन

पीछे जाएं
खास जानकारी
आगे बढ़ें
अलग-अलग डिसप्ले साइज़ के साथ काम करना