Notch — मूल बातें, स्क्रीन कटआउट के लिए इंटरफ़ेस अनुकूलन

Notch क्या है?

Notch (कटआउट, "बैंग्स") स्मार्टफोन स्क्रीन के शीर्ष पर एक क्षेत्र है जहाँ फ्रंट कैमरा, ईयरपीस स्पीकर, प्रॉक्सिमिटी और एम्बिएंट लाइट सेंसर स्थित होते हैं, और iPhone X और नए के लिए — इन्फ्रारेड Face ID कैमरा, डॉट प्रोजेक्टर और फ्लड इल्यूमिनेटर (TrueDepth कैमरा सिस्टम)। Notch को सभी आवश्यक सेंसर को बनाए रखते हुए उपयोग योग्य स्क्रीन क्षेत्र को बढ़ाने के लिए पेश किया गया था — शीर्ष बेज़ल के बजाय, डिस्प्ले कटआउट के चारों ओर ऊपर की ओर फैलता है।

आयाम: मानक iPhone notch लगभग ~34 मिमी चौड़ा (~6.1-इंच मॉडल के लिए पोर्ट्रेट में ~209 pt) और ~5 मिमी ऊँचा (~30 pt) होता है। Notch के किनारों पर "कान" होते हैं — कटआउट के दाएँ और बाएँ स्क्रीन के छोटे खंड। दायाँ "कान" आमतौर पर समय, बैटरी इंडिकेटर और Wi-Fi दिखाता है; बायाँ कैरियर और स्थिति दिखाता है। लैंडस्केप ओरिएंटेशन में, iOS notch को स्टेटस बार की पूरी चौड़ाई में एक काली पट्टी से छिपा देता है — कटआउट क्षेत्र में सामग्री प्रदर्शित नहीं होती है।

केवल iPhone नहीं: notch अवधारणा को कई Android निर्माताओं ने अपनाया। Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — सभी में कटआउट था। कुछ निर्माता और आगे बढ़े: वॉटरड्रॉप notch, पंच-होल कैमरा (स्क्रीन में छेद), स्लाइडर कैमरा (वापस लेने योग्य मॉड्यूल)। आधुनिक Android फ्लैगशिप (Samsung Galaxy S23+, Google Pixel 8 Pro) पंच-होल का उपयोग करते हैं — स्क्रीन के शीर्ष पर कैमरे के लिए एक न्यूनतम छेद, बिना चौड़े कटआउट के।

iOS में Safe Area: safeAreaInsets

Safe Area एक व्यू के अंदर एक आयताकार क्षेत्र है जो सिस्टम इंटरफ़ेस तत्वों: notch, गोल स्क्रीन कोनों (corner radius), Home Indicator, टैब बार और नेविगेशन बार से ढका नहीं जाने की गारंटी है। Safe Area के आयाम UIView.safeAreaInsets गुण के माध्यम से लौटाए जाते हैं — top, left, bottom, right मानों के साथ UIEdgeInsets। Notch वाले iPhone के लिए, top inset = ~44 pt (पोर्ट्रेट) या ~0 pt (काली पट्टी के साथ लैंडस्केप)।

// सामग्री स्थिति निर्धारण के लिए safeAreaInsets का उपयोग
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Safe Area मार्जिन पढ़ना
        let safeArea = self.view.safeAreaInsets

        // डिबगिंग के लिए मान लॉग करना
        print("Top inset: \(safeArea.top)")    // ~44 pt notch के साथ
        print("Bottom inset: \(safeArea.bottom)") // ~34 pt Home Indicator के साथ

        // Safe Area के साथ शीर्षक स्थिति निर्धारण
        titleLabel.frame = CGRect(
            x: safeArea.left + 16,
            y: safeArea.top + 16,
            width: self.view.bounds.width - safeArea.left - safeArea.right - 32,
            height: 44
        )
    }

    // Safe Area परिवर्तनों को संभालना (रोटेशन, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // लेआउट पुनर्गणना
    }
}

Auto Layout और Safe Area: Interface Builder में, "Superview" के बजाय एंकर लक्ष्य के रूप में "Safe Area" का उपयोग करें। प्रोग्रामेटिक लेआउट के लिए, safeAreaLayoutGuide का उपयोग करें: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor)। iOS डिवाइस रोटेशन, iPad पर Split View में प्रवेश, कीबोर्ड दिखाने/छिपाने और ओरिएंटेशन परिवर्तनों पर स्वचालित रूप से safeAreaInsets अपडेट करता है। सभी मानक UIKit कंट्रोलर (UINavigationController, UITabBarController) पहले से ही Safe Area को ध्यान में रखते हैं। कस्टम व्यू और कंट्रोलर को स्पष्ट रूप से safeAreaInsets का उपयोग करना चाहिए।

