कैननिकल लेआउट बेहतरीन साबित हुए हैं. इनमें कई तरह के काम किए जा सकते हैं. इनकी मदद से, अलग-अलग डिवाइस टाइप के हिसाब से बेहतरीन उपयोगकर्ता अनुभव मिलता है.
कैननिकल लेआउट, छोटी स्क्रीन वाले फ़ोन के साथ-साथ टैबलेट, फ़ोल्ड किए जा सकने वाले डिवाइस, और ChromeOS डिवाइसों पर भी काम करते हैं. मटीरियल डिज़ाइन गाइडेंस से लिया गया लेआउट, देखने में सुंदर होने के साथ-साथ काम भी करता है.
Android फ़्रेमवर्क में खास कॉम्पोनेंट शामिल होते हैं, जिनकी मदद से लेआउट को आसानी से और भरोसेमंद तरीके से लागू किया जा सकता है.
कैननिकल लेआउट, दिलचस्प और उत्पादकता बढ़ाने वाले यूज़र इंटरफ़ेस (यूआई) बनाते हैं, जो शानदार ऐप्लिकेशन बनाने में मदद करते हैं.
list-detail
सूची की जानकारी वाले लेआउट की मदद से, उपयोगकर्ता उन आइटम की सूचियों को एक्सप्लोर कर सकते हैं जिनमें आइटम की जानकारी, ब्यौरा या अन्य ज़रूरी जानकारी शामिल होती है.
लेआउट, ऐप्लिकेशन विंडो को दो पैनल में बांटता है: एक सूची के लिए और दूसरा पैनल में जानकारी के लिए. आइटम की जानकारी दिखाने के लिए, उपयोगकर्ता सूची से आइटम चुनते हैं. ज़्यादा जानकारी वाले पैनल में, डीप लिंक से अन्य कॉन्टेंट दिखता है.
ज़्यादा चौड़ाई वाले डिसप्ले (विंडो साइज़ क्लास का इस्तेमाल करना देखें) में सूची और जानकारी, दोनों एक साथ दिखती हैं. सूची में मौजूद किसी आइटम को चुनने पर, ज़्यादा जानकारी वाले पैनल को अपडेट किया जाता है, ताकि चुने गए आइटम से जुड़ा कॉन्टेंट दिखाया जा सके.
मीडियम और कॉम्पैक्ट-विड्थ वाले डिसप्ले पर, सूची या जानकारी दिखती है. यह इस बात पर निर्भर करता है कि उपयोगकर्ता ने ऐप्लिकेशन के साथ कैसे इंटरैक्ट किया. जब सिर्फ़ सूची दिखती है, तो सूची में मौजूद किसी आइटम को चुनने पर, सूची के बजाय जानकारी दिखती है. जब सिर्फ़ जानकारी दिखती है, तो 'वापस जाएं' बटन को दबाने से सूची फिर से दिखने लगती है.
कॉन्फ़िगरेशन में हुए बदलावों की वजह से, डिसप्ले की विंडो के साइज़ की कैटगरी बदल सकती है. जैसे, डिवाइस के ओरिएंटेशन या ऐप्लिकेशन की विंडो के साइज़ में हुए बदलाव. सूची के ज़्यादा जानकारी वाले लेआउट में, ऐप्लिकेशन की स्थिति को बनाए रखते हुए, इस तरह से जवाब दिया जाता है:
- अगर सूची और जानकारी वाले पैनल, दोनों को दिखाने वाले बड़े डिसप्ले को मीडियम या कॉम्पैक्ट में बदला जाता है, तो जानकारी वाला पैनल दिखता रहेगा और सूची वाला पैनल छिप जाएगा
- अगर मीडियम या कॉम्पैक्ट-विड्थ वाले डिसप्ले में सिर्फ़ ज़्यादा जानकारी वाला पैनल दिखता है और विंडो का साइज़ क्लास बड़ा करके 'बड़ा करें' पर सेट किया जाता है, तो सूची और ज़्यादा जानकारी एक साथ दिखती है. साथ ही, सूची से पता चलता है कि ज़्यादा जानकारी वाले पैनल में मौजूद कॉन्टेंट से जुड़ा आइटम चुना गया है
- अगर किसी मध्यम या कॉम्पैक्ट-विथ वाले डिसप्ले में सिर्फ़ सूची वाला पैनल दिखता है और उसे बड़ा करने के लिए बड़ा किया जाता है, तो सूची और प्लेसहोल्डर की जानकारी वाले पैनल को एक साथ दिखाया जाता है.
'सूची की जानकारी' विकल्प, मैसेजिंग ऐप्लिकेशन, संपर्क मैनेजर, फ़ाइल ब्राउज़र या ऐसे किसी भी ऐप्लिकेशन के लिए सही है जहां कॉन्टेंट को आइटम की सूची के तौर पर व्यवस्थित किया जा सकता है. इस सूची में, ज़्यादा जानकारी भी दिखती है.
लागू करना
The declarative paradigm of Compose supports window size class logic that determines whether to show the list and detail panes at the same time (when the width window size class is expanded) or just the list or detail pane (when the width window size class is medium or compact).
To ensure unidirectional data flow, hoist all state, including current window size class and detail of the selected list item (if any), so all composables have access to the data and can render correctly.
When showing just the detail pane on small window sizes, add a BackHandler
to remove the detail pane and display just the list pane. The BackHandler is
not part of the overall app navigation since the handler is dependent on the
window size class and selected detail state.
For an example implementation, see the List-detail with Compose sample.
फ़ीड
फ़ीड लेआउट, कॉन्फ़िगर किए जा सकने वाले ग्रिड में मिलते-जुलते कॉन्टेंट एलिमेंट को व्यवस्थित करता है. इससे, बड़ी संख्या में कॉन्टेंट को तुरंत और आसानी से देखा जा सकता है.
साइज़ और पोज़िशन, कॉन्टेंट एलिमेंट के बीच संबंध बनाते हैं.
कॉन्टेंट ग्रुप बनाने के लिए, एलिमेंट को एक ही साइज़ में रखें और उन्हें एक साथ रखें. आस-पास मौजूद एलिमेंट के मुकाबले, उन्हें बड़ा करके उन पर ध्यान खींचा जाता है.
कार्ड और सूचियां, फ़ीड लेआउट के सामान्य कॉम्पोनेंट हैं.
फ़ीड लेआउट, किसी भी साइज़ के डिसप्ले के साथ काम करता है, क्योंकि ग्रिड एक स्क्रोलिंग कॉलम से लेकर कॉन्टेंट के कई कॉलम वाले स्क्रोलिंग फ़ीड में बदल सकता है.
फ़ीड, खास तौर पर खबरों और सोशल मीडिया ऐप्लिकेशन के लिए सही होते हैं.
लागू करना
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 构建辅助窗格示例。
अन्य संसाधन
- Material Design — कैननिकल लेआउट