自定义导航栏实践2018
是否自定义？
大多数情况下，直接使用系统的导航栏就可以了，没有必要自定义。XCode默认情况下也是显示导航栏的。
- 透明属性
translucent默认是开的YES，会带来很多意想不到的问题。如果不是必要，建议设置为NO
self.navigationController.navigationBar.translucent= NO;
-
去掉导航栏下面的黑线，需要用到不优雅的方法，并且还碰到过兼容性问题。也就是说开发的时候是好的，在实际用的时候，发现有些型号的手机，那根黑线去不掉。
-
设置分为全局
[UINavigationBar appearance]和局部self.navigationController.navigationBar两套，行为有时候不可预测。 -
iOS11之后，导航栏设置，在viewDidLoad中会不起作用，需要在viewWillAppear以及以后的函数中执行才可以。 -
有些时候，需要隐藏导航栏，比如渐变的背景色，系统导航栏就实现不了。
-
有导航页面向没有导航栏的页面pop的时候，有些手机，会出现一个黑块，过渡很不自然。可以通过自定义专场动画来规避这个问题，实现起来还是有点麻烦的。
-
导航栏相关的
API命名很不友好，比如背景色叫setBarTintColor，返回按钮颜色叫setTintColor等等。
小结：如果不在意以上几点，推荐使用系统的导航栏。
布局
一开始还是坚持用系统的导航栏，后来，问题一个一个爆发出来。和Android的同事交流，发现他们是用自定义的。所以，干脆隐藏了系统的导航栏，自定义一个。
image.png
导航栏几乎每个页面都要用，不过一般在一个工程中，样式基本上是统一的。所以，返回按钮图标，标题的字体和颜色，右侧图标的大小，右侧文字的字体颜色等都可以统一固定。
配置项
// 标题
@property (copy, nonatomic) NSString *title;
// 左边按钮，一般是返回，点击响应
@property (copy, nonatomic) void(^leftButtonBlock)(void);
// 右边按钮，点击响应
@property (copy, nonatomic) void(^rightButtonBlock)(void);
// 隐藏左侧的返回按钮图标
@property (assign, nonatomic) BOOL hideLeftImageView;
// 隐藏底部分隔线
@property (assign, nonatomic) BOOL hideSeparatorLineView;
// 右侧文字
@property (copy, nonatomic) NSString *rightText;
// 右侧图片
@property (strong, nonatomic) UIImage *rightImage;
-
标题的字体和颜色可以统一写死，标题的内容灵活配置
-
左右两个按钮的响应，可以灵活配置；特别是右边按钮，也可能没有。
-
隐藏分隔线，有时候要用到的。
-
右边，大多数时候没有。有时候是文字，有时候是图标。
-
右侧的按钮是一值在的，也一致能响应，具体响应可配置。空响应就相当于不响应。将响应和界面展示分开，分别配置
基类
既然绝大多数的页面都有导航栏，所以统一隐藏系统导航栏，在基类中引入这个自定义的导航栏。
- (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
// 添加状态栏蒙板
self.kjtStatusBarMaskView = [[UIView alloc] init];
self.kjtStatusBarMaskView.frame = CGRectMake(0, 0, kScreenWidth, kStatusBarHeight);
// 设置成和导航栏背景色一样
self.kjtStatusBarMaskView.backgroundColor = kNavBackgroundColor;
[self.view addSubview:self.kjtStatusBarMaskView];
// 添加公用导航栏；紧贴状态栏蒙板
self.kjtNavigationBar = [[KJTNavigationBar alloc] init];
self.kjtNavigationBar.frame = CGRectMake(0, kStatusBarHeight, kScreenWidth, kNavigationBarHeight);
// 导航栏背景色
self.kjtNavigationBar.backgroundColor = kNavBackgroundColor;
// 左边默认为返回
@weakify(self)
[self.kjtNavigationBar setLeftButtonBlock:^{
@strongify(self)
[self.navigationController popViewControllerAnimated:YES];
}];
[self.view addSubview:self.kjtNavigationBar];
// 默认隐藏系统导航栏，使用公用的导航栏
self.navigationController.navigationBar.hidden = YES;
self.useCustomerNavigationBar = NO;
self.notUseNavigationBar = NO;
}
- 从
self.view的(0.0)开始，最上面是一个状态栏背景视图，是最基本的UIView，然后是自定义的导航栏，高度固定为44。这里要注意的是，出了X系列之后，导航栏不能固定写死20了。可以用下面的宏来区分：
#define kIsPhoneX ((kScreenHeight == 812) || (kScreenHeight == 896))
// 状态栏高度
#define kStatusBarHeight (kIsPhoneX ? 44.f : 20.f)
// 顶部导航栏高度
#define kNavigationBarHeight 44.f
-
状态栏（只是一个背景）和导航栏设置为相同的背景色。系统的导航栏就是这样的。设置了
barTintColor之后，状态栏的背景色也会跟着变。 -
统一隐藏系统导航栏。
-
统一设置返回按钮的响应为
[self.navigationController popViewControllerAnimated:YES];
绝大多数情况下都是这样的。如果要改变，重新设置属性leftButtonBlock就可以了。 -
提供一个变量，可以不用导航栏，这个时候，就应该将默认加入的状态栏和导航栏都移除。比如，
present出来的Controller，就不需要导航栏。
[RACObserve(self, notUseNavigationBar) subscribeNext:^(id _Nullable x) {
// 不使用导航栏：隐藏系统的，移除公用的，状态栏蒙板也移除
if (self.notUseNavigationBar) {
self.navigationController.navigationBar.hidden = YES;
[self.kjtNavigationBar removeFromSuperview];
self.kjtNavigationBar = nil;
[self.kjtStatusBarMaskView removeFromSuperview];
self.kjtStatusBarMaskView = nil;
}
}];
- 提供一个变量，可以不用这个公共的导航栏，使用另外的自定义的导航栏。这个时候，状态栏保留，系统导航栏隐藏，这个公共的导航栏也要移除。
[RACObserve(self, useCustomerNavigationBar) subscribeNext:^(id _Nullable x) {
// 使用自定义的导航栏；公用导航栏要去掉；系统导航栏隐藏；状态栏蒙板保留，用来设置背景色
if (self.useCustomerNavigationBar) {
self.navigationController.navigationBar.hidden = YES;
[self.kjtNavigationBar removeFromSuperview];
self.kjtNavigationBar = nil;
}
}];
使用
-
大多数情况，只要留出导航栏的高度（44）就可以了，导航栏由基类统一添加。
image.png
-
标题一般要配置一下
// 标题
self.kjtNavigationBar.title = @"后门开关";
运行起来后，是这样的
image.png
- 如果有右侧按钮的，简单配置一下就可以了。比如
self.kjtNavigationBar.title = @"余额";
self.kjtNavigationBar.rightText = @"交易明细";
@weakify(self)
[self.kjtNavigationBar setRightButtonBlock:^{
@strongify(self)
[self.navigationController showViewController:[KJTTransaction listController] sender:nil];
}];
运行起来后，是这样的
image.png
