Compose में कटआउट की सुविधा

डिसप्ले का कटा हुआ हिस्सा, कुछ डिवाइसों पर डिसप्ले के हिस्से में होता है. इससे डिवाइस के सामने वाले हिस्से पर एज-टू-एज डिसप्ले का अनुभव मिलता है. साथ ही, ज़रूरी सेंसर के लिए भी जगह मिलती है.

पहली इमेज. पोर्ट्रेट मोड में कटआउट का उदाहरण

दूसरी इमेज. लैंडस्केप मोड में काट-छांट करने का उदाहरण

Android, डिसप्ले में मौजूद कटिंग आउट की सुविधा के साथ काम करता है. यह सुविधा, Android 9 (एपीआई लेवल 28) और इसके बाद के वर्शन वाले डिवाइसों पर काम करती है. हालांकि, डिवाइस बनाने वाली कंपनियां, Android 8.1 या इससे पहले के वर्शन वाले डिवाइसों पर भी डिसप्ले में काट-आउट की सुविधा दे सकती हैं.

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

डिफ़ॉल्ट केस

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

उदाहरण के लिए, Modifier.windowInsetsPadding(WindowInsets.safeContent) या Modifier.windowInsetsPadding(WindowInsets.safeDrawing) का इस्तेमाल करने पर, आपका ऐप्लिकेशन उन जगहों पर अपने-आप ड्रॉ नहीं करेगा जहां कोई कटआउट लगाया गया है. WindowInsets.safeContent और WindowInsets.safeDrawing दोनों में डिसप्ले के कटी हुई जगह की जानकारी होती है. साथ ही, डिवाइस के कटी हुई जगह पर इमेज नहीं दिखती.

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    WindowCompat.setDecorFitsSystemWindows(window, false)

    setContent {
        Box(Modifier.windowInsetsPadding(WindowInsets.safeContent)) {
            // Any composable inside here will avoid drawing behind cutouts
        }
    }
}
CutoutSnippets.kt

इस सुविधा को अपनी ज़रूरत के मुताबिक बनाने के लिए, आपको काट-छांट की जानकारी खुद मैनेज करनी होगी.

काट-छांट की जानकारी को मैन्युअल तरीके से मैनेज करना

इनमें से किसी भी तरीके से, काट-छांट की गई इमेज को मैनेज किया जा सकता है:

• WindowInsets.displayCutout का इस्तेमाल करना

• android:windowLayoutInDisplayCutoutMode की मदद से, थीम मेनिफ़ेस्ट में सेटिंग

• window.attributes.layoutInDisplayCutoutMode की मदद से, प्रोग्राम के हिसाब से Window पर विकल्प सेट करना

• LocalView.current.rootWindowInsets.displayCutout का इस्तेमाल करके, काटा गया Path ऑब्जेक्ट ऐक्सेस करना

हमारा सुझाव है कि Compose के लिए, अपनी पूरी थीम में windowLayoutInDisplayCutoutMode को default पर सेट करें. इसके बाद, अपने कॉम्पोज़ेबल में इनसेट को मैनेज करने के लिए WindowInsets.displayCutout का इस्तेमाल करें:

Canvas(modifier = Modifier.fillMaxSize().windowInsetsPadding(WindowInsets.displayCutout)) {
    drawRect(Color.Red, style = Stroke(2.dp.toPx()))
}
CutoutSnippets.kt

इस तरीके से, ज़रूरत पड़ने पर displayCutout पैडिंग का इस्तेमाल किया जा सकता है या ज़रूरत न होने पर इसे अनदेखा किया जा सकता है.

इसके अलावा, व्यू कट्सआउट के दस्तावेज़ में बताई गई सेटिंग भी लागू की जा सकती हैं. इसके लिए, गतिविधि थीम android:windowLayoutInDisplayCutoutMode को किसी दूसरे विकल्प पर सेट करें या window.attributes.layoutInDisplayCutoutMode = LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT का इस्तेमाल करके विंडो एट्रिब्यूट सेट करें. हालांकि, इसके बाद कटआउट मोड पूरी गतिविधि पर लागू हो जाता है. साथ ही, हर कॉम्पोज़ेबल के हिसाब से इसे कंट्रोल नहीं किया जा सकता.

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

सबसे सही तरीके

डिसप्ले में मौजूद कट्सआउट का इस्तेमाल करते समय, इन बातों का ध्यान रखें:

• यूज़र इंटरफ़ेस (यूआई) के अहम एलिमेंट को ध्यान से रखें. काट-छांट किए गए हिस्से में, कोई भी अहम टेक्स्ट, कंट्रोल या अन्य जानकारी न छिपे.
• कटआउट वाले हिस्से में ऐसे इंटरैक्टिव एलिमेंट न रखें या न बढ़ाएं जिनके लिए फ़ाइन-टच की पहचान की ज़रूरत होती है. हो सकता है कि काट-छांट वाले हिस्से में टच सेंसिटिविटी कम हो.
• किनारे से किनारे तक के निर्देशों का पालन करते समय, कटआउट की जानकारी safeDrawing / safeContent इनसेट में शामिल की जाती है.
• जहां भी हो सके, अपने कॉन्टेंट पर लागू करने के लिए सही पैडिंग तय करने के लिए, Modifier.windowInsetsPadding(WindowInsets.safeDrawing) का इस्तेमाल करें. स्टेटस बार की ऊंचाई को हार्डकोड करने से बचें. ऐसा करने पर, कॉन्टेंट ओवरलैप हो सकता है या काट-छांट हो सकती है.

यह जांचना कि आपका कॉन्टेंट, कटआउट के साथ कैसे रेंडर होता है

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

1. डेवलपर के लिए सेटिंग और टूल चालू करें.
2. डेवलपर के लिए सेटिंग और टूल स्क्रीन पर, नीचे की ओर स्क्रोल करके ड्रॉइंग सेक्शन पर जाएं और कटआउट वाले डिसप्ले को सिम्युलेट करें को चुनें.
3. काट-छांट का टाइप चुनें.

   

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