自定义导航栏实践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

自定义导航栏实践2018

是否自定义？

布局

配置项

基类

使用

猜你喜欢