自定义导航栏几乎在开发每个app中都会使用到UINavigationController，然而几乎没人喜欢系统自带的样式

几乎在开发每个app中都会使用到UINavigationController，然而几乎没人喜欢系统自带的样式，自定义一些navigation bar的样式，也变得重要了。本文会从以下几个方面来说明如和自定义navigation bar的样式。

设置背景
设置标题
设置左边或者右边的按钮
设置返回按钮
设置底部的横线

`navigation bar`介绍

系统的navigation bar长这样：我们设计师心中的navigation bar长这样：

我们来看一下navigation bar的几个重要模块。几个模块

设置背景

改变navigation bar的颜色很容易

navigationController.navigationBar.barTintColor = UIColor.yellow
navigationController.navigationBar.isTranslucent = false
navigationBar.setBackgroundImage(UIImage(), for: .default)

translucent半透明的，看着会有一层毛玻璃效果。 barTintColor背景色，不是什么backgroundColor也不是tintColor。也可以设置一张图当作背景

设置标题

navigationController.navigationBar.titleTextAttributes = [
    .foregroundColor: UIColor.black,
    .font: UIFont(name: "MarkerFelt-Thin", size: 20)!
]
navigationController.navigationItem.titleView = UIView()

titleTextAttributes 你可以设置字体颜色等属性这里是文档我们甚至可以自己设置navigationItem.titleView来改变标题的样式

设置左边或者右边的按钮

navigationItem.leftBarButtonItem = UIBarButtonItem(
    title: "Button",
    style: .plain,
    target: self,
    action: #selector(buttonTappedAction)
)
navigationItem.rightBarButtonItem = UIBarButtonItem(
    image: UIImage(named: "yourImage"),
    style: .plain,
    target: self,
    action: #selector(buttonTappedAction)
)
//自定义View
let button = UIButton()
button.setImage(UIImage(named: "rainbow-circle"), for: .normal)
navigationItem.rightBarButtonItem = UIBarButtonItem(customView: button)
//设置字体
let leftButton = self.navigationItem.leftBarButtonItem
leftButton.setTitleTextAttributes(regularBarButtonTextAttributes, for: .normal)
leftButton.setTitleTextAttributes(regularBarButtonTextAttributes, for: .highlighted)
//设置文字或者图片颜色
navigationController.navigationBar.tintColor = UIColor.red

UIBarButtonItem可以创建多种类型的按钮，文字、图片、自定义视图，还可以设置它的字体属性。 tintColor设置后会影响文字或者图片颜色

设置返回按钮

默认的返回按钮包含一个返回的图片和文字，文字是控制器的标题，没有默认是Back。

navigationItem.backBarButtonItem = UIBarButtonItem(
            title: "back",
            style: .plain,
            target: nil,
            action: nil
 )

给backBarButtonItem复值文字类型的UIBarButtonItem可以改变返回的文字，复值图片类型的但是不会返回的箭头，然后你的返回按钮就有两个图标。怎么办呢，我们设置一个navigationItem.leftBarButtonItem来当作返回按钮，还需要注意的是这时候侧滑返回会失效，需要设置交互手势代理。

navigationController?.interactivePopGestureRecognizer?.delegate = self

设置底部的横线

自定义样式

navigationController.navigationBar.shadowImage = yourCustomImage

隐藏横线

navigationController.navigationBar.shadowImage = UIImage()

翻译自dmtopolog.com/navigation-…

自定义导航栏

navigation bar介绍