A simple way to hide the notch on the iPhone X

Related tags

UI ios iphone-x
Overview

NotchKit

CI Status Version CocoaPods Carthage License Contact

NotchKit is a simple way to hide the notch on the iPhone X, and create a card-like interface for your apps. Inspired by this tweet from Sebastiaan de With:

I hope / wish that the 'iPhone 8' UI looks like this: using black OLED or wallpaper behind to make apps 'cards'. Would be beautiful. pic.twitter.com/mravS87NFy

— Sebastiaan de With (@sdw) August 31, 2017

Here's what it looks like:

Demo

Requirements

  • Swift 4
  • iOS 8

Installation

NotchKit is available via CocoaPods and Carthage

CocoaPods

To install NotchKit using CocoaPods, add the following line to your Podfile:

pod 'NotchKit'

Carthage

To install NotchKit using Carthage, add the following line to your Cartfile:

github "HarshilShah/NotchKit"

Usage

Integrating NotchKit is extremely simple. Firstly, import NotchKit in the file where your AppDelegate is stored.

Next, replace the didFinishLaunchingWithOptions method with the following, swapping in your custom view controller's class in place of ViewController

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool {
    window = NotchKitWindow(frame: UIScreen.main.bounds)
    let rootViewController = ViewController()
    window?.rootViewController = rootViewController
    window?.makeKeyAndVisible()
    return true
}

If you use Storyboards, you can instantiate your Storyboard and fetch the new rootViewController in code using the following, swapping in your Storyboard's class for Main:

let storyboard = UIStoryboard(name: "Main", bundle: nil)
let rootViewController = storyboard.instantiateInitialViewController()

If you target a version of iOS earlier than iOS 11, you can still use NotchKit by loading the NotchKitWindow conditionally using the #available syntax, as follows:

window = {
    if #available(iOS 11, *) {
        return NotchKitWindow()
    } else {
        return UIWindow()
    }
}()

And that's all, you're done!

Customisation

There are some customisation points offered in NotchKit.

You can adjust these from any view or view controller belonging to the window, by simply calling the window as a NotchKitWindow, as follows:

(view.window as? NotchKitWindow)?.propertyToCustomise = valueYouWantToSet

Target Devices

By default, NotchKit hides the status bar and home indicator on all devices. However if you choose you can limit this behaviour to just the iPhone X and have it do nothing on other devices by setting the shouldShowBarsOnlyOniPhoneX property to true.

Masked Edges

By default, NotchKit masks all edges where applicable. You can customise this behaviour using the maskedEdges property, which accepts a UIRectEdge object that specifies the edges you want to mask.

Corner Radius

You can customise the corner radius of the window, via the .cornerRadius property. This property is an enum and can either be .standard, which does all the maths for you to show an appropriate corner radius, or you can set a custom value by setting it to .custom(n), where n is a custom corner radius of your choice.

Author

Written by Harshil Shah. You can find me on Twitter.

License

NotchKit is available under the MIT license. See the LICENSE file for more info.


P.S.: This was made mostly as a joke while I was debating different ways to handle the iPhone X.

Apple's updated Human Interface Guidelines for the iPhone X explicitly call this out:

Don't mask or call special attention to key display features. Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.

I'm not sure if violating the HIG is often used as grounds for a rejection, however I wouldn't bet either way.

It only took me a couple of days using the simulator to realise that embracing the notch is the way forward. My intention with open-sourcing this was to make it easier for others to reach that conclusion as well.

#EmbraceTheNotch

