Notch — بنیادی باتیں، سکرین کٹ آؤٹ کے لیے انٹرفیس موافقت

Notch کیا ہے؟

Notch (کٹ آؤٹ) سمارٹ فون سکرین کے اوپر ایک علاقہ ہے جہاں فرنٹ کیمرہ، ایارپیس سپیکر، قریبت اور ماحول روشنی کے سینسرز، اور iPhone X اور نئے کے لیے — انفرائیڈ Face ID کیمرہ، ڈاٹ پروجیکٹر اور فلڈ الیومینیٹر (TrueDepth کیمرا سسٹم) موجود ہیں۔ Notch کو تمام ضروری سینسرز کو برقرار رکھتے ہوئے استعمال کے قابل سکرین علاقہ بڑھانے کے لیے متعارف کرایا گیا — اوپر کے بیزیل (bezel) کے بجائے، ڈسپلے کٹ آؤٹ کے ارد گرد اوپر کی طرف پھیلتا ہے۔

جہات: معیاری 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 (waterdrop)، punch-hole کیمرہ (سکرین مین سوراخ)، سلائڈر کیمرہ (پیچے ہٹنے والا میژیول)۔ جدید Android فلیگ شپس (Samsung Galaxy S23+، Google Pixel 8 Pro) punch-hole استعمال کرتے ہیں — کمری چوڑائی کے بغیر سکرین کے اوپر کیمرے کے لیے ایک کم سے کم سوراخ۔

iOS مین Safe Area: safeAreaInsets

Safe Area ایک ویو کے اندر ایک مستطیل علاقہ ہے جو سسٹم انٹرفیس ایلیمنٹس: notch، گول سکرین کونے (corner radius)، Home Indicator، ٹیب بار (tab bar) اور نیویگیشن بار (navigation bar) سے چھپا نہیں ہیں۔ 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 کی طرح)، پہلو (کونے مین کیمرہ)، ڈبل (دو کیمرے)، punch-hole۔

// 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 سے)۔ punch-hole کیمروں کے لیے، کٹ آؤٹ چھوٹا ہے اور بہت سے ایپس سکرین کا استعمال بڑھانے کے لیے ALWAYS استعمال کرتے ہیں۔

Notch کا ارتقاء: iPhone X سے Dynamic Island تک

iPhone X (2017) — notch والا پہلا Apple سمارٹ فون۔ کٹ آؤٹ مین 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، cutout کے ساتھ کسٹم ایمیولیٹر) کے ساتھ ایمیولیٹر فراہم کرتا ہے۔ پورٹریٹ اور لینڈ سیپ وجہ مین، کی بورڈ کے ساتھ اور بغیر، Split View (iPad) مین ٹیسٹ کریں۔ تصدیق کریں کہ سارا مواد پڑھنے کے قابل ہے اور چھپا نہیں ہے۔

حقیقی آلات: سیمیولیٹر اور حقیقی آلہ پر notch مختلف ہو سکتا ہے۔ مثالاً، iPhone 14 Pro سیمیولیٹر Dynamic Island دکھاتا ہے، لیکن حقیقی انٹریکٹویٹی (Live Activities) کے بغیر۔ Android کے لیے، ایک punch-hole کیمرہ سحیح طور پر ایمیولیٹ نہیں کیا جا سکتا۔ سب سے اچھا طریقہ حقیقی آلات پر ٹیسٹ کرنا ہے۔ کم سے کم سیٹ: iPhone SE (notch کے بغیر)، iPhone 14 (notch کے ساتھ)، iPhone 15 Pro (Dynamic Island)، punch-hole کے ساتھ Android، واٹر فول سکرین (Samsung Edge) کے ساتھ Android۔

آلات: 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 کو نہ بھولیں۔