是否自定义?
大多数情况下,直接使用系统的导航栏就可以了,没有必要自定义。XCode
默认情况下也是显示导航栏的。
- 透明属性
translucent
默认是开的YES
,会带来很多意想不到的问题。如果不是必要,建议设置为NO
self.navigationController.navigationBar.translucent= NO;
去掉导航栏下面的黑线,需要用到不优雅的方法,并且还碰到过兼容性问题。也就是说开发的时候是好的,在实际用的时候,发现有些型号的手机,那根黑线去不掉。
设置分为全局
[UINavigationBar appearance]
和局部self.navigationController.navigationBar
两套,行为有时候不可预测。iOS11
之后,导航栏设置,在viewDidLoad
中会不起作用,需要在viewWillAppear
以及以后的函数中执行才可以。有些时候,需要隐藏导航栏,比如渐变的背景色,系统导航栏就实现不了。
有导航页面向没有导航栏的页面pop的时候,有些手机,会出现一个黑块,过渡很不自然。可以通过自定义专场动画来规避这个问题,实现起来还是有点麻烦的。
导航栏相关的
API
命名很不友好,比如背景色叫setBarTintColor
,返回按钮颜色叫setTintColor
等等。
小结:如果不在意以上几点,推荐使用系统的导航栏。
布局
一开始还是坚持用系统的导航栏,后来,问题一个一个爆发出来。和Android
的同事交流,发现他们是用自定义的。所以,干脆隐藏了系统的导航栏,自定义一个。
导航栏几乎每个页面都要用,不过一般在一个工程中,样式基本上是统一的。所以,返回按钮图标,标题的字体和颜色,右侧图标的大小,右侧文字的字体颜色等都可以统一固定。
配置项
// 标题
@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)就可以了,导航栏由基类统一添加。
标题一般要配置一下
// 标题
self.kjtNavigationBar.title = @"后门开关";
运行起来后,是这样的
- 如果有右侧按钮的,简单配置一下就可以了。比如
self.kjtNavigationBar.title = @"余额";
self.kjtNavigationBar.rightText = @"交易明细";
@weakify(self)
[self.kjtNavigationBar setRightButtonBlock:^{
@strongify(self)
[self.navigationController showViewController:[KJTTransaction listController] sender:nil];
}];
运行起来后,是这样的