Comments
  • Content cut off

    Content cut off

    Im getting an issue where the content at the top of my viewcontroller is being clipped b/c of NotchKit. I was hoping that the library would shift the contents down instead of overlaying them. B/c of this, I have to remove this library since it wont work for my app. Hopefully in the future you plan on adding this in.

    Cheers

    New issue checklist

    opened by joshoconnor89 5
  • Not available on cocoapods

    Not available on cocoapods

    Not available on cocoapods

    When i run "pod install" i get the following response: [!] Unable to find a specification for NotchKit

    opened by 4omar9 3
  • This concept might lead to App Store rejection

    This concept might lead to App Store rejection

    Hey there!

    I really like the concept as it looks much cleaner! However, it seems to interfere with Apples iOS Human Interface Guidelines, where placing black bars at the top of the screen is to be explicitly avoided:

    Don't mask or call special attention to key display features. Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.

    It might be worth mentioning this in the README, as this could lead to rejection by the Apple Store Review Team.

    opened by mwfire 3
  • Property 'maskedEdges' not found on object of type 'NotchKitW

    Property 'maskedEdges' not found on object of type 'NotchKitW

    New issue checklist

    if (@available(iOS 11, *)) { NotchKitWindow *notchWindow = [[NotchKitWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; // [notchWindow setMaskedEdges:UIRectEdgeNone]; notchWindow.maskedEdges = UIRectEdgeNone; self.window = notchWindow; } else { self.window = [[UIWindow alloc] initWithFrame:[[UIScreen mainScreen] bounds]]; }

    error is Property 'maskedEdges' not found on object of type 'NotchKitWindow *'

    swift 4.0 var must add the @objc refs ==> https://stackoverflow.com/questions/45656671/unable-to-access-swift-class-from-objective-c-property-not-found-on-object-of

    opened by sunyazhou13 1
  • Apple Clearly Says This Is Not Allowed!

    Apple Clearly Says This Is Not Allowed!

    From Apple:

    "Don't mask or call special attention to key display features. Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas, either."

    https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

    opened by SudarshanMahesh 1
  • Apps that use this technique will be rejected by Apple

    Apps that use this technique will be rejected by Apple

    Hi there, the idea is good but there is this tiny rule on the iPhone X Human Interface Guidelines...

    Don't mask or call special attention to key display features. Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.

    https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

    :(

    opened by KatkayApps 1
  • Against guidelines?

    Against guidelines?

    From Apple guidelines:

    Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.

    opened by moochit 1
  • Landscape issue

    Landscape issue

    Hi, NotchKit is a great framework, and it works well at portrait pages:

    portrait

    But it has some issue at Landscape page(Some view is cropped too much):

    landscape-error

    The origin Landscape page is look like this:

    landscape-correct
    opened by Huang-Libo 1
  • This violates Apple's iOS Human Interface Guidelines

    This violates Apple's iOS Human Interface Guidelines

    As the title states, this violate's Apple's guidelines and can lead to removal of an app form the app store.

    Don't mask or call special attention to key display features. Don't attempt to hide the device's rounded corners, sensor housing, or indicator for accessing the Home screen by placing black bars at the top and bottom of the screen. Don't use visual adornments like brackets, bezels, shapes, or instructional text to call special attention to these areas either.

    Source: https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/

    opened by MJLyco 1
  • -[UIScreen isiPhoneX]: unrecognized selector sent to instance

    -[UIScreen isiPhoneX]: unrecognized selector sent to instance

    Not really sure why this is happening. I set the extension and computed property to public and it didn't fix anything. Happens when updateCornerRadii() gets called in layoutSubviews().

    Temporary fix: I added this

    private var isiPhoneX: Bool {
          return screen.nativeBounds.height == 2436 && screen.nativeBounds.width  == 1125
    }
    

    to NotchKitWindow and replaced all instances of screen.isiPhoneX with isiPhoneX.

    opened by ghost 1
  • SwiftUI support

    SwiftUI support

    Add support to use in SceneDelegate.swift via API checking. Uses:

    func scene(_ scene: UIScene, willConnectTo session: UISceneSession, options connectionOptions: UIScene.ConnectionOptions) {
    ...
    let notch = NotchKitWindow(windowScene: scene)
    ...
    }
    
    opened by blyscuit 0
Releases(0.4.2)
Owner
Harshil Shah
I make apps and stuff
Harshil Shah
Add the Notch on the menubar like the new MacBook Pro.

iNotch Add the Notch on the menubar like the new MacBook Pro. Installation This app works on macOS 11.0 or later. Download iNotch.zip from releases pa

Takuto NAKAMURA (Kyome) 8 Apr 3, 2022
A library, which adds the ability to hide navigation bar when view controller is pushed via hidesNavigationBarWhenPushed flag

HidesNavigationBarWhenPushed A library, which adds the ability to hide navigation bar when view controller is pushed via hidesNavigationBarWhenPushed

Danil Gontovnik 55 Oct 19, 2022
A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView and iPhone X safe area support for content reloading. Built for iOS 10 and later.

Arale A custom stretchable header view for UIScrollView or any its subclasses with UIActivityIndicatorView support for reloading your content. Built f

Putra Z. 43 Feb 4, 2022
MZFormSheetPresentationController provides an alternative to the native iOS UIModalPresentationFormSheet, adding support for iPhone and additional opportunities to setup UIPresentationController size and feel form sheet.

MZFormSheetPresentationController MZFormSheetPresentationController provides an alternative to the native iOS UIModalPresentationFormSheet, adding sup

Michał Zaborowski 979 Nov 17, 2022
ToastSwiftUI-master - A simple way to show a toast or a popup in SwiftUI

ToastSwiftUI-master - A simple way to show a toast or a popup in SwiftUI

Kushal Shingote 2 May 25, 2022
A way to quickly add a notification badge icon to any view. Make any view of a full-fledged animated notification center.

BadgeHub A way to quickly add a notification badge icon to any view. Demo/Example For demo: $ pod try BadgeHub To run the example project, clone the r

Jogendra 772 Dec 28, 2022
A better way to present a SFSafariViewController or start a ASWebAuthenticationSession in SwiftUI.

BetterSafariView A better way to present a SFSafariViewController or start a ASWebAuthenticationSession in SwiftUI. Contents Motivation Requirements U

Dongkyu Kim 392 Dec 31, 2022
Fashion is your helper to share and reuse UI styles in a Swifty way.

Fashion is your helper to share and reuse UI styles in a Swifty way. The main goal is not to style your native apps in CSS, but use a set

Vadym Markov 124 Nov 20, 2022
An easy way to add a shimmering effect to any view with just one line of code. It is useful as an unobtrusive loading indicator.

LoadingShimmer An easy way to add a shimmering effect to any view with just single line of code. It is useful as an unobtrusive loading indicator. Thi

Jogendra 1.4k Jan 4, 2023
☠️ An elegant way to show users that something is happening and also prepare them to which contents they are awaiting

Features • Guides • Installation • Usage • Miscellaneous • Contributing ?? README is available in other languages: ???? . ???? . ???? . ???? . ???? To

Juanpe Catalán 11.7k Jan 6, 2023
Custom emojis are a fun way to bring more life and customizability to your apps.

Custom emojis are a fun way to bring more life and customizability to your apps. They're available in some of the most popular apps, such as Slack, Di

Stream 244 Dec 11, 2022
Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle.

Twinkle ✨ Twinkle is a Swift and easy way to make any UIView in your iOS or tvOS app twinkle. This library creates several CAEmitterLayers and animate

patrick piemonte 600 Nov 24, 2022
List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model and doesn't depend on UI framework

SwiftListTreeDataSource List tree data souce to display hierachical data structures in lists-like way. It's UI agnostic, just like view-model, so can

Dzmitry Antonenka 26 Nov 26, 2022
The Bloc Pattern is a way to separate UI and Logic in SwiftUI codes;

The Bloc Pattern is a way to separate UI and Logic in SwiftUI codes. The Bloc is like a state machine where it accepts an event and produce a state.

mehdi sohrabi 3 Apr 20, 2022
DrawerKit lets an UIViewController modally present another UIViewController in a manner similar to the way Apple's Maps app works.

DrawerKit What is DrawerKit? DrawerKit is a custom view controller presentation mimicking the kind of behaviour in the Apple Maps app. It lets any vie

Babylon Health 773 Dec 27, 2022
CITreeView created to implement and maintain that wanted TreeView structures for IOS platforms easy way

CITreeView CITreeView created to implement and maintain that wanted TreeView structures for IOS platforms easy way. CITreeView provides endless treevi

Cenk Işık 126 May 28, 2022
Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it.

SwiftUI TagView Creating a simple selectable tag view in SwiftUI is quite a challenge. here is a simple & elegant example of it. Usage: Just copy the

Ahmadreza 16 Dec 28, 2022
Simple battery shaped UIView

BatteryView Simple battery shaped UIView. Usage let batteryView = BatteryView(frame: smallRect) batteryView.level = 42 // anywhere in 0...100 batteryV

Yonat Sharon 50 Sep 19, 2022
A simple, customizable view for efficiently collecting country information in iOS apps.

CountryPickerView CountryPickerView is a simple, customizable view for selecting countries in iOS apps. You can clone/download the repository and run

Kizito Nwose 459 Dec 27, 2022