原生标题栏示例代码

简要描述

主要协助云上越秀App设置标题栏;

主要内容

1、带WKWebView的页面导航

UI标注及切图参考

带WKWebView的页面导航设计图

返回按钮切图:







带WKWebView的页面导航代码

  1. /// 自定义导航栏的背景视图
  2. @property (nonatomic, strong) UIView *statusAndNavBgView;
  3. - (UIView *)statusAndNavBgView {
  4. if (!_statusAndNavBgView) {
  5. CGRect statusFrame = [PHAIUtils statusBarFrame];
  6. CGFloat statusWidth = statusFrame.size.width;
  7. CGFloat statusHeight = statusFrame.size.height;
  8. CGFloat navigationBarHeight = self.navigationController.navigationBar.frame.size.height;
  9. _statusAndNavBgView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, statusWidth, statusHeight + navigationBarHeight)];
  10. _statusAndNavBgView.backgroundColor = [UIColor whiteColor];
  11. _statusAndNavBgView.translatesAutoresizingMaskIntoConstraints = NO;
  12. // 添加状态栏
  13. UIView *statusView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, statusWidth, statusHeight)];
  14. statusView.backgroundColor = [UIColor whiteColor];
  15. statusView.translatesAutoresizingMaskIntoConstraints = NO;
  16. [_statusAndNavBgView addSubview:statusView];
  17. // 添加约束
  18. [_statusAndNavBgView addConstraints:@[
  19. [NSLayoutConstraint constraintWithItem:statusView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:_statusAndNavBgView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],
  20. [NSLayoutConstraint constraintWithItem:statusView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:_statusAndNavBgView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
  21. [NSLayoutConstraint constraintWithItem:statusView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:_statusAndNavBgView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0],
  22. [NSLayoutConstraint constraintWithItem:statusView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:statusHeight]
  23. ]];
  24. // 添加导航栏
  25. UIView *navView = [[UIView alloc] initWithFrame:CGRectMake(0, statusHeight, statusWidth, navigationBarHeight)];
  26. navView.backgroundColor = [UIColor whiteColor];
  27. navView.translatesAutoresizingMaskIntoConstraints = NO;
  28. [_statusAndNavBgView addSubview:navView];
  29. [_statusAndNavBgView addConstraints:@[
  30. [NSLayoutConstraint constraintWithItem:navView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:statusView attribute:NSLayoutAttributeBottom multiplier:1.0 constant:0],
  31. [NSLayoutConstraint constraintWithItem:navView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:_statusAndNavBgView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
  32. [NSLayoutConstraint constraintWithItem:navView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:_statusAndNavBgView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0],
  33. [NSLayoutConstraint constraintWithItem:navView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:navigationBarHeight]
  34. ]];
  35. // 添加导航标题
  36. UILabel *navTitleLB = [[UILabel alloc] init];
  37. navTitleLB.backgroundColor = [UIColor whiteColor];
  38. navTitleLB.translatesAutoresizingMaskIntoConstraints = NO;
  39. navTitleLB.textColor = [UIColor ai_colorWithHexString:@"#262626"];
  40. navTitleLB.textAlignment = NSTextAlignmentCenter;
  41. navTitleLB.font = [UIFont systemFontOfSize:18];
  42. [navView addSubview:navTitleLB];
  43. self.navTitleLB = navTitleLB;
  44. [navView addConstraints:@[
  45. [NSLayoutConstraint constraintWithItem:navTitleLB attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],
  46. [NSLayoutConstraint constraintWithItem:navTitleLB attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
  47. [NSLayoutConstraint constraintWithItem:navTitleLB attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0],
  48. [NSLayoutConstraint constraintWithItem:navTitleLB attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeHeight multiplier:1.0 constant:0]
  49. ]];
  50. if (![PHAIUtils isNilOrEmpty:self.navTitle]) {
  51. [navTitleLB setText:self.navTitle];
  52. }
  53. // 添加返回按钮
  54. CGFloat leftMargin = 15;
  55. CGFloat backImgW = 24;
  56. UIButton *backBtn = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, leftMargin + backImgW, navigationBarHeight)];
  57. backBtn.translatesAutoresizingMaskIntoConstraints = NO;
  58. [navView addSubview:backBtn];
  59. // 返回按钮的点击事件
  60. [backBtn addTarget:self action:@selector(backAction:) forControlEvents:UIControlEventTouchUpInside];
  61. [navView addConstraints:@[
  62. [NSLayoutConstraint constraintWithItem:backBtn attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],
  63. [NSLayoutConstraint constraintWithItem:backBtn attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
  64. [NSLayoutConstraint constraintWithItem:backBtn attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:(leftMargin + backImgW)],
  65. [NSLayoutConstraint constraintWithItem:backBtn attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:navigationBarHeight]
  66. ]];
  67. // 添加返回图标
  68. CGFloat backImgY = (navigationBarHeight - backImgW) / 2.0;
  69. UIImageView *backImgV = [[UIImageView alloc] initWithFrame:CGRectMake(leftMargin, backImgY, backImgW, backImgW)];
  70. UIImage *backImage = [[PHAIUtils imageNamed:@"navigation_back_black"] imageWithRenderingMode:UIImageRenderingModeAlwaysOriginal];
  71. backImgV.translatesAutoresizingMaskIntoConstraints = NO;
  72. [backImgV setImage:backImage];
  73. [navView addSubview:backImgV];
  74. [navView addConstraints:@[
  75. [NSLayoutConstraint constraintWithItem:backImgV attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeTop multiplier:1.0 constant:backImgY],
  76. [NSLayoutConstraint constraintWithItem:backImgV attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:navView attribute:NSLayoutAttributeLeft multiplier:1.0 constant:leftMargin],
  77. [NSLayoutConstraint constraintWithItem:backImgV attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:backImgW],
  78. [NSLayoutConstraint constraintWithItem:backImgV attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:backImgW]
  79. ]];
  80. }
  81. return _statusAndNavBgView;
  82. }
  83. /// 添加状态栏和导航栏背景视图的约束
  84. - (void)addConstraintsForStatusAndNavView {
  85. CGRect statusFrame = [PHAIUtils statusBarFrame];
  86. CGFloat statusHeight = statusFrame.size.height;
  87. CGFloat navigationBarHeight = self.navigationController.navigationBar.frame.size.height;
  88. [self.view addConstraints:@[
  89. [NSLayoutConstraint constraintWithItem:self.statusAndNavBgView attribute:NSLayoutAttributeTop relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeTop multiplier:1.0 constant:0],
  90. [NSLayoutConstraint constraintWithItem:self.statusAndNavBgView attribute:NSLayoutAttributeLeft relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeLeft multiplier:1.0 constant:0],
  91. [NSLayoutConstraint constraintWithItem:self.statusAndNavBgView attribute:NSLayoutAttributeWidth relatedBy:NSLayoutRelationEqual toItem:self.view attribute:NSLayoutAttributeWidth multiplier:1.0 constant:0],
  92. [NSLayoutConstraint constraintWithItem:self.statusAndNavBgView attribute:NSLayoutAttributeHeight relatedBy:NSLayoutRelationEqual toItem:nil attribute:NSLayoutAttributeNotAnAttribute multiplier:1.0 constant:(statusHeight + navigationBarHeight)]
  93. ]];
  94. }
  95. /// 添加导航的背景和约束
  96. [self.view addSubview:self.statusAndNavBgView];
  97. [self addConstraintsForStatusAndNavView];