स्क्रोल किए जा सकने वाले ऐप्लिकेशन व्यू लेआउट में, सूचियां (TransformingLazyColumn) और डायलॉग शामिल होते हैं.
ज़्यादातर ऐप्लिकेशन स्क्रीन में ये लेआउट होते हैं. इनमें ऐसे कॉम्पोनेंट का कलेक्शन होता है जिन्हें बड़ी स्क्रीन के साइज़ के हिसाब से बदलना पड़ता है. देखें कि कॉम्पोनेंट रिस्पॉन्सिव हैं या नहीं. इसका मतलब है कि वे उपलब्ध चौड़ाई को भरते हैं और स्क्रीन की ज़्यादा ऊंचाई उपलब्ध होने पर, TransformingLazyColumn अडजस्टमेंट को अपनाते हैं. ये लेआउट पहले से ही रिस्पॉन्सिव तरीके से बनाए गए हैं. साथ ही, ज़्यादा जगह मिलने के फ़ायदे पाने के लिए, हमारे पास कुछ और सुझाव भी हैं.
रिस्पॉन्सिव और ऑप्टिमाइज़ किए गए डिज़ाइन बनाना
आपके डिज़ाइन लेआउट को बड़ी स्क्रीन के साइज़ के हिसाब से अडजस्ट करने में मदद करने के लिए, हमने अपने लेआउट और कॉम्पोनेंट के व्यवहार को अपडेट किया है. इससे, रिस्पॉन्सिव डिज़ाइन के लिए, प्रतिशत के आधार पर मार्जिन और पैडिंग जैसी सुविधाएं पहले से मौजूद होंगी. इस समस्या को हल करने के लिए, हमने अपनी Android यूज़र इंटरफ़ेस (यूआई) लाइब्रेरी के लेआउट और कॉम्पोनेंट को अपडेट किया है. इनमें रिस्पॉन्सिव डिज़ाइन की सुविधा पहले से मौजूद है. इसमें प्रतिशत के हिसाब से मार्जिन और पैडिंग भी शामिल है. अगर हमारे Compose घटकों का इस्तेमाल किया जा रहा है, तो आपको यह रिस्पॉन्सिविटी अपने-आप मिल जाएगी.
यूनीक स्क्रीन डिज़ाइन के लिए, अलग-अलग स्क्रीन साइज़ पर पूरी तरह से जांच करें. इससे यह पक्का किया जा सकता है कि कॉम्पोनेंट और एलिमेंट आसानी से अडजस्ट हो जाएं और कॉन्टेंट का क्लिप होने से बचा जा सके. हमारे प्रतिशत मार्जिन की मदद से, स्पेसर्स को असरदार तरीके से स्केल किया जा सकता है. हमारा सुझाव है कि स्मार्टवॉच की बड़ी स्क्रीन पर ज़्यादा जानकारी और बेहतर सुविधाएं देने के लिए, 225dp पर ब्रेकपॉइंट का इस्तेमाल करें.
देखें कि कॉम्पोनेंट, उपलब्ध चौड़ाई को भरते हैं या नहीं
सभी कॉम्पोनेंट रिस्पॉन्सिव तरीके से बनाए जाते हैं. इसका मतलब है कि वे उपलब्ध चौड़ाई और ऊंचाई को भर देते हैं. पक्का करें कि आपके पास ज़रूरी मार्जिन हों, ताकि स्क्रीन के गोल होने पर कॉन्टेंट का हिस्सा न काटे जाए.
अतिरिक्त टेक्स्ट वर्ण दिखाना
ज़्यादातर कॉम्पोनेंट में टेक्स्ट बॉक्स होते हैं, जो उपलब्ध चौड़ाई को भर देते हैं. इसका मतलब है कि स्क्रीन की चौड़ाई बढ़ने पर, इनमें वर्णों की संख्या अपने-आप बढ़ जाती है.
अडैप्टिव और अलग-अलग तरह के डिज़ाइन बनाना
स्क्रोलिंग लेआउट में, स्क्रीन फ़ोल्ड के नीचे पहले छिपी हुई जानकारी अपने-आप दिखेगी. इसलिए, आपको ज़्यादा जानकारी जोड़ने के लिए कुछ करने की ज़रूरत नहीं है. हर कॉम्पोनेंट, उपलब्ध चौड़ाई को भरता है. कुछ मामलों में, किसी कॉम्पोनेंट में टेक्स्ट की अतिरिक्त लाइनें (जैसे, कार्ड) हो सकती हैं या कॉम्पोनेंट, उपलब्ध चौड़ाई को भरने के लिए स्ट्रेच हो सकते हैं (जैसे, आइकॉन बटन).
बड़ी स्क्रीन के साइज़ पर अतिरिक्त जगह का ज़्यादा से ज़्यादा फ़ायदा पाने के लिए, 225dp पर साइज़ ब्रेकपॉइंट जोड़ें. इस ब्रेकपॉइंट की मदद से, ज़्यादा कॉन्टेंट दिखाया जा सकता है, ज़्यादा बटन या डेटा शामिल किया जा सकता है या बड़ी स्क्रीन के हिसाब से लेआउट बदला जा सकता है. इसके लिए, हर ब्रेकपॉइंट के लिए अलग डिज़ाइन की ज़रूरत होती है. बड़ी स्क्रीन (225 से ज़्यादा) के डिज़ाइन में ये अतिरिक्त एलिमेंट शामिल किए जा सकते हैं:
मौजूदा कॉम्पोनेंट का साइज़ बढ़ाना या उनकी स्थिति बदलना
ऐसा ज़्यादा जानकारी देने या कॉन्टेंट को एक नज़र में देखने लायक बनाने के लिए किया जा सकता है.
ऑप्टिमाइज़ किए गए और अलग-अलग लेआउट
225dp ब्रेकपॉइंट के बाद, लेआउट में थोड़ा बदलाव हो सकता है, ताकि डिफ़ॉल्ट व्यू में फ़ोल्ड के ऊपर मौजूद कॉन्टेंट को ऑप्टिमाइज़ किया जा सके. हालांकि, फ़ोल्ड के नीचे मौजूद कॉन्टेंट अब भी स्क्रीन साइज़ के बावजूद उपलब्ध होना चाहिए.
रिस्पॉन्सिव और अडैप्टिव व्यवहार
Compose लाइब्रेरी में मौजूद सभी कॉम्पोनेंट, बड़े स्क्रीन साइज़ के हिसाब से अपने-आप अडजस्ट हो जाएंगे. साथ ही, उनकी चौड़ाई और ऊंचाई भी बढ़ जाएगी. रिस्पॉन्सिव डिज़ाइन के तरीकों का इस्तेमाल करने वाले स्क्रॉल व्यू, आम तौर पर अलग-अलग स्क्रीन साइज़ के हिसाब से अडजस्ट हो जाते हैं. हालांकि, कुछ खास मामलों में, डाइमेंशन को बदलने और लेआउट को बेहतर बनाने के लिए ब्रेकपॉइंट का इस्तेमाल किया जा सकता है. इससे, फ़ंक्शन को बेहतर बनाया जा सकता है, एक नज़र में जानकारी देखी जा सकती है या कॉन्टेंट को स्क्रीन पर बेहतर तरीके से फ़िट किया जा सकता है.
ऊपर, नीचे, और किनारों के सभी मार्जिन को प्रतिशत में तय किया जाना चाहिए, ताकि क्लिपिंग से बचा जा सके और एलिमेंट को सही अनुपात में स्केल किया जा सके. मान लें कि PositionIndicator तब दिखता है, जब उपयोगकर्ता स्क्रोल करता है. साथ ही, यह स्क्रीन के बेज़ल के साइज़ के हिसाब से अपने-आप अडजस्ट हो जाता है.
चेकलिस्ट
- ऊपर, नीचे, और किनारों के लिए सुझाए गए मार्जिन लागू करें.
- स्क्रोल किए जा सकने वाले कंटेनर के शुरू और आखिर में क्लिपिंग से बचने के लिए, बाहरी मार्जिन को प्रतिशत वैल्यू में तय करें.
- यूज़र इंटरफ़ेस (यूआई) एलिमेंट के बीच, तय डीपी वैल्यू में मार्जिन लागू करें.
- ज़्यादा कॉन्टेंट दिखाने या बड़ी स्क्रीन पर मौजूद कॉन्टेंट को आसानी से पढ़ने के लिए, 225dp पर ब्रेकपॉइंट लागू करें.
अलग-अलग तरह के अनुभव बनाना
स्क्रोलिंग व्यू को अपनी पसंद के मुताबिक बनाया जा सकता है. साथ ही, इसमें कॉम्पोनेंट को किसी भी क्रम में जोड़ा जा सकता है. ऊपर और नीचे के मार्जिन, इस आधार पर बदल सकते हैं कि सबसे ऊपर और सबसे नीचे कौनसे कॉम्पोनेंट मौजूद हैं. ऐसा इसलिए किया जाता है, ताकि स्क्रीन के बढ़ते हुए कर्व की वजह से कॉन्टेंट काट-छांट न हो.
