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

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

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

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

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

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

सूची की जानकारी

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

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

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

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

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

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

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

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

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

लागू करना

Compose 的声明性范式支持用于作出如下判断的窗口大小类别逻辑：同时显示列表窗格和“详细信息”窗格（当宽度窗口大小类别为较大时），还是只显示列表窗格或“详细信息”窗格（当宽度窗口大小类别为中等或紧凑时）。

为确保单向数据流，请提升所有状态，包括当前窗口大小类别和所选列表项（如有）的详情，以便所有可组合项都可以访问相应数据并进行正确的呈现。

当小窗口中只显示“详细信息”窗格时，添加 BackHandler 即可移除“详细信息”窗格并转为只显示列表窗格。BackHandler 不是应用整体导航的一部分，因为处理程序依赖于窗口大小类别和所选详情的状态。

ListDetailPaneScaffold 是一个高级可组合项，可简化列表详情布局的实现。它会根据窗口大小类别自动处理窗格逻辑，并支持在窗格之间导航。

以下是使用 ListDetailPaneScaffold 的最小实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MyListDetailPaneScaffold() {
    val navigator = rememberListDetailPaneScaffoldNavigator()
    ListDetailPaneScaffold(
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        listPane = {
            // Listing Pane
        },
        detailPane = {
            // Details Pane
        }
    )
}

以下是此示例中的关键组件：

  • rememberListDetailPaneScaffoldNavigator：创建一个导航器，用于管理列表窗格和“详细信息”窗格之间的导航。
  • listPane：显示项列表。
  • detailPane：显示所选项的内容。

如需查看详细的实现示例，请参阅：

फ़ीड

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

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

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

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

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

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

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

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

लागू करना

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

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

सेक्शन हेडर, डिवाइडर या फ़ीड की पूरी चौड़ाई में दिखने वाले अन्य आइटम के लिए, maxLineSpan का इस्तेमाल करें. इससे वे आइटम, लेआउट की पूरी चौड़ाई में दिखेंगे.

कम चौड़ाई वाले डिसप्ले पर एक से ज़्यादा कॉलम दिखाने के लिए ज़रूरत के मुताबिक जगह नहीं होती. ऐसे में, LazyVerticalGrid, LazyColumn की तरह काम करता है.

यहां LazyVerticalGrid का इस्तेमाल करके, कम से कम कोड लागू करने का तरीका बताया गया है:

@Composable
fun MyFeed(names: List<String>) {
    LazyVerticalGrid(
        // GridCells.Adaptive automatically adapts column count based on available width
        columns = GridCells.Adaptive(minSize = 180.dp),
    ) {
        items(names) { name ->
            Text(name)
        }
    }
}

अडैप्टिव फ़ीड के लिए, columns कॉन्फ़िगरेशन ज़रूरी है. GridCells.Adaptive(minSize = 180.dp) एक ग्रिड बनाता है, जिसमें हर कॉलम कम से कम 180.dp चौड़ा होता है. इसके बाद, ग्रिड में उतने कॉलम दिखते हैं जितने उपलब्ध जगह में फ़िट हो सकते हैं.

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

सहायता वाला पैनल

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

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

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

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

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

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

तीसरी इमेज. शॉपिंग ऐप्लिकेशन में, प्रॉडक्ट के ब्यौरे को दिखाने वाला पैनल.

लागू करना

Compose 支持用于做出如下判断的窗口大小类别逻辑：同时显示主要内容和辅助内容，还是将辅助内容放置在其他位置。

提升所有状态，包括当前窗口大小类别以及与主要内容和辅助内容中的数据相关的信息。

对于较小宽度的显示屏，可将辅助内容放置在主要内容下方或底部动作条中。对于中等宽度和展开宽度，可将辅助内容放置在主要内容旁边，并根据内容和可用空间适当调整辅助内容的大小。对于中等宽度的显示屏，可在主要内容和辅助内容之间平均分配显示空间。对于展开宽度，可为主要内容分配 70% 的空间，并为辅助内容分配 30% 的空间。

SupportingPaneScaffold 是一个高级可组合项，可简化辅助窗格布局的实现。该可组合项会根据窗口大小类别自动处理窗格逻辑，在大屏幕上并排显示窗格，或在小屏幕上隐藏辅助窗格。SupportingPaneScaffold 还支持在窗格之间导航。

以下是最小实现：

@OptIn(ExperimentalMaterial3AdaptiveApi::class)
@Composable
fun MySupportingPaneScaffold() {
    // Creates and remembers a navigator to control pane visibility and navigation
    val navigator = rememberSupportingPaneScaffoldNavigator()
    SupportingPaneScaffold(
        // Directive and value help control pane visibility based on screen size and state
        directive = navigator.scaffoldDirective,
        value = navigator.scaffoldValue,
        mainPane = {
            // Main Pane for the primary content
        },
        supportingPane = {
            //Supporting Pane for supplementary content
        }
    )
}
 示例中的关键组件：

  • rememberSupportingPaneScaffoldNavigator：可组合项，用于创建导航器来管理窗格可见性（例如，在较小屏幕上隐藏或显示辅助窗格）
  • mainPane：显示主要内容的可组合项
  • supportingPane：用于显示补充内容的可组合项

如需查看详细的实现示例，请参阅：

अन्य संसाधन