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

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

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

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

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

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

डिफ़ॉल्ट केस

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

Android 15 या उसके बाद के वर्शन पर चलने वाले डिवाइसों पर, एपीआई लेवल 35 या उसके बाद के वर्शन को टारगेट करने वाले ऐप्लिकेशन या enableEdgeToEdge को कॉल करने वाली गतिविधियां, कटआउट वाले हिस्से में ड्रॉ करती हैं.

दूसरे शब्दों में, Android 15 या उसके बाद के वर्शन पर काम करने वाले डिवाइसों में, एपीआई लेवल 35 या उससे बाद के वर्शन को टारगेट करने वाले ऐप्लिकेशन में, नॉन-फ़्लोटिंग विंडो के लिए LAYOUT_IN_DISPLAY_CUTOUT_MODE_DEFAULT, LAYOUT_IN_DISPLAY_CUTOUT_MODE_SHORT_EDGES, और LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER को LAYOUT_IN_DISPLAY_CUTOUT_MODE_ALWAYS के तौर पर समझा जाता है.

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

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

• WindowInsets.displayCutout, WindowInsets.safeContent या WindowInsets.safeDrawing का इस्तेमाल करके

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

हमारा सुझाव है कि Compose में, अपने कॉम्पोज़ेबल में काट-आउट इनसेट मैनेज करने के लिए, displayCutout, safeContent या safeDrawing का इस्तेमाल करें. इस तरीके से, ज़रूरत पड़ने पर डिसप्ले के कटी हुई जगह के पैडिंग का इस्तेमाल किया जा सकता है या ज़रूरत न होने पर उसे अनदेखा किया जा सकता है.

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

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

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

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

   

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