Home

Awesome

NotchToolkit

NotchToolkit is a framework for iOS that allow developers use the iPhone X notch space in creative ways. Inspired by <blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">I was working on this idea of blending app design with the <a href="https://twitter.com/hashtag/iPhoneX?src=hash">#iPhoneX</a> notch. ๐Ÿ“ฒ๐Ÿค— <a href="https://t.co/lj2AhxWNeE">pic.twitter.com/lj2AhxWNeE</a></p>โ€” Luboลก Volkovโšก๏ธ (@0therPlanet) <a href="https://twitter.com/0therPlanet/status/909788913702785026">September 18, 2017</a></blockquote>

Table of ContentsDescription
DocumentationDescribes the configuration options NotchToolkit offers
PreviewDisplays preview images of NotchToolkit features
CompatibilityDescribes the NotchToolkit device and iOS compatibality
Example ProjectExplains how to run the example project provided in this repository
InstallationDescribes the CocoaPods, Carthage, and Manual options to install NotchToolkit
ImplementationLists the steps needed to implement NotchToolkit into your project
More OptionsDescribes an extra feature NotchToolkit supports
LicenseDescribes 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

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.

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.