UINavigationBar基础的使用总结

FrQi3.png

• 设置导航栏字体属性
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool设置导航栏标题的文字属性:

        let nav = UINavigationBar.appearance()
        
        let shadow = NSShadow()
        shadow.shadowOffset = CGSize(width: 0, height: 0)
        let attributes = [NSForegroundColorAttributeName: UIColor.white,
                          NSFontAttributeName: UIFont.systemFont(ofSize: 16),
                          NSShadowAttributeName: shadow]
        nav.titleTextAttributes = attributes

• 设置导航栏的背景色

 self.navigationController?.navigationBar.barTintColor = UIColor.red

屏幕快照 2017-08-18 上午10.35.00.png

• 设置导航栏背景图片

self.navigationController?.navigationBar.setBackgroundImage(UIImage(named: "personalBackgroundImage"), for: .default)

屏幕快照 2017-08-18 上午10.44.26.png

• 修改顶部状态栏的颜色

  效果图看, 设置背景色或者背景图之后, 状态栏依然是默认的黑色, 系统提供给了UIStatusBarStyleDefault和UIStatusBarStyleLightContent两种样式可供选择.

  (1)UIStatusBarStyleDefaul, 系统默认样式, 黑色内容用于浅色背景如黑色

  (2) UIStatusBarStyleLightContent, 白色内容, 用于系统深色背景.

  设置状态栏透明:

  (1)设置plist
  

  plist
  (2)在viewDidLoad中设置self.setNeedsStatusBarAppearanceUpdate()

  (3)添加代码:

  override var preferredStatusBarStyle: UIStatusBarStyle {
      return .lightContent
  }
  

  这段代码可能没有效果, 如果你的viewController在UINavigationController, 你需要在UINavigationController添加下面的代码:
  override var preferredStatusBarStyle: UIStatusBarStyle { return .lightContent }

  最终效果如图:

  
  屏幕快照 2017-08-18 上午11.09.30.png
  

  通过以上设置后, 同一个navigation里面的viewController的statusbar的颜色是一样的要想每一个viewController里面的都不一样, 我们可以在自定义的navigationController里面重写下面方法:

  • 1

  override var preferredStatusBarStyle: UIStatusBarStyle {
      let topVC = self.topViewController
      return (topVC?.preferredStatusBarStyle)!
  }
  

  • 2 在改变状态栏的viewController里面重写这个方法

  override var preferredStatusBarStyle: UIStatusBarStyle {
      return .lightContent
  }
  

• 设置返回按钮的图标及字体的颜色

  self.navigationController?.navigationBar.tintColor = UIColor.white

  屏幕快照 2017-08-18 上午11.20.47.png
  然而实际开发中返回按钮往往是我们自定义的所以我们会重写UINavigationController的func pushViewController(_ viewController: UIViewController, animated: Bool)如下:

  override func pushViewController(_ viewController: UIViewController, animated: Bool) {
      if self.childViewControllers.count > 0 {
          let backBtn = UIButton()
          backBtn.setImage(UIImage(named: "back_white"), for: .normal)
          backBtn.sizeToFit()
          backBtn.addTarget(self, action: #selector(back), for: .touchUpInside)
          viewController.navigationItem.leftBarButtonItem = UIBarButtonItem(customView: backBtn)
          viewController.hidesBottomBarWhenPushed = true
      }
      super.pushViewController(viewController, animated: true)
  }
  

  屏幕快照 2017-08-18 上午11.24.07.png

• 设置导航栏底部的线条

  //隐藏掉底部线条
  self.navigationController?.navigationBar.setBackgroundImage(UIImage(named: "personalBackgroundImage"), for: .any, barMetrics: .default)
  self.navigationController?.navigationBar.shadowImage = UIImage()
  

  也可以通过扩展的方式隐藏掉底部线:

extension UINavigationBar {
    func hideBottomHairline() {
        self.hairlineImageView?.isHidden = true
    }
    func showBottomHairline() {
        self.hairlineImageView?.isHidden = false
    }
}
extension UIView {
    fileprivate var hairlineImageView: UIImageView? {
        return hairlineImageView(in: self)
    }
    fileprivate func hairlineImageView(in view: UIView) -> UIImageView? {
        if let imageView = view as? UIImageView, imageView.bounds.height <= 1.0 {
            return imageView
        }
        
        for subview in view.subviews {
            if let imageView = self.hairlineImageView(in: subview) { return imageView }
        }
        
        return nil
    }
}