原生标题栏示例代码
简要描述
主要协助云上越秀App设置标题栏;
主要内容
1、带WKWebView的页面导航
UI标注及切图参考
带WKWebView的页面导航设计图
返回按钮切图:
带WKWebView的页面导航代码
/// 自定义导航栏的背景视图
@property (nonatomic, strong) UIView *statusAndNavBgView;
- (UIView *)statusAndNavBgView {
if (!_statusAndNavBgView) {
CGRect statusFrame = [PHAIUtils statusBarFrame];
CGFloat statusWidth = statusFrame.size.width;
CGFloat statusHeight = statusFrame.size.height;
CGFloat navigationBarHeight = self.navigationController.navigationBar.frame.size.height;
_statusAndNavBgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, statusWidth, statusHeight + navigationBarHeight)];
_statusAndNavBgView.backgroundColor = [UIColor whiteColor];
_statusAndNavBgView.translatesAutoresizingMaskIntoConstraints = NO;
// 添加状态栏
UIView *statusView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, statusWidth, statusHeight)];
statusView.backgroundColor = [UIColor whiteColor];
statusView.translatesAutoresizingMaskIntoConstraints = NO;
[_statusAndNavBgView addSubview:statusView];
// 添加约束
[_statusAndNavBgView addConstraints:@[
[NSLayoutConstraint constraintWithItem:statusView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_statusAndNavBgView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:statusView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:_statusAndNavBgView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:statusView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:_statusAndNavBgView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:statusView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:statusHeight]
]];
// 添加导航栏
UIView *navView = [[UIView alloc] initWithFrame:CGRectMake(0, statusHeight, statusWidth, navigationBarHeight)];
navView.backgroundColor = [UIColor whiteColor];
navView.translatesAutoresizingMaskIntoConstraints = NO;
[_statusAndNavBgView addSubview:navView];
[_statusAndNavBgView addConstraints:@[
[NSLayoutConstraint constraintWithItem:navView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:statusView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:navView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:_statusAndNavBgView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:navView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:_statusAndNavBgView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:navView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:navigationBarHeight]
]];
// 添加导航标题
UILabel *navTitleLB = [[UILabel alloc] init];
navTitleLB.backgroundColor = [UIColor whiteColor];
navTitleLB.translatesAutoresizingMaskIntoConstraints = NO;
navTitleLB.textColor = [UIColor ai_colorWithHexString:@"#262626"];
navTitleLB.textAlignment = NSTextAlignmentCenter;
navTitleLB.font = [UIFont systemFontOfSize:18];
[navView addSubview:navTitleLB];
self.navTitleLB = navTitleLB;
[navView addConstraints:@[
[NSLayoutConstraint constraintWithItem:navTitleLB attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:navTitleLB attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:navTitleLB attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:navTitleLB attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0]
]];
if (![PHAIUtils isNilOrEmpty:self.navTitle]) {
[navTitleLB setText:self.navTitle];
}
// 添加返回按钮
CGFloat leftMargin = 15;
CGFloat backImgW = 24;
UIButton *backBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, leftMargin + backImgW, navigationBarHeight)];
backBtn.translatesAutoresizingMaskIntoConstraints = NO;
[navView addSubview:backBtn];
// 返回按钮的点击事件
[backBtn addTarget:self action:@selector(backAction:) forControlEvents:UIControlEventTouchUpInside];
[navView addConstraints:@[
[NSLayoutConstraint constraintWithItem:backBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:backBtn attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:backBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:(leftMargin + backImgW)],
[NSLayoutConstraint constraintWithItem:backBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:navigationBarHeight]
]];
// 添加返回图标
CGFloat backImgY = (navigationBarHeight - backImgW) / 2.0;
UIImageView *backImgV = [[UIImageView alloc] initWithFrame:CGRectMake(leftMargin, backImgY, backImgW, backImgW)];
UIImage *backImage = [[PHAIUtils imageNamed:@"navigation_back_black"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
backImgV.translatesAutoresizingMaskIntoConstraints = NO;
[backImgV setImage:backImage];
[navView addSubview:backImgV];
[navView addConstraints:@[
[NSLayoutConstraint constraintWithItem:backImgV attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeTop multiplier:1.0 constant:backImgY],
[NSLayoutConstraint constraintWithItem:backImgV attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:leftMargin],
[NSLayoutConstraint constraintWithItem:backImgV attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:backImgW],
[NSLayoutConstraint constraintWithItem:backImgV attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:backImgW]
]];
}
return _statusAndNavBgView;
}
/// 添加状态栏和导航栏背景视图的约束
- (void)addConstraintsForStatusAndNavView {
CGRect statusFrame = [PHAIUtils statusBarFrame];
CGFloat statusHeight = statusFrame.size.height;
CGFloat navigationBarHeight = self.navigationController.navigationBar.frame.size.height;
[self.view addConstraints:@[
[NSLayoutConstraint constraintWithItem:self.statusAndNavBgView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:self.statusAndNavBgView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:self.statusAndNavBgView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0],
[NSLayoutConstraint constraintWithItem:self.statusAndNavBgView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:(statusHeight + navigationBarHeight)]
]];
}
/// 添加导航的背景和约束
[self.view addSubview:self.statusAndNavBgView];
[self addConstraintsForStatusAndNavView];