{"id":2215,"url":"https://github.com/AFathi/NotchToolkit","last_synced_at":"2025-08-02T23:32:16.093Z","repository":{"id":45669462,"uuid":"104839363","full_name":"AFathi/NotchToolkit","owner":"AFathi","description":"Use the iPhone X notch in creative ways 👩‍🎨👨‍🎨.","archived":false,"fork":false,"pushed_at":"2017-11-09T18:13:07.000Z","size":27547,"stargazers_count":57,"open_issues_count":1,"forks_count":3,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-11-24T01:52:26.465Z","etag":null,"topics":["design","draw","iphone-x","swift-4","swift-framework","toolbar","ui","uiview"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/AFathi.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-09-26T05:22:13.000Z","updated_at":"2024-03-12T14:38:38.000Z","dependencies_parsed_at":"2022-07-19T04:47:42.988Z","dependency_job_id":null,"html_url":"https://github.com/AFathi/NotchToolkit","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFathi%2FNotchToolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFathi%2FNotchToolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFathi%2FNotchToolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/AFathi%2FNotchToolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/AFathi","download_url":"https://codeload.github.com/AFathi/NotchToolkit/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228503142,"owners_count":17930520,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["design","draw","iphone-x","swift-4","swift-framework","toolbar","ui","uiview"],"created_at":"2024-01-05T20:16:07.817Z","updated_at":"2024-12-06T17:30:50.685Z","avatar_url":"https://github.com/AFathi.png","language":"Swift","funding_links":[],"categories":["UI"],"sub_categories":["Font","Other free courses","Other Testing"],"readme":"# NotchToolkit\nNotchToolkit is a framework for iOS that allow developers use the iPhone X notch space in creative ways.\nInspired by \u003cblockquote class=\"twitter-tweet\" data-lang=\"en\"\u003e\u003cp lang=\"en\" dir=\"ltr\"\u003eI was working on this idea of blending app design with the \u003ca href=\"https://twitter.com/hashtag/iPhoneX?src=hash\"\u003e#iPhoneX\u003c/a\u003e notch. 📲🤗 \u003ca href=\"https://t.co/lj2AhxWNeE\"\u003epic.twitter.com/lj2AhxWNeE\u003c/a\u003e\u003c/p\u003e\u0026mdash; Luboš Volkov⚡️ (@0therPlanet) \u003ca href=\"https://twitter.com/0therPlanet/status/909788913702785026\"\u003eSeptember 18, 2017\u003c/a\u003e\u003c/blockquote\u003e\n\n| Table of Contents  |  Description       |\n| ------------------ |:------------------:|\n| [Documentation](https://github.com/AFathi/NotchToolkit/wiki) | Describes the configuration options `NotchToolkit` offers |\n| [Preview](#preview)                                        | Displays preview images of `NotchToolkit` features |\n| [Compatibility](#compatibility) | Describes the `NotchToolkit` device and iOS compatibality |\n| [Example Project](#example-project) | Explains how to run the example project provided in this repository |\n| [Installation](#installation) | Describes the [CocoaPods](#cocoapods), [Carthage](#carthage), and [Manual](#manual) options to install `NotchToolkit`   |\n| [Implementation](#implement-in-your-project) | Lists the steps needed to implement `NotchToolkit` into your project |\n| [More Options](#more-options) | Describes an extra feature `NotchToolkit` supports |\n| [License](#license) | Describes `NotchToolkit` license |\n\n## Preview\n[**NotchImageView**](https://github.com/AFathi/NotchToolkit/wiki/NotchImageView)\n\n![imageViewPreview](http://ahmedbekhit.com/magic_notch_img.gif)\n\n\n[**NotchToolbar**](https://github.com/AFathi/NotchToolkit/wiki/NotchToolbar)\n\n![toolbarPreview](http://ahmedbekhit.com/toolbar_preview.gif)\n\n\n[**Draw Notch**](#more-options)\n\n![drawPreview](drawNotch.gif)\n\n## Compatibility\nAlthough `NotchToolkit` is made for iPhone X, it can be implemented in older iPhone devices. This framework was tested on:\n\n1. iPhone X\n2. iPhone 8 plus, 7 plus, 6s plus and 6 plus\n3. iPhone 8, 7, 6s and 6\n4. iPhone SE and 5s\n\n`NotchToolkit` requires\n\n- iOS 11\n- Swift 3.2 or higher\n\n`NotchToolkit` has options to customize your Toolbar and UIView,\n\ncheck [**Documentation**](https://github.com/AFathi/NotchToolkit/wiki) and [**More Options**](#more-options) for more details.\n\n## Example Project\nTo try the example project, simply download this repo then open `NotchToolkit-Example.xcworkspace` project file, found in the `Example` folder.\n\n## Installation\n### CocoaPods\n1. Download [CocoaPods](http://cocoapods.org) using this command in `Terminal`\n```\n$ sudo gem install cocoapods\n```\n2. Redirect to your project folder in `Terminal`\n```\n$ cd YOUR_PROJECT_FILE_PATH\n```\n3. Initialize a pod in `Terminal`\n```\n$ pod init\n```\n4. Open Podfile in a text editor and add this line\n```\npod 'NotchToolkit'\n```\n5. Go back to `Terminal` and install the pod\n```\n$ pod install\n```\n### Carthage\n1. Add this line to the `Cartfile` in your project directory\n```\ngithub \"AFathi/NotchToolkit\"\n```\n2.  Update your Carthage directory\n```\n$ carthage update\n```\n### Manual\nDrag the `NotchToolkit.xcodeproj` file into your project then add `NotchToolkit` as an embedded binary of your targets.\n\n## Implement in your project\n1. `import NotchToolkit` in a `UIViewController` class\n2. Add [`NotchToolbarDelegate`](https://github.com/AFathi/NotchToolkit/wiki/NotchToolbarDelegate) in the delegate section\n```\nclass ViewController: UIViewController, NotchToolbarDelegate\n```\n3. Add delegate methods\n```\n//A protocol method that's triggered when the device rotates.\nfunc deviceDidRotate() {\n}\n\n//A protocol method that's triggered when an icon is selected.\nfunc didTapToolIcon(_ tools: UICollectionView, toolIndex: IndexPath, section: Int, row: Int) {\n}\n```\n4. Create a [`NotchToolbar`](https://github.com/AFathi/NotchToolkit/wiki/NotchToolbar) global variable\n```\nlet toolbar = NotchToolbar()\n```\n5. Configure and initialize `toolbar` in `viewDidLoad`\n```\ntoolbar.notch.isVisible = true\n\ntoolbar.notch.height = 250\n\ntoolbar.toolList = [\n//[icon image, title]\n[UIImage(named:\"pikachusquare\")!, \"Pikachu\"],\n//only image icons\nUIImage(named:\"spongebob\")!,\n//only string icons (mainly for emojis 😉)\n\"🤔\", \"🤓\",\n\"📱\", \"👩‍💻\",\n\"👨‍💻\", \"✅\", \"🔥\"]\n\ntoolbar.delegate = self\ntoolbar.initializeToolbar(self)\n```\n6. Call [`autoResize()`](https://github.com/AFathi/NotchToolkit/wiki/NotchToolbar#func-autoresize) method in the [`deviceDidRotate`](https://github.com/AFathi/NotchToolkit/wiki/NotchToolbarDelegate#func-devicedidrotate) delegate method\n```\nfunc deviceDidRotate() {\ntoolbar.autoResize()\n}\n```\n**You're all set! 🤓**\n## Show and Hide `toolbar`\n### [showOrHide()](https://github.com/AFathi/NotchToolkit/wiki/NotchToolbar#func-showorhide)\nThis method allows you to show and hide the `NotchToolbar`. You can call this method in an `IBAction` that handles showing/hiding the toolbar.\n```\n@IBAction func buttonClicked(_ sender: UIButton) {\ntoolbar.showOrHide()\n}\n```\n## Handle Icon Selection\n1. Make sure you set the [`NotchToolbar`](https://github.com/AFathi/NotchToolkit/wiki/NotchToolbar) delegate to `self`.\n2. Handle the icon selection in the [`didTapToolIcon`](https://github.com/AFathi/NotchToolkit/wiki/NotchToolbarDelegate#func-didtaptoolicon_-tools-uicollectionview-toolindexindexpath-section-int-row-int) delegate method:\n```\nfunc didTapToolIcon(_ tools: UICollectionView, toolIndex: IndexPath, section: Int, row: Int) {\nif row == 0 {\nprint(\"first icon\")\n}else if row == 1 {\nprint(\"second icon\")\n}\n}\n```\n## More Options\nThis framework include a `UIView` extension that allow you draw a notch bezier path to any `UIView` class or subclass.\n### draw(_ notch:curveType, position:curvePosition, curve:CGFloat?, customBounds:CGRect? = nil)\nThis is a UIView extension that allows you add ovals and rounded corners to any UIView.\n\n- For type `oval`, set `curve` scale from 1.0 - 10.0.\n- For type `corner`, `curve` is the radius size.\n- Check `curveType` \u0026 `curvePosition` for more info.\n### Example\n```\n//horizontalSides draws an oval-based bezier path vertically on the right \u0026 left sides of a view.\nmyView.draw(.oval, position: .horizontalSides, curve: 1.5)\n\n//diagonalAC draws rounded rectangle corners diagonally from topLeft to bottomRight of a view.\nmyView.draw(.corner, position: .diagonalAC, curve: 35)\n\n```\n### Preview\n![Demo](drawNotch.gif)\n\n## LICENSE\n`NotchToolkit` is under MIT license. Check the [LICENSE](LICENSE) file for more details.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAFathi%2FNotchToolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FAFathi%2FNotchToolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FAFathi%2FNotchToolkit/lists"}