Navigation Drawer
概述
Navigation Drawer是一个用swift编写的简化滑动菜单控件。查看项目示例以查看其工作情况!
预览示例
BaseViewController | SlideViewController |
---|---|
按钮点击 | 按钮点击 |
![]() |
![]() |
手势 | 手势 |
![]() |
![]() |
要求
- Xcode 9.
- iOS 9或更高版本。
安装
CocoaPods
CocoaPods 是 Cocoa 项目的依赖管理器。您可以使用以下命令安装它
pod 'NavigationDrawer'
然后,运行以下命令
$ pod install
使用方法
在 Storyboard 中准备相关事项
-
创建一个 BaseViewController 并在上面添加导航控制器。在视图中设置栏按钮项目。将这个 UIViewController 绑定到
BaseViewController.swift
上 -
创建一个 SlidingViewController 并从
BaseViewController
的栏按钮项目添加 动作转场(类型:以模态方式呈现,标识符:showSlidingMenu)到SlidingViewController
上。(PS. 标识符名称可以随便,只需在 swift 代码中匹配它们即可。) -
在 SlidingViewCotroller 中,添加一个关闭按钮,并设置视图约束。
topConstrain - As View's Top Constrain
trailingConstrain - As View's Trailing Constrain
bottomConstrain - As View's Bottom Constrain
widthConstrain - As View's width Constrain with a multipler of 0.2
一些 Swift 代码(最有乐趣的部分)
- 在
BaseViewController.swift
中,导入 NavigationDrawer。在BaseViewController
中创建一个 Interactor 对象,并添加两个界面事件方法homeButtonPressed(_ sender: UIBarButtonItem)
和edgePanGesture(sender: UIScreenEdgePanGestureRecognizer)
class ViewController: UIViewController {
//1.
let interactor = Interactor()
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
//2.
@IBAction func homeButtonPressed(_ sender: UIBarButtonItem) {
performSegue(withIdentifier: "showSlidingMenu", sender: nil)
}
//3. Add a Pan Gesture to slide the menu from Certain Direction
@IBAction func edgePanGesture(sender: UIScreenEdgePanGestureRecognizer) {
let translation = sender.translation(in: view)
let progress = MenuHelper.calculateProgress(translationInView: translation, viewBounds: view.bounds, direction: .Right)
MenuHelper.mapGestureStateToInteractor(
gestureState: sender.state,
progress: progress,
interactor: interactor){
self.performSegue(withIdentifier: "showSlidingMenu", sender: nil)
}
}
//4. Prepare for segue
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
if let destinationViewController = segue.destination as? SlidingViewController {
destinationViewController.transitioningDelegate = self
destinationViewController.interactor = self.interactor
}
}
}
- 在 BaseViewController 中扩展
UIViewControllerTransitioningDelegate
并添加以下函数。
extension ViewController: UIViewControllerTransitioningDelegate {
func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return PresentMenuAnimator()
}
func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning? {
return DismissMenuAnimator()
}
func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
return interactor.hasStarted ? interactor : nil
}
func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning? {
return interactor.hasStarted ? interactor : nil
}
}
- 创建一个
SlidingView.swift
,并添加一个变量用于从BaseViewController
传递 Interactor。 [导入 NavigationDrawer]
class SlidingViewController: UIViewController{
var interactor:Interactor? = nil
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.
}
//Handle Gesture
@IBAction func handleGesture(sender: UIPanGestureRecognizer) {
let translation = sender.translation(in: view)
let progress = MenuHelper.calculateProgress(translationInView: translation, viewBounds: view.bounds, direction: .Left)
MenuHelper.mapGestureStateToInteractor(
gestureState: sender.state,
progress: progress,
interactor: interactor){
self.dismiss(animated: true, completion: nil)
}
}
@IBAction func closeBtnPressed(_ sender: Any) {
dismiss(animated: true, completion: nil)
}
}
返回Storyboard
现在将 @IBAction
与 Storyboard 连接。
鸣谢:[点击查看原文](https://www.thorntech.com/2016/03/ios-tutorial-make-interactive-slide-menu-swift/)
许可证
MIT
自由软件,太棒了!