Notch — grunder, anpassning av gränssnittet till skärmutskärningen

Vad är en Notch?

Notch (utskärning, "ögonbryn") — området i den övre delen av smartphonens skärm där frontkameran, samtalshögtalaren, närhets- och ljussensorer, och för iPhone X och nyare — Face ID-infrarödkameran, punktprojektorn och belysningen (TrueDepth-kamerasystemet) är placerade. Notchen introducerades för att öka den användbara skärmytan samtidigt som alla nödvändiga sensorer bevaras — istället för den övre ramen (bezel) expanderar displayen uppåt runt utskärningen.

Mått: standard iPhone-notch har en bredd på ~34 mm (~209 pt i porträttorientering för 6.1-tumsmodeller) och en höjd på ~5 mm (~30 pt). Vid sidorna av notchen finns "öron" (ears) — små skärmdelar till höger och vänster om utskärningen. Det högra "örat" visar vanligtvis tid, batteriindikator och Wi-Fi; det vänstra — operatör och status. I liggande orientering döljer iOS notchen med en svart stapel över hela statusfältets bredd — innehåll visas inte i utskärningszonen.

Inte bara iPhone: notch-konceptet antogs av många Android-tillverkare. Google Pixel 3 XL, OnePlus 6, Huawei P20, Xiaomi Mi 8 — alla hade utskärning. Vissa tillverkare gick längre: "droppformad" utskärning (waterdrop notch), punch-hole-kamera (hål i skärmen), skjutkamera (utdragbar modul). Moderna Android-flaggskepp (Samsung Galaxy S23+, Google Pixel 8 Pro) använder punch-hole — ett minimalt hål för kameran i den övre delen av skärmen, utan bred utskärning.

Safe Area i iOS: safeAreaInsets

Safe Area — är ett rektangulärt område inuti vyn som garanterat inte täcks av systemgränssnittselement: notch, rundade skärmhörn (corner radius), Home Indicator, flikfält (tab bar) och navigeringsfält (navigation bar). Safe Areas mått returneras via egenskapen UIView.safeAreaInsets — UIEdgeInsets med värdena top, left, bottom, right. För iPhone med notch är den övre marginalen = ~44 pt (porträtt) eller ~0 pt (liggande med svart stapel).

// Användning av safeAreaInsets för att positionera innehåll
class NotchAwareViewController: UIViewController {

    override func viewDidLayoutSubviews() {
        super.viewDidLayoutSubviews()

        // Läsa Safe Area-marginaler
        let safeArea = self.view.safeAreaInsets

        // Logga värden för felsökning
        print("Övre insättning: \(safeArea.top)")    // ~44 pt med notch
        print("Nedre insättning: \(safeArea.bottom)") // ~34 pt med Home Indicator

        // Positionera rubrik med hänsyn till 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
        )
    }

    // Hantering av Safe Area-ändringar (rotation, Multi-Tasking)
    override func viewSafeAreaInsetsDidChange() {
        super.viewSafeAreaInsetsDidChange()
        viewDidLayoutSubviews() // Omberäkning av layout
    }
}

Auto Layout och Safe Area: i Interface Builder, använd "Safe Area" som anchor-mål istället för "Superview". För programmerad layout, använd safeAreaLayoutGuide: let guide = view.safeAreaLayoutGuide; titleLabel.topAnchor.constraint(equalTo: guide.topAnchor). iOS uppdaterar automatiskt safeAreaInsets vid enhetsrotation, övergång till Split View på iPad, visning/döljning av tangentbord och orienteringsändring. Alla standard UIKit-kontroller (UINavigationController, UITabBarController) tar redan hänsyn till Safe Area. Anpassade vyer och kontroller måste explicit använda safeAreaInsets.

Notch i Android: DisplayCutout och WindowInsets

DisplayCutout — Android SDK-klassen, tillagd i API 28 (Android 9.0), som beskriver utskärningsområdet på skärmen. Den kan erhållas via WindowInsets.displayCutout(). Klassen returnerar boundingBoxList — en lista med rektanglar som beskriver utskärningen(arna) och safeInsetTop/safeInsetBottom/safeInsetLeft/safeInsetRight — minimala marginaler för säker visning av innehåll. Android stöder olika utskärningskonfigurationer: central (som iPhone), sidolagd (kamera i hörnet), dubbel (två kameror), punch-hole.

// Anpassning av gränssnitt till DisplayCutout i Activity
class NotchAwareActivity : AppCompatActivity() {

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

        // Tillåter visning av innehåll i utskärningszonen (om nödvändigt)
        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)

        // Hämta DisplayCutout via WindowInsets
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.P && hasFocus) {
            val cutout = window.decorView.rootWindowInsets.displayCutout
            val safeTop = cutout?.safeInsetTop ?: 0

            // Ställ in marginal för övre innehåll
            headerView.updatePadding(top = safeTop)
        }
    }
}

