UINavigationController就一本书一样,而UIViewController就是它的每一页,我们可以一页一页的翻,也可以瞬间跳到某一页,或者回归的过去的某一页。
构成
我们首先要有一个rootViewController,装进UINavigationController。
例如在AppDelegate的didFinishLaunchingWithOptions中
let navVC = UINavigationController(rootViewController: ViewController())
window?.rootViewController = navVC
window?.backgroundColor = UIColor.gray
window?.makeKeyAndVisible()
用ViewController()
创建一个UIViewController来初始化UINavigationController
, 这样ViewController()
作为导航栏的第一页显示出来。
UINavigationController
的组成, 引用一下官网的
UI元素除了UIViewController的数组外,还有navigationBar,toolbar。
接下里我们丰富一下,将其UI元素全部用上。
在ViewController
的viewDidLoad中加入代码
// 显示toolbar
self.navigationController?.isToolbarHidden = false
self.setToolbarItems([UIBarButtonItem(barButtonSystemItem: .camera, target: nil, action: nil), UIBarButtonItem(barButtonSystemItem: .bookmarks, target: nil, action: nil)], animated: false)
// 设置navigationBar的title
self.title = "root view"
// 设置navigationBar按钮
self.navigationItem.setLeftBarButton(UIBarButtonItem(barButtonSystemItem: .add, target: nil, action: nil), animated: false)
self.navigationItem.setRightBarButton(UIBarButtonItem(barButtonSystemItem: .done, target: nil, action: nil), animated: false)
注意:toolbar的items的设置,是与UIViewController关联的,不要UINavigationController上setItems是不会显示的
跳转
Push
push就是将VC一个一个叠上去,默认行为是从右侧进入
self.navigationItem.setRightBarButton(UIBarButtonItem(barButtonSystemItem: .done, target: self, action: #selector(self.pushAction(sender:))), animated: false)
func pushAction(sender:UIBarButtonItem) {
self.navigationController?.pushViewController(ViewController2(), animated: true)
}
我们将done
按钮加入push动作, 点击done,从右到左进入,这时候系统会添加一个navigationBar item,用于pop到下层页面,title就是下层页面设置的title
push对应的返回接口是pop
self.navigationController?.popViewController(animated: true)
Present
说道跳转,这里也提一下present
,present
跳到另外一个页面,默认行为是从下而上,除了表现上与push不一样
- 不是UINavigationController的管理范畴,UIViewController可直接
present
到其他页面 - 同一个
UIViewController
不可以present
两次,但present起来的vc是可以再次present
的 -
present
类似模态窗口,在这个窗口dissmiss
前,交互只能在这个窗口做,之前的页面不可交互和变化, 就仿佛你放下一本书,就拿起另外一本书,不能同时看两本书
present对应的消失接口是dissmiss
self.dismiss(animated: true, completion: nil)
Show
8.0以后提供了show方法,这个是根据viewController所处容器,使用容器的跳转行为,例如viewController所处容器为navigationController(viewController的容器还有splitViewController),就和push一样
open func show(_ vc: UIViewController, sender: Any?)
自定义跳转方式(转场动画)
自定义转场动画,需要制定两个因素
- 从哪个viewController跳转到哪个viewController
- 动画内容
自定义 Present
我们尝试改写present
的动画效果,它默认是由下而上,改成自上而下
func pushAction(sender:UIBarButtonItem) {
let vc = ViewController2()
vc.transitioningDelegate = self // 实现UIViewControllerTransitioningDelegate协议
self.present(vc, animated: true, completion: nil)
}
实现UIViewControllerTransitioningDelegate
协议, 下面就是用来实现,present和dismiss动画的
@available(iOS 2.0, *)
optional public func animationController(forPresented presented: UIViewController, presenting: UIViewController, source: UIViewController) -> UIViewControllerAnimatedTransitioning?
@available(iOS 2.0, *)
optional public func animationController(forDismissed dismissed: UIViewController) -> UIViewControllerAnimatedTransitioning?
这两个接口需要返回id<UIViewControllerAnimatedTransitioning>
UIViewControllerAnimatedTransitioning
// 转场时间
public func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval
// 动画
public func animateTransition(using transitionContext: UIViewControllerContextTransitioning)
接下来需要创建一个id<UIViewControllerAnimatedTransitioning>
的类,
class PresentAnimator: NSObject, UIViewControllerAnimatedTransitioning {
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 1
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
let fromViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)
let toViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)
let containerView = transitionContext.containerView
// 将跳转后的页面,设置到屏幕上方
toViewController?.view.frame = (fromViewController?.view.frame)!
toViewController?.view.frame.origin.y -= (toViewController?.view.frame.height)!
// 添加到转场动画容器上,
containerView.addSubview((toViewController?.view)!)
UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: { () -> Void in
// 回归的屏幕位置
toViewController?.view.frame = (fromViewController?.view.frame)!
}, completion: { (complete:Bool) -> Void in
transitionContext.completeTransition(true)
})
}
}
经过我打印地址研究,得出以下结论
- containerView是做动画用的容器, 初始状态是将跳转前页面(较为顶层的一个view,如果vc在navigationController中就是naviController的view)添加为自己的subview
- fromViewController不是跳转前vc, 只是将跳转前页面添加为自己的subview,用来做旧页面的退出动画
- toViewController则是跳转后vc,做新页面的登台动画
- transitionDuration时间是提供给系统的,提供跳转时系统的默认表现,自定义animate的时间最好和其保持一致
- containerView临时产生,在动画结束后,从UI上撤掉,但view的改变会遗留下来
注意:transitionContext.completeTransition(true)
是必须要调用的,否则系统认为转场为完成,第二页不能进行任何交互
自定义 Dismiss
dismiss 与 present 类似,只是fromViewController变成了第二页,toViewController变成了第一页, 记住上述的那几条结论来理解containerView.addSubview
class DismissAnimator: NSObject, UIViewControllerAnimatedTransitioning {
func transitionDuration(using transitionContext: UIViewControllerContextTransitioning?) -> TimeInterval {
return 2
}
func animateTransition(using transitionContext: UIViewControllerContextTransitioning) {
let fromViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.from)
let toViewController = transitionContext.viewController(forKey: UITransitionContextViewControllerKey.to)
let containerView = transitionContext.containerView
containerView.addSubview((toViewController?.view)!)
containerView.addSubview((fromViewController?.view)!)
UIView.animate(withDuration: transitionDuration(using: transitionContext), animations: { () -> Void in
fromViewController?.view.alpha = 0.0
}, completion: { (complete:Bool) -> Void in
transitionContext.completeTransition(true)
})
}
}
自定义 Push
只是挂接delegate的位置不同
// 自定义navigationController动画
self.navigationController?.delegate = self
实现同样和上面一样,返回id<UIViewControllerAnimatedTransitioning>
, 为了简单,我们做之前present
和dismiss
一样的动画
func navigationController(_ navigationController: UINavigationController, animationControllerFor operation: UINavigationControllerOperation, from fromVC: UIViewController, to toVC: UIViewController) -> UIViewControllerAnimatedTransitioning? {
if operation == .push {
return PresentAnimator();
} else {
return DismissAnimator();
}
}
交互式动画
最后在说一个present
的交互动画
交互式动画就随手势做的动画,手拖的距离,来决定动画执行的进度
需要再实现UIViewControllerTransitioningDelegate
协议中的交互式接口,要求返回一个id<UIViewControllerInteractiveTransitioning>
optional public func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
optional public func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
这个交互式动画,依赖于之前设置的动画方式,只是用来设置百分比,这个百分比需要你自己不断提供给他,一般用手势来不断调用id<UIViewControllerInteractiveTransitioning>
的update接口,我们为了简单,用timer来模拟
创建一个id<UIViewControllerInteractiveTransitioning>
class InteractiveAnimator: UIPercentDrivenInteractiveTransition {
}
viewController中加入属性
var interactiveAnimator:InteractiveAnimator = InteractiveAnimator()
var timer:Timer? = nil
var times:CGFloat = 0;
修改接口
func interactionControllerForPresentation(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
{
timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(self.timeUpdate), userInfo: nil, repeats: true);
return interactiveAnimator
}
func interactionControllerForDismissal(using animator: UIViewControllerAnimatedTransitioning) -> UIViewControllerInteractiveTransitioning?
{
timer = Timer.scheduledTimer(timeInterval: 1, target: self, selector: #selector(self.timeUpdate), userInfo: nil, repeats: true);
return interactiveAnimator
}
func timeUpdate() {
times += 1
if times <= 5 {
let per:CGFloat = times/5
interactiveAnimator.update(per)
} else {
timer?.invalidate()
interactiveAnimator.finish()
}
}
timeUpdate的会该5次百分比,这个动画也分5下完成, 每秒变化一次。timeUpdate这是里timer来调用的,你可以用任意的交互方式来调用,百分比自己来计算
demo 地址 记得 pod install