首页 >产品设计

导航栏的平滑显示和隐藏 - 个人页的自我修养(1)

2017-03-16 05:39 编辑: suiling 分类:产品设计 来源:日光镇

作者:日光镇 原文

本文是《个人页的自我修养》系列文章的一篇,全部:

  • 导航栏的平滑显示和隐藏 - 个人页的自我修养(1) (本篇)

  • 多个UITableView共用一个tableHeader的效果实现 - 个人页的自我修养(2)(待补坑)

  • 处理Pan手势和ScrollView滚动冲突 - 个人页的自我修养(3)(待补坑)

关于“个人页”

带有社交属性的APP一般都会有一个“个人页”,用以展示某个用户的个人信息和发布的内容。以下是几个例子:

191734-59cd1fde949ec751.png

个人页例子.png

以上页面的共同特征是:

1、透明的导航栏以更好的展示背景图

2、可按标签切换到不同的内容页(这个特性看需求,不一定有)

3、滚动时会停靠在页面顶部的SegmentView

3、各个可滚动的内容页共用一个header

最近刚好写到Rabo微博客户端的个人页的部分,发现踩到几个有意思的坑,解决下来决定写个系列文章把相关解决方法和代码分享一下。

先看一下要实现的整体效果:

191734-d56354b743025ebb.gif

overView.gif

这篇文章先处理导航栏的平滑隐藏和显示。

导航栏的平滑显示和隐藏

1、现有解决方案

先看一下手机QQ,是我目前能找到的处理得算比较好的导航栏返回效果。导航栏有跟随返回手势透明度渐变的动画。

191734-bd30b6ad1188f977.gif

QQ返回.gif

但导航栏的返回交互动画是自定义的,没有系统自带的视差效果和毛玻璃效果,而且中断返回操作的话导航栏会闪一下,影响观感。

33.gif

QQ取消返回.gif

再看一下其他3家的处理方式,他们的处理方法基本一致,都是在进入个人页时隐藏了系统导航栏,然后添加一个自定义的导航栏,所以过度会比较生硬,与整体的返回效果有断层。

0.gif

微博.gif

01.gif

百度贴吧.gif

02.gif

Twitter.gif

好,看完以上的例子,轮到我们来实现啦。我们今天的目标是不自定义导航栏,在系统自带导航栏的基础上进行非侵入(代码解耦)的实现。先看效果:

191734-d7f10b15fc2edd39.gif

navDemo.gif

你可以在这里下载本篇文章的代码:https://github.com/EnderTan/ETNavBarTransparent

2、记录某个VC的导航栏透明度

对于同一个NavigationController上的ViewController,NavigationBar是全局的,并不能单独设置某个ViewController的导航栏样式和属性。所以我们先给ViewController用扩展添加一个记录导航栏透明度的属性:

//ET_NavBarTransparent.swift

extension UIViewController {

      fileprivate struct AssociatedKeys {
           static var navBarBgAlpha: CGFloat = 1.0
      }

      var navBarBgAlpha: CGFloat {
          get {
              let alpha = objc_getAssociatedObject(self, &AssociatedKeys.navBarBgAlpha) as? CGFloat
              if alpha == nil {
                //默认透明度为1
                  return 1.0
              }else{
                  return alpha!
              }

          }
          set {
              var alpha = newValue
              if alpha > 1 {
                  alpha = 1
              }
              if alpha < 0 {
                  alpha = 0
              }

              objc_setAssociatedObject(self, &AssociatedKeys.navBarBgAlpha, alpha, .OBJC_ASSOCIATION_RETAIN_NONATOMIC)

              //设置导航栏透明度
              navigationController?.setNeedsNavigationBackground(alpha: alpha)
          }
      }
}

好的,现在可以根据需要随时记录下某个VC的导航栏透明度了,而不会因为push到下个页面而丢失了这个信息。

3、设置导航栏背景的透明度

要实现上面demo的效果,我们不能修改整个导航栏的透明度,因为导航栏上的NavigationBarItem是需要保留下来的,如果设置整个导航栏的透明度,左右的Item和标题栏都会跟着一起透明了。

