Use the iPhone X notch in creative ways πŸ‘©β€πŸŽ¨πŸ‘¨β€πŸŽ¨.

Related tags

UI design ui uiview toolbar draw swift-framework swift-4 iphone-x
Overview

NotchToolkit

NotchToolkit is a framework for iOS that allow developers use the iPhone X notch space in creative ways. Inspired by

I was working on this idea of blending app design with the #iPhoneX notch. πŸ“² πŸ€— pic.twitter.com/lj2AhxWNeE

β€” LuboΕ‘ Volkov ⚑️ (@0therPlanet) September 18, 2017

Table of Contents Description
Documentation Describes the configuration options NotchToolkit offers
Preview Displays preview images of NotchToolkit features
Compatibility Describes the NotchToolkit device and iOS compatibality
Example Project Explains how to run the example project provided in this repository
Installation Describes the CocoaPods, Carthage, and Manual options to install NotchToolkit
Implementation Lists the steps needed to implement NotchToolkit into your project
More Options Describes an extra feature NotchToolkit supports
License Describes NotchToolkit license

Preview

NotchImageView

imageViewPreview

NotchToolbar

toolbarPreview

Draw Notch

drawPreview

Compatibility

Although NotchToolkit is made for iPhone X, it can be implemented in older iPhone devices. This framework was tested on:

  1. iPhone X
  2. iPhone 8 plus, 7 plus, 6s plus and 6 plus
  3. iPhone 8, 7, 6s and 6
  4. iPhone SE and 5s

NotchToolkit requires

  • iOS 11
  • Swift 3.2 or higher

NotchToolkit has options to customize your Toolbar and UIView,

check Documentation and More Options for more details.

Example Project

To try the example project, simply download this repo then open NotchToolkit-Example.xcworkspace project file, found in the Example folder.

Installation

CocoaPods

  1. Download CocoaPods using this command in Terminal
$ sudo gem install cocoapods
  1. Redirect to your project folder in Terminal
$ cd YOUR_PROJECT_FILE_PATH
  1. Initialize a pod in Terminal
$ pod init
  1. Open Podfile in a text editor and add this line
pod 'NotchToolkit'
  1. Go back to Terminal and install the pod
$ pod install

Carthage

  1. Add this line to the Cartfile in your project directory
github "AFathi/NotchToolkit"
  1. Update your Carthage directory
$ carthage update

Manual

Drag the NotchToolkit.xcodeproj file into your project then add NotchToolkit as an embedded binary of your targets.

Implement in your project

  1. import NotchToolkit in a UIViewController class
  2. Add NotchToolbarDelegate in the delegate section
class ViewController: UIViewController, NotchToolbarDelegate
  1. Add delegate methods
//A protocol method that's triggered when the device rotates.
func deviceDidRotate() {
}

//A protocol method that's triggered when an icon is selected.
func didTapToolIcon(_ tools: UICollectionView, toolIndex: IndexPath, section: Int, row: Int) {
}
  1. Create a NotchToolbar global variable
let toolbar = NotchToolbar()
  1. Configure and initialize toolbar in viewDidLoad
toolbar.notch.isVisible = true

toolbar.notch.height = 250

toolbar.toolList = [
//[icon image, title]
[UIImage(named:"pikachusquare")!, "Pikachu"],
//only image icons
UIImage(named:"spongebob")!,
//only string icons (mainly for emojis πŸ˜‰)
"πŸ€”", "πŸ€“",
"πŸ“±", "πŸ‘©β€πŸ’»",
"πŸ‘¨β€πŸ’»", "βœ…", "πŸ”₯"]

toolbar.delegate = self
toolbar.initializeToolbar(self)
  1. Call autoResize() method in the deviceDidRotate delegate method
func deviceDidRotate() {
toolbar.autoResize()
}

You're all set! πŸ€“

Show and Hide toolbar

showOrHide()

This method allows you to show and hide the NotchToolbar. You can call this method in an IBAction that handles showing/hiding the toolbar.

@IBAction func buttonClicked(_ sender: UIButton) {
toolbar.showOrHide()
}

Handle Icon Selection

  1. Make sure you set the NotchToolbar delegate to self.
  2. Handle the icon selection in the didTapToolIcon delegate method:
func didTapToolIcon(_ tools: UICollectionView, toolIndex: IndexPath, section: Int, row: Int) {
if row == 0 {
print("first icon")
}else if row == 1 {
print("second icon")
}
}

More Options

This framework include a UIView extension that allow you draw a notch bezier path to any UIView class or subclass.

draw(_ notch:curveType, position:curvePosition, curve:CGFloat?, customBounds:CGRect? = nil)

This is a UIView extension that allows you add ovals and rounded corners to any UIView.

  • For type oval, set curve scale from 1.0 - 10.0.
  • For type corner, curve is the radius size.
  • Check curveType & curvePosition for more info.

Example

//horizontalSides draws an oval-based bezier path vertically on the right & left sides of a view.
myView.draw(.oval, position: .horizontalSides, curve: 1.5)

