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 স্বয়ংক্রিয়ভাবে স্টেটাস বারের পুরো প্রস্থ জুড়ে একটি কালো বার যোগ করে (কাটআউটের বামে এবং ডানে কন্টেন্ট প্রদর্শিত হয় না)। এটি 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-এর কথা ভুলবেন না।