Visningslägen (layoutInDisplayCutoutMode): ALWAYS — innehåll kan visas i utskärningszonen (för fullskärmsappar, video, spel); NEVER — innehåll täcker aldrig utskärningen, systemet lägger till marginal; SHORT_EDGES — innehåll visas i utskärningszonen endast på kortsidan (för porträttappar med notch högst upp). Standardläge — SHORT_EDGES (från Android 12). För punch-hole-kamera är utskärningen mindre och många appar använder ALWAYS för maximal skärmanvändning.

Notchens utveckling: från iPhone X till Dynamic Island

iPhone X (2017) — den första Apple-smarttelefonen med notch. Utskärningen innehöll TrueDepth-kameran för Face ID — ett system bestående av infraröd kamera, punktprojektor (Dot Projector) och belysning (Flood Illuminator). Utskärningens mått: ~34 mm × 5 mm. I iOS 11 introducerade Apple Safe Area för anpassning av appar. Användarna delades: vissa accepterade notchen som nödvändighet för Face ID, andra kritiserade den för den "beskurna" skärmen.

iPhone 13 (2021) — Apple minskade notchen med 20% genom att flytta högtalaren till skärmens övre ram. Detta var den sista klassiska notchen. iPhone 14 och 14 Plus (2022) behöll den minskade notchen. iPhone 14 Pro och Pro Max introducerade Dynamic Island — en ellipsoid utskärning som kombinerar kameran och Face ID-sensorerna, dynamiskt ändrar form och visar systemmeddelanden (timer, musik, AirPods-anslutning). Dynamic Island blev en mjukvaruplattform med eget API (ActivityKit, Live Activities).

Dynamic Island — är inte bara en utskärning, utan ett interaktivt gränssnittselement. När AirPods ansluts expanderar ön och visar ikon och status. En taxibeställning (Uber) visar ankomsttiden. En timer syns i ön när appen minimeras. Dynamic Island finns på iPhone 14 Pro/Pro Max, iPhone 15/15 Pro/15 Pro Max, iPhone 16/16 Pro/16 Pro Max. Safe Area för Dynamic Island: övre marginal = 54 pt (10 pt mer än klassisk notch).

Designregler för gränssnitt med utskärning

Göm aldrig innehåll bakom notchen — använd Safe Area eller DisplayCutout för automatisk beräkning av marginaler. Ställ inte in fasta marginalvärden (t.ex. 44 pt) — de varierar på olika enheter och i olika orienteringar. Använd alltid system-API:er för att läsa Safe Area: safeAreaInsets i iOS, windowInsets.displayCutout i Android. Detta garanterar korrekt visning på alla enheter: iPhone SE (utan notch), iPhone 14 Pro (notch), iPhone 15 (Dynamic Island), iPad (utan notch, men med Home Indicator).

Liggande orientering — en särskild riskzon. På iPhone med notch i liggande läge lägger iOS automatiskt till en svart stapel över hela statusfältets bredd (innehåll till vänster och höger om notchen visas inte). Detta görs av systemet med Safe Area inset = 0 top, men ökade left/right insets (~47 pt). Försök inte inaktivera detta beteende — App Store avvisar appen som använder "förbjudna" skärmzoner för innehåll i liggande läge. För fullskärmsvideo, använd AVPlayerViewController, som automatiskt placerar kontroller utanför notch-zonen.

Bakgrund och statusfält: om du använder en anpassad bakgrundsfärg ska den fylla hela skärmområdet, inklusive zonen bakom notchen. Rita inte innehåll över statusfältet — använd Safe Area. För mörkt läge, se till att statusfältet är läsbart: ställ in preferredStatusBarStyle enligt din bakgrundsstil (.default för mörk text på ljus bakgrund, .lightContent för ljus text på mörk bakgrund).

Testa anpassning till Notch

Simulatorer och emulatorer: Xcode tillhandahåller simulatorer för alla iPhone-modeller med notch (iPhone X–14) och Dynamic Island (iPhone 14 Pro–15). Android Studio tillhandahåller emulatorer med olika utskärningskonfigurationer (Google Pixel 3 XL, anpassad emulator med cutout). Testa i porträtt- och liggande orientering, med och utan tangentbord, i Split View (iPad). Kontrollera att allt innehåll är läsbart och inte täckt.

Riktiga enheter: notchen på en simulator och på en riktig enhet kan skilja sig. Till exempel visar iPhone 14 Pro-simulatorn Dynamic Island, men utan verklig interaktivitet (Live Activities). I Android kan punch-hole-kameran kanske inte emuleras exakt. Det bästa sättet är att testa på riktiga enheter. Minsta uppsättning: iPhone SE (utan notch), iPhone 14 (notch), iPhone 15 Pro (Dynamic Island), Android med punch-hole, Android med waterfall-skärm (Samsung Edge).

Verktyg: för iOS, använd Xcode View Debugger med alternativet "Show Safe Area Insets" — visar visuellt Safe Areas gränser. För Android — Layout Inspector i Android Studio, som visar WindowInsets och DisplayCutout i panelen Attributes. Accessibility Inspector är också användbar för att kontrollera att alla element inom Safe Area är tillgängliga för VoiceOver/TalkBack. Glöm inte iPad utan notch, men med Home Indicator (nedre marginal ~21 pt) och rundade hörn.