//diagonalAC draws rounded rectangle corners diagonally from topLeft to bottomRight of a view.
myView.draw(.corner, position: .diagonalAC, curve: 35)

Preview

Demo

LICENSE

NotchToolkit is under MIT license. Check the LICENSE file for more details.

You might also like...
Easy to use, highly customizable gauge view
Easy to use, highly customizable gauge view

GDGauge - Customizable Gauge View Requirements Xcode 11+ Swift 5 iOS 9+ Installation Swift Package Manager .package(url: "https://github.com/saeid/GDG

Saeid 74 Dec 5, 2022
🚨Use the iPhone X Notch to display alerts. 🚨
🚨Use the iPhone X Notch to display alerts. 🚨

NotchyAlert Prerequisites Xcode 9.x Swift 4.x iPhone X Simulator/Device Demo Installation Cocoapods To install NotchyAlert using Cocoapods, add the fo

Sofiane Beors 70 Nov 20, 2022
Apple provides us two ways to use UIKit views in SwiftUI

RepresentableKit Apple provides us two ways to use UIKit views in SwiftUI: UIVie

YUMEMI Inc. 43 Dec 26, 2022
A simple way to hide the notch on the iPhone X
A simple way to hide the notch on the iPhone X

NotchKit 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 Sebas

Harshil Shah 1.8k Dec 5, 2022
A little app which shows different ways to simulate NSPanel using NSWindow
A little app which shows different ways to simulate NSPanel using NSWindow

FunWithPanels A little app which shows different ways to simulate NSPanel using NSWindow, for better or worse. Settings FunWithPanels uses a combinati

Mitchell Cohen 7 Aug 3, 2022
C4 is an open-source creative coding framework that harnesses the power of native iOS programming with a simplified API that gets you working with media right away. Build artworks, design interfaces and explore new possibilities working with media and interaction.
C4 is an open-source creative coding framework that harnesses the power of native iOS programming with a simplified API that gets you working with media right away. Build artworks, design interfaces and explore new possibilities working with media and interaction.

Code, Creatively. C4 is an open-source creative coding framework that harnesses the power of native iOS programming with a simplified API that gets yo

null 972 Dec 17, 2022
ExpandedTabBar is a very creative designed solution for
ExpandedTabBar is a very creative designed solution for "more" items in UITabBarController

ExpandedTabBar is a very creative designed solution for "more" items in UITabBarController. It's greate experience to have more comfortable and intuitive UI.

Yervand Saribekyan, iOS Dev 256 Nov 1, 2022
A CMIO Camera Extension of the creative camera type, with configuration app

ArtFilm A CMIO Camera Extension of the creative camera type, with configuration app ArtFilm is the sample code for the blog post Getting To Grips With

Halle 7 Jan 1, 2023
StatusBarOverlay will automatically show a
StatusBarOverlay will automatically show a "No Internet Connection" bar when your app loses connection, and hide it again. It supports apps which hide the status bar and The Notch

StatusBarOverlay StatusBarOverlay will automatically show a "No Internet Connection" bar when your app loses connection, and hide it again. It support

Idle Hands Apps 160 Nov 2, 2022
Add the Notch on the menubar like the new MacBook Pro.
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
An example of adding a faux notch using AppKit + SwiftUI
An example of adding a faux notch using AppKit + SwiftUI

faux-notch An example of adding a faux notch using AppKit + SwiftUI What is this? It's a bare-bones example that renders a fake MacBook notch in macOS

Tanner Stokes 2 Nov 14, 2021
Add a software notch to your outdated Macbook! Deceive strangers!
Add a software notch to your outdated Macbook! Deceive strangers!

The Notch Draws a persistent little cutout out at the top of the screen, on top of everything else. Purpose Each year when Apple releases a new Macboo

vgmoose 15 Nov 18, 2022
A magic trick to hide the iPhoneX
A magic trick to hide the iPhoneX "Notch"

Cut The Notch - The Magic Trick This app helps your create an illusion that you can hide the iPhone X notch Trick Steps App will show a fake "notch" o

Wutian 94 Oct 30, 2022
iPhone and iPod Touch version of Skeleton Key: is an addictive and unique puzzle game in which you shift keys around the board unlocking treasure chests. Made with cocos2d-iphone.

Skeleton Key (iOS) Skeleton Key is an addictive and unique puzzle game in which you shift keys around the board unlocking treasure chests. It's availa

null 117 Jun 6, 2022
A common use case is wanting to convert device identifiers such as iPhone10,1 to a user friendly name; iPhone 8.

Devices Swift package that contains all devices from https://www.theiphonewiki.com/wiki/Models. A common use case is wanting to convert device identif

null 17 Nov 28, 2022
Easy to use CFNetwork wrapper for HTTP requests, Objective-C, Mac OS X and iPhone

ASIHTTPRequest is an easy to use wrapper around the CFNetwork API that makes some of the more tedious aspects of communicating with web servers easier

Ben Copsey 5.8k Dec 14, 2022
Allows you to use custom maps in iphone applications and attempts to mimics some of the behaviour of the MapKit framework
Allows you to use custom maps in iphone applications and attempts to mimics some of the behaviour of the MapKit framework

NAMapKit Lets you drop pins or custom annotations onto a standard UIImage or a tiled NATiledImageView. Includes callouts, multi-colored pins, animatio

Neil Ang 263 Jun 29, 2022
Use any custom view as custom callout view for MKMapView with cool animations. Use any image as annotation view.
Use any custom view as custom callout view for MKMapView with cool animations. Use any image as annotation view.

MapViewPlus About MapViewPlus gives you the missing methods of MapKit which are: imageForAnnotation and calloutViewForAnnotationView delegate methods.

Okhan Okbay 162 Nov 16, 2022
Sample project to learn how to use swiftui 2.0 with Combine, we look into using SwiftUI MVVM, also interact with an API to get our newsfeed, use SPM(Swift Package Manager) to speed up our development flow and handle swiftui layout with views such as VStack.

News APP MVVM + SwiftUI + Combine + Swift Package Manager Sample project to learn how to use swiftui 2.0 with Combine, we look into using SwiftUI MVVM

Natalia Stele 4 Dec 27, 2022
Comments
  • terminating with uncaught exception of type NSException

    terminating with uncaught exception of type NSException

    Hello i'm first use Third-party libraries i have a error

    // // ViewController.swift

    import UIKit import NotchToolkit class ViewController: UIViewController,NotchToolbarDelegate { let toolbar = NotchToolbar () func deviceDidRotate() { toolbar.autoResize() }

    func didTapToolIcon(_ tools: UICollectionView, toolIndex: IndexPath, section: Int, row: Int) {
    if row == 0 {
        print("first icon")
    }else if row == 1 {
        print("second icon")
    }
}
override func viewDidLoad() {
    super.viewDidLoad()
    toolbar.notch.isVisible = true
    
    toolbar.notch.height = 250
    
    toolbar.toolList = [
        //[icon image, title]
        [UIImage(named:"pikachusquare")!, "Pikachu"],
        //only image icons
        UIImage(named:"spongebob")!,
        //only string icons (mainly for emojis πŸ˜‰)
        "πŸ€”", "πŸ€“",
        "πŸ“±", "πŸ‘©β€πŸ’»",
        "πŸ‘¨β€πŸ’»", "βœ…", "πŸ”₯"]
    
    toolbar.delegate = self
    toolbar.initializeToolbar(self)
    
    // Do any additional setup after loading the view, typically from a nib.
}




@IBAction func Click(_ sender: UIButton) {
    if toolbar.notch.isVisible {
        sender.setTitle("Show Notch Toolbar", for: .normal)
    }else{
        sender.setTitle("Hide Notch Toolbar", for: .normal)
    }
    toolbar.showOrHide()
}

    }

    opened by backter 0
Releases(1.3)
Owner
Ahmed Bekhit
Maker of appsπŸ“±. Breaker of nils πŸ›‘.
Ahmed Bekhit
GitHub
A little app which shows different ways to simulate NSPanel using NSWindow

FunWithPanels A little app which shows different ways to simulate NSPanel using NSWindow, for better or worse. Settings FunWithPanels uses a combinati

Mitchell Cohen 7 Aug 3, 2022
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 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
An easy to use FAQ view for iOS written in Swift

FAQView An easy to use FAQ view for iOS written in Swift. This view is a subclass of UIView. Setup with CocoaPods If you are using CocoaPods add this

Mukesh Thawani 467 Dec 5, 2022
Powerful and easy-to-use vector graphics Swift library with SVG support

Macaw Powerful and easy-to-use vector graphics Swift library with SVG support We are a development agency building phenomenal apps. What is Macaw? Mac

Exyte 5.9k Jan 1, 2023
An easy to use UI component to help display a signal bar with an added customizable fill animation

TZSignalStrengthView for iOS Introduction TZSignalStrengthView is an easy to use UI component to help display a signal bar with an added customizable

TrianglZ LLC 22 May 14, 2022
Easy-to-use HStack that snaps to elements on scroll.

SnapToScroll Drop-in SwiftUI-based container view for horizontal snapping. example-video.mp4 Getting Started Using SnapToScroll is straightforward. Th

null 206 Jan 7, 2023
Easily use UIKit views in your SwiftUI applications. Create Xcode Previews for UIView elements

SwiftUIKitView Easily use UIKit views in SwiftUI. Convert UIView to SwiftUI View Create Xcode Previews from UIView elements SwiftUI functional updatin

Antoine van der Lee 682 Dec 29, 2022
An easy to use FAQ view for iOS written in Swift

FAQView An easy to use FAQ view for iOS written in Swift. This view is a subclass of UIView. Setup with CocoaPods If you are using CocoaPods add this

Mukesh Thawani 466 Nov 9, 2021