हमें यह बताते हुए खुशी हो रही है कि Material 3 Adaptive 1.2.0 का स्टेबल वर्शन अब उपलब्ध है!

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

Material 3 Adaptive 1.2.0 में नया क्या है

इस स्टेबल वर्शन को WindowManager 1.5.0 के आधार पर बनाया गया है. इसमें बड़े और बहुत बड़े ब्रेकपॉइंट के लिए सहायता दी गई है. साथ ही, ListDetailPaneScaffold और SupportingPaneScaffold के लिए, नई रीफ़्लो और लेविटेट रणनीतियां जोड़ी गई हैं. 

विंडो के साइज़ के हिसाब से नई क्लास: बड़ी और बहुत बड़ी

WindowManager 1.5.0 में, चौड़ाई के हिसाब से विंडो के साइज़ की क्लास के लिए दो नए ब्रेकपॉइंट जोड़े गए हैं. इनकी मदद से, Expanded विंडो के साइज़ की क्लास से भी बड़ी विंडो को इस्तेमाल किया जा सकता है. अपने कोडबेस में currentWindowAdaptiveInfo() कॉल में, यह पैरामीटर जोड़कर, Large (L) और Extra-large (XL) ब्रेकपॉइंट चालू किए जा सकते हैं:

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

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

अनुकूल बनाने की नई रणनीतियां: रीफ़्लो और लेविटेट

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

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

विंडो के साइज़ के हिसाब से, पैन को रीफ़्लो करना

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

आसपेक्ट रेशियो के हिसाब से, पैन को साइड से बीच में लेविटेट करना

फ़्लो और लेविटेट, दोनों रणनीतियों को adaptStrategies पैरामीटर का इस्तेमाल करके, Navigator कंस्ट्रक्टर में बताया जा सकता है. साथ ही, दोनों रणनीतियों को लिस्ट-डिटेल और सपोर्टिंग पैन scaffolds पर लागू किया जा सकता है:

val navigator = rememberListDetailPaneScaffoldNavigator<Nothing>(
        adaptStrategies = ListDetailPaneScaffoldDefaults.adaptStrategies(
            detailPaneAdaptStrategy = AdaptStrategy.Reflow(
                reflowUnder = ListDetailPaneScaffoldRole.List
            ),
            extraPaneAdaptStrategy = AdaptStrategy.Levitate(
                alignment = Alignment.Center
            )
        )
    )

अनुकूल बनाने की इन नई रणनीतियों का फ़ायदा उठाने के तरीके के बारे में ज़्यादा जानने के लिए, Material की वेबसाइट और GitHub पर पूरा सैंपल कोड देखें.