Android में Notch: DisplayCutout और WindowInsets

DisplayCutout एक Android SDK वर्ग है जो API 28 (Android 9.0) में जोड़ा गया था जो स्क्रीन पर कटआउट क्षेत्र का वर्णन करता है। इसे WindowInsets.displayCutout() के माध्यम से प्राप्त किया जा सकता है। वर्ग boundingBoxList लौटाता है — कटआउट का वर्णन करने वाले आयतों की एक सूची, और safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — सुरक्षित सामग्री प्रदर्शन के लिए न्यूनतम मार्जिन। Android विभिन्न कटआउट कॉन्फ़िगरेशन का समर्थन करता है: केंद्रीय (iPhone की तरह), साइड (कोने में कैमरा), डुअल (दो कैमरे), पंच-होल।

// Activity में DisplayCutout के लिए इंटरफ़ेस अनुकूलन
class NotchAwareActivity : AppCompatActivity() {

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

        // कटआउट क्षेत्र में सामग्री प्रदर्शन की अनुमति दें (यदि आवश्यक हो)
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P) {
            window.attributes.layoutInDisplayCutoutMode =
                WindowManager.LayoutParams.LAYOUT_IN_DISPLAY_CUTOUT_MODE_NEVER
        }
    }

    override fun onWindowFocusChanged(hasFocus: Boolean) {
        super.onWindowFocusChanged(hasFocus)

        // WindowInsets के माध्यम से DisplayCutout प्राप्त करना
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // शीर्ष सामग्री के लिए मार्जिन सेट करना
            headerView.updatePadding(top = safeTop)
        }
    }
}

प्रदर्शन मोड (layoutInDisplayCutoutMode): ALWAYS — सामग्री कटआउट क्षेत्र में प्रदर्शित हो सकती है (फुल-स्क्रीन ऐप, वीडियो, गेम के लिए); NEVER — सामग्री कभी भी कटआउट को ओवरलैप नहीं करती, सिस्टम मार्जिन जोड़ता है; SHORT_EDGES — सामग्री केवल छोटे किनारे पर कटआउट क्षेत्र में प्रदर्शित होती है (शीर्ष notch वाले पोर्ट्रेट ऐप के लिए)। डिफ़ॉल्ट मोड SHORT_EDGES है (Android 12 से)। पंच-होल कैमरों के लिए, कटआउट छोटा होता है, और कई ऐप स्क्रीन उपयोग को अधिकतम करने के लिए ALWAYS का उपयोग करते हैं।

Notch का विकास: iPhone X से Dynamic Island तक

iPhone X (2017) — Apple का पहला स्मार्टफोन जिसमें notch था। कटआउट में Face ID के लिए TrueDepth कैमरा था — इन्फ्रारेड कैमरा, डॉट प्रोजेक्टर और फ्लड इल्यूमिनेटर की एक प्रणाली। कटआउट आयाम: ~34 मिमी × 5 मिमी। iOS 11 में, Apple ने ऐप अनुकूलन के लिए Safe Area प्रस्तुत किया। उपयोगकर्ता विभाजित हो गए: कुछ ने Face ID के लिए आवश्यक के रूप में notch को स्वीकार किया, दूसरों ने "कटी हुई" स्क्रीन के लिए इसकी आलोचना की।

iPhone 13 (2021) — Apple ने स्पीकर को शीर्ष बेज़ल में स्थानांतरित करके notch को 20% कम कर दिया। यह अंतिम क्लासिक notch था। iPhone 14 और 14 Plus (2022) ने कम किए गए notch को बनाए रखा। iPhone 14 Pro और Pro Max ने Dynamic Island प्रस्तुत किया — एक अंडाकार कटआउट जो कैमरा और Face ID सेंसर को जोड़ता है, जो गतिशील रूप से आकार बदलता है और सिस्टम सूचनाएँ (टाइमर, संगीत, AirPods कनेक्शन) प्रदर्शित करता है। Dynamic Island अपने स्वयं के API (ActivityKit, Live Activities) के साथ एक सॉफ़्टवेयर प्लेटफ़ॉर्म बन गया।

Dynamic Island सिर्फ एक कटआउट नहीं है, बल्कि एक इंटरैक्टिव इंटरफ़ेस तत्व है। AirPods कनेक्ट करने पर, द्वीप आइकन और स्थिति दिखाते हुए विस्तारित होता है। कैब बुलाने (Uber) पर आगमन का समय प्रदर्शित होता है। ऐप को छोटा करने पर टाइमर द्वीप में दिखाई देता है। Dynamic Island iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max पर उपलब्ध है। Dynamic Island के लिए Safe Area: top inset = 54 pt (क्लासिक notch से 10 pt अधिक)।

कटआउट वाले इंटरफ़ेस के लिए डिज़ाइन नियम

