关于 navigationItem.titleView 滑动缩放的坑

最近在仿写 Instagram,它的 Timeline 控制器中, tableView滚动过程中navigationItem.titleView会相应缩放,效果如下:

ScrollingScaleNavTitleView.gif

错误做法:

一开始我是在scrollViewDidScroll(_:)方法中用transform直接对navigationItem.titleView 进行缩放:

override func scrollViewDidScroll(scrollView: UIScrollView) {
  let factor = offsetY / 20
          if factor < 1 && factor > 0 {
              navigationItem.titleView?.transform =   CGAffineTransformMakeScale(1 - factor, 1 - factor)
              rightItemIconView!.transform = CGAffineTransformMakeScale(1 - factor, 1 - factor)
              navigationItem.titleView!.alpha = 1 - factor
              navigationItem.rightBarButtonItem?.customView?.alpha = 1 - factor
          } else if factor <= 0 {
            navigationItem.titleView?.transform = CGAffineTransformIdentity
            navigationItem.titleView!.alpha = 1
            rightItemIconView!.transform = CGAffineTransformIdentity
            navigationItem.rightBarButtonItem?.customView?.alpha = 1

        } else {
            navigationItem.titleView?.transform = CGAffineTransformIdentity
            navigationItem.titleView!.alpha = 0
            rightItemIconView!.transform = CGAffineTransformIdentity
            navigationItem.rightBarButtonItem?.customView?.alpha = 0
        }

        // 下面用到的 tableViewOriginHeight 是 NavBar 的 frame 还没发生变化之前 tableView 的高度
        if offsetY >= 0 && offsetY <= UIConstant.UI_NAV_BAR_HEIGHT {
            navigationController?.navigationBar.frame.origin.y = UIConstant.UI_STATUSBAR_HEIGHT - offsetY
            tableView.frame.origin.y = UIConstant.UI_NAV_BAR_HEIGHT + UIConstant.UI_STATUSBAR_HEIGHT - offsetY
            tableView.frame.size.height = tableViewOriginHeight + offsetY
        } else if offsetY > UIConstant.UI_NAV_BAR_HEIGHT {
            navigationController?.navigationBar.frame.origin.y = UIConstant.UI_STATUSBAR_HEIGHT - UIConstant.UI_NAV_BAR_HEIGHT
            tableView.frame.origin.y = UIConstant.UI_STATUSBAR_HEIGHT
            tableView.frame.size.height = tableViewOriginHeight + UIConstant.UI_NAV_BAR_HEIGHT + UIConstant.UI_STATUSBAR_HEIGHT
        } else {
            navigationController?.navigationBar.frame.origin.y = UIConstant.UI_STATUSBAR_HEIGHT
            tableView.frame.origin.y = UIConstant.UI_NAV_BAR_HEIGHT + UIConstant.UI_STATUSBAR_HEIGHT
            tableView.frame.size.height = tableViewOriginHeight
        }

}

得到的结果是:

titleView 在缩放之后,没有回复到原来的尺寸,楼主到现在还布吉岛什么原因,有看到这里的大神请指点下,万分感激

NavTitleViewScaleWrong.gif

解决办法

  • 把你要缩放的scaleView,用一个普通的UIView装着,作为一个 container,然后把这个 container 设置为 navigationItem.titleView
func setupTitleView() {
        let titleView = UIView(frame: CGRectMake(0, 0, 100, 40))
        titleImageView = UIImageView(image: FLIconKit.imageOfNavTitleBgImg(size: titleView.frame.size))
        titleImageView!.clipsToBounds = true
        titleImageView!.frame = titleView.bounds
        titleView.addSubview(titleImageView!)
        titleView.backgroundColor = UIColor.blackColor()
        navigationItem.titleView = titleView
    }

  • scrollViewDidScroll(_:)方法中用transformscaleView 进行缩放:
override func scrollViewDidScroll(scrollView: UIScrollView) {
        let offsetY = scrollView.contentOffset.y
        let factor = offsetY / 20
        if factor < 1 && factor > 0 {
            titleImageView!.transform = CGAffineTransformMakeScale(1 - factor, 1 - factor)
            rightItemIconView!.transform = CGAffineTransformMakeScale(1 - factor, 1 - factor)
            navigationItem.titleView!.alpha = 1 - factor
            navigationItem.rightBarButtonItem?.customView?.alpha = 1 - factor
        } else if factor <= 0 {
            titleImageView!.transform = CGAffineTransformIdentity
            navigationItem.titleView!.alpha = 1
            rightItemIconView!.transform = CGAffineTransformIdentity
            navigationItem.rightBarButtonItem?.customView?.alpha = 1

        } else {
            titleImageView!.transform = CGAffineTransformIdentity
            navigationItem.titleView!.alpha = 0
            rightItemIconView!.transform = CGAffineTransformIdentity
            navigationItem.rightBarButtonItem?.customView?.alpha = 0
        }
        // 下面用到的 tableViewOriginHeight 是 NavBar 的 frame 还没发生变化之前 tableView 的高度
        if offsetY >= 0 && offsetY <= UIConstant.UI_NAV_BAR_HEIGHT {
            navigationController?.navigationBar.frame.origin.y = UIConstant.UI_STATUSBAR_HEIGHT - offsetY
            tableView.frame.origin.y = UIConstant.UI_NAV_BAR_HEIGHT + UIConstant.UI_STATUSBAR_HEIGHT - offsetY
            tableView.frame.size.height = tableViewOriginHeight + offsetY
        } else if offsetY > UIConstant.UI_NAV_BAR_HEIGHT {
            navigationController?.navigationBar.frame.origin.y = UIConstant.UI_STATUSBAR_HEIGHT - UIConstant.UI_NAV_BAR_HEIGHT
            tableView.frame.origin.y = UIConstant.UI_STATUSBAR_HEIGHT
            tableView.frame.size.height = tableViewOriginHeight + UIConstant.UI_NAV_BAR_HEIGHT + UIConstant.UI_STATUSBAR_HEIGHT
        } else {
            navigationController?.navigationBar.frame.origin.y = UIConstant.UI_STATUSBAR_HEIGHT
            tableView.frame.origin.y = UIConstant.UI_NAV_BAR_HEIGHT + UIConstant.UI_STATUSBAR_HEIGHT
            tableView.frame.size.height = tableViewOriginHeight
        }
        
    }

最后感谢您的阅读,笔者是 iOS 开发新人(苦逼自学中...),有错误的地方请大家指出,共同进步。

你可能感兴趣的:(关于 navigationItem.titleView 滑动缩放的坑)