प्रॉडक्ट से जुड़ी खबरें

Material 3 Adaptive 1.2.0 का इस्तेमाल किया जा सकता है

दो मिनट में पढ़ें
Rob Orgiu
डेवलपर रिलेशंस इंजीनियर

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

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

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

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

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

newwindow.png


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

currentWindowAdaptiveInfo(supportLargeAndXLargeWidth = true)

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

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

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

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

material.jpg

विंडो के साइज़ के हिसाब से पैन को फिर से व्यवस्थित करना

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


 

material2.jpg

आसपेक्ट रेशियो (लंबाई-चौड़ाई का अनुपात) के आधार पर, किसी पैनल को साइड से बीच में ले जाना

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

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


 

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

लेखक:

पढ़ना जारी रखें