सामग्री को notch के पीछे कभी न छिपाएँ — स्वचालित मार्जिन गणना के लिए Safe Area या DisplayCutout का उपयोग करें। निश्चित मार्जिन मान (जैसे 44 pt) निर्धारित न करें — वे विभिन्न उपकरणों और ओरिएंटेशन पर भिन्न होते हैं। Safe Area पढ़ने के लिए हमेशा सिस्टम API का उपयोग करें: iOS में safeAreaInsets, Android में windowInsets.displayCutout। यह सभी उपकरणों पर सही प्रदर्शन सुनिश्चित करता है: iPhone SE (बिना notch), iPhone 14 Pro (notch के साथ), iPhone 15 (Dynamic Island), iPad (बिना notch, लेकिन Home Indicator के साथ)।

लैंडस्केप ओरिएंटेशन — एक विशेष जोखिम क्षेत्र। लैंडस्केप में notch वाले iPhone पर, iOS स्वचालित रूप से स्टेटस बार की पूरी चौड़ाई में एक काली पट्टी जोड़ता है (सामग्री notch के बाएँ और दाएँ प्रदर्शित नहीं होती है)। यह Safe Area inset = 0 top, लेकिन बढ़े हुए left/right insets (~47 pt) द्वारा किया जाता है। इस व्यवहार को अक्षम करने का प्रयास न करें — App Store लैंडस्केप में सामग्री के लिए स्क्रीन के "निषिद्ध" क्षेत्रों का उपयोग करने वाले ऐप को अस्वीकार कर देगा। फुल-स्क्रीन वीडियो के लिए, AVPlayerViewController का उपयोग करें जो स्वचालित रूप से नियंत्रणों को notch क्षेत्र के बाहर रखता है।

पृष्ठभूमि और स्टेटस बार: यदि आप एक कस्टम पृष्ठभूमि रंग का उपयोग करते हैं, तो इसे स्क्रीन के पूरे क्षेत्र को भरना चाहिए, जिसमें notch के पीछे का क्षेत्र भी शामिल है। स्टेटस बार के ऊपर सामग्री न बनाएँ — Safe Area का उपयोग करें। डार्क मोड के लिए, सुनिश्चित करें कि स्टेटस बार पढ़ने योग्य है: अपनी पृष्ठभूमि शैली से मेल खाने के लिए preferredStatusBarStyle सेट करें (.default हल्की पृष्ठभूमि पर गहरे टेक्स्ट के लिए, .lightContent गहरी पृष्ठभूमि पर हल्के टेक्स्ट के लिए)।

Notch अनुकूलन का परीक्षण

सिमुलेटर और एमुलेटर: Xcode notch (iPhone X–14) और Dynamic Island (iPhone 14 Pro–15) वाले सभी iPhone मॉडलों के सिमुलेटर प्रदान करता है। Android Studio विभिन्न कटआउट कॉन्फ़िगरेशन (Google Pixel 3 XL, कटआउट के साथ कस्टम एमुलेटर) के साथ एमुलेटर प्रदान करता है। पोर्ट्रेट और लैंडस्केप ओरिएंटेशन में, कीबोर्ड के साथ और बिना, Split View (iPad) में परीक्षण करें। सत्यापित करें कि सभी सामग्री पढ़ने योग्य है और ढकी नहीं है।

वास्तविक उपकरण: सिमुलेटर और वास्तविक उपकरण पर notch भिन्न हो सकता है। उदाहरण के लिए, iPhone 14 Pro सिमुलेटर Dynamic Island दिखाता है, लेकिन वास्तविक इंटरैक्टिविटी (Live Activities) के बिना। Android के लिए, पंच-होल कैमरा सटीक रूप से एमुलेट नहीं किया जा सकता है। सबसे अच्छा तरीका वास्तविक उपकरणों पर परीक्षण करना है। न्यूनतम सेट: iPhone SE (बिना notch), iPhone 14 (notch के साथ), iPhone 15 Pro (Dynamic Island), पंच-होल वाला Android, वॉटरफॉल स्क्रीन वाला Android (Samsung Edge)।

उपकरण: iOS के लिए, "Show Safe Area Insets" विकल्प के साथ Xcode View Debugger का उपयोग करें — यह Safe Area सीमाओं को दृश्य रूप से दिखाता है। Android के लिए — Android Studio में Layout Inspector, जो Attributes पैनल में WindowInsets और DisplayCutout प्रदर्शित करता है। साथ ही Accessibility Inspector यह सत्यापित करने के लिए उपयोगी है कि Safe Area के अंदर के सभी तत्व VoiceOver/TalkBack के लिए सुलभ हैं। बिना notch लेकिन Home Indicator (लगभग ~21 pt निचला मार्जिन) और गोल कोनों वाले iPad के बारे में न भूलें।