191734-5e0a795ce57f7f95.png

navItem.png

然而,系统API并没有访问背景View的接口,只好动用下黑魔法了。先看一下导航栏的层级:

191734-b48a493447cf71d2.png

navlevel.png

首先想到调整第一层_barBackgroundView(_UIBarBackground)的透明度,但试了一下,调整这一层级会丢失毛玻璃效果,效果很突兀:

1.gif

bgAlphaErr.gif

经过测试,调整_backgroundEffectView(-UIVisualEffectView)不会丢失毛玻璃效果:

191734-b053b98d66157d36.gif

bgAlphaRight.gif

下面是调整导航栏背景透明度的相关代码:

//ET_NavBarTransparent.swift

extension UINavigationController {
    //Some other code
    fileprivate func setNeedsNavigationBackground(alpha:CGFloat) {
        let barBackgroundView = navigationBar.value(forKey: "_barBackgroundView") as AnyObject
        let backgroundImageView = barBackgroundView.value(forKey: "_backgroundImageView") as? UIImageView
        if navigationBar.isTranslucent {
            if backgroundImageView != nil && backgroundImageView!.image != nil {
                (barBackgroundView as! UIView).alpha = alpha
            }else{
                if let backgroundEffectView = barBackgroundView.value(forKey: "_backgroundEffectView") as? UIView {
                    backgroundEffectView.alpha = alpha
                }
            }
        }else{
            (barBackgroundView as! UIView).alpha = alpha
        }

        if let shadowView = barBackgroundView.value(forKey: "_shadowView") as? UIView {
            shadowView.alpha = alpha
        }

    }
}

到这里,我们只要给viewController的扩展属性navBarBgAlpha赋值,就可以随意设置导航栏的透明度了。

4、监控返回手势的进度

在手势返回的交互中,如果前后两个VC的导航栏透明度不一样,需要根据手势的进度实时调节透明度。

这里method swizzling一下,用UINavigationController的"_updateInteractiveTransition:"方法监控返回交互动画的进度。

//ET_NavBarTransparent.swift

extension UINavigationController {

    //Some other code

    open override class func initialize(){

        if self == UINavigationController.self {
            let originalSelectorArr = ["_updateInteractiveTransition:"]
            //method swizzling
            for ori in originalSelectorArr {
                let originalSelector = NSSelectorFromString(ori)
                let swizzledSelector = NSSelectorFromString("et_\(ori)")
                let originalMethod = class_getInstanceMethod(self.classForCoder(), originalSelector)
                let swizzledMethod = class_getInstanceMethod(self.classForCoder(), swizzledSelector)
                method_exchangeImplementations(originalMethod, swizzledMethod)
            }
        }
    }


    func et__updateInteractiveTransition(_ percentComplete: CGFloat) {
        et__updateInteractiveTransition(percentComplete)
        let topVC = self.topViewController
        if topVC != nil {
            //transitionCoordinator带有两个VC的转场上下文
            let coor = topVC?.transitionCoordinator
            if coor != nil {
                //fromVC 的导航栏透明度
                let fromAlpha = coor?.viewController(forKey: .from)?.navBarBgAlpha
                //toVC 的导航栏透明度
                let toAlpha = coor?.viewController(forKey: .to)?.navBarBgAlpha
                //计算当前的导航栏透明度
                let nowAlpha = fromAlpha! + (toAlpha!-fromAlpha!)*percentComplete
                //设置导航栏透明度
                self.setNeedsNavigationBackground(alpha: nowAlpha)
            }
        }
    }
}

看一下到这一步的效果:

191734-4d9c2c48b6e480f8.gif

releaseFinger.gif

在手势交互的过程中,透明度的变化跟预期一样跟随手势变化。但一旦松手,系统会自动完成或取消返回操作,在这一过程中,以上的方法并没有调用,而导致透明度停留在最后的那个状态。

