ios导航栏-UINavigationController使用与分析

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

说道跳转,这里也提一下presentpresent跳到另外一个页面,默认行为是从下而上,除了表现上与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>, 为了简单,我们做之前presentdismiss一样的动画

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 212,542评论 6 493
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 90,596评论 3 385
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 158,021评论 0 348
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 56,682评论 1 284
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 65,792评论 6 386
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,985评论 1 291
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,107评论 3 410
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,845评论 0 268
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,299评论 1 303
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,612评论 2 327
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,747评论 1 341
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 34,441评论 4 333
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,072评论 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,828评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,069评论 1 267
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 46,545评论 2 362
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 43,658评论 2 350

推荐阅读更多精彩内容