原生标题栏示例代码

简要描述

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

主要内容

1、带WKWebView的页面导航

UI标注及切图参考

带WKWebView的页面导航设计图

返回按钮切图：







带WKWebView的页面导航代码

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