我们需要在UINavigationControllerDelegate中添加边缘返回手势松手时的监控,还有要处理一下直接点击返回按钮和正常Push到新界面时的情况:

//ET_NavBarTransparent.swift

extension UINavigationController:UINavigationControllerDelegate,UINavigationBarDelegate {

    public func navigationController(_ navigationController: UINavigationController, willShow viewController: UIViewController, animated: Bool) {
        let topVC = navigationController.topViewController
        if topVC != nil {
            let coor = topVC?.transitionCoordinator
            if coor != nil {
                //添加对返回交互的监控
                if #available(iOS 10.0, *) {
                    coor?.notifyWhenInteractionChanges({ (context) in
                    self.dealInteractionChanges(context)
                    })
                } else {
                    coor?.notifyWhenInteractionEnds({ (context) in
                        self.dealInteractionChanges(context)
                    })

                } 

            }

        }
    }

    //处理返回手势中断对情况
        private func dealInteractionChanges(_ context:UIViewControllerTransitionCoordinatorContext) {
        if context.isCancelled {
            //自动取消了返回手势
            let cancellDuration:TimeInterval = context.transitionDuration * Double( context.percentComplete)
            UIView.animate(withDuration: cancellDuration, animations: {

                let nowAlpha = (context.viewController(forKey: .from)?.navBarBgAlpha)!
                self.setNeedsNavigationBackground(alpha: nowAlpha)

                self.navigationBar.tintColor = context.viewController(forKey: .from)?.navBarTintColor
            })
        }else{
            //自动完成了返回手势
            let finishDuration:TimeInterval = context.transitionDuration * Double(1 - context.percentComplete)
            UIView.animate(withDuration: finishDuration, animations: {
                let nowAlpha = (context.viewController(forKey: .to)?.navBarBgAlpha)!
                self.setNeedsNavigationBackground(alpha: nowAlpha)

                self.navigationBar.tintColor = context.viewController(forKey: .to)?.navBarTintColor
            })
        }
    }

    public func navigationBar(_ navigationBar: UINavigationBar, shouldPop item: UINavigationItem) -> Bool {
        if viewControllers.count >= (navigationBar.items?.count)! {
            //点击返回按钮
            let popToVC = viewControllers[viewControllers.count-2]
            setNeedsNavigationBackground(alpha: (popToVC.navBarBgAlpha))
            navigationBar.tintColor = popToVC.navBarTintColor

            _ = self.popViewController(animated: true)
        }

        return true
    }

    public func navigationBar(_ navigationBar: UINavigationBar, shouldPush item: UINavigationItem) -> Bool {
        //push到一个新界面
        setNeedsNavigationBackground(alpha: (topViewController?.navBarBgAlpha)!)
        navigationBar.tintColor = topViewController?.navBarTintColor
        return true
    }

}

好的,到这里,对返回和push操作的处理已经完成。

191734-e89feac1db77267e.gif

releaseFingerRight.gif

5、使用

只需要在隐藏导航栏背景的viewController上把navBarBgAlpha设为0(或其他你需要的值)就可以了:

    override func viewDidLoad() {
        super.viewDidLoad()
        self.navBarBgAlpha = 0
        //other code
    }

然后在比如tableView滚动到某个位置,需要显示导航栏时,把navBarBgAlpha设为1(或其他你需要的值)。

6、其他

要达到平滑的转场效果,还需要对navigationBar的tintColor进行类似的操作,这部分就留给大家自己看一下源码的相关部分啦。

还有一些细节,比如状态栏颜色变化的时机,“preferredStatusBarStyle:”的调用链等,也交给大家去发现和思考了。

搜索CocoaChina微信公众号:CocoaChina
微信扫一扫
订阅每日移动开发及APP推广热点资讯
公众号:
CocoaChina
我要投稿   收藏文章
上一篇:移动导航设计,看这一篇就够了
下一篇:APP设计:那些打动人心的设计点
我来说两句
发表评论
您还没有登录!请登录注册
所有评论(0

综合评论

相关帖子

sina weixin mail 回到顶部