阿里云移动开发平台mPaaSiOS 定制导航栏

简介

在 App 开发的过程中，经常会要求对顶部导航栏进行自定义。本文将介绍在基于 mPaaS 框架创建的页面中，自定义导航栏的方法。包括以下内容：

简介
基础概念
- 导航栏元素分布
- 导航栏结构
定制应用主题
定制某一个页面导航栏样式

基础概念

导航栏元素分布

导航栏元素主要分布在 3 个区域。一般对导航栏的定制化需求，最终都会变为对这几个区域的修改：

back: 返回按钮控制区域，由 mPaaS 页面基类创建，默认样式为返回箭头 + “返回”文案。
title/subTitle: 标题栏控制区域，默认不显示。若需显示，请调用系统方法设置当前页面的 title。
optionMenu：页面菜单选项区域，默认不显示。如需显示，请调用系统方法设置当前页面的 rightNavigationItem。

导航栏结构

如下图所示，基于 mPaaS 框架创建的应用，默认的 UI 结构为：window/navigationController > tabViewController > 每个 tab 嵌入一个 viewController。即应用主 window 的根应用是一个 UINavigationController 的对象，UINavigationController 的根应用是一个 UITabViewController。
由以上 UI 结构可以看出，整个应用全局只有一个 navigationController，因此所有页面共用同一个导航栏（默认使用 APNavigationBar 创建）。
为了统一所有页面的导航栏样式，要求 mPaaS 应用中，所有页面所在的 VC 都要继承 DTViewControoler，包括 native 和 H5 页面。
基于 mPaaS 框架创建的应用的默认主题，主白底黑字蓝按钮：

定制应用主题

每个应用都会有自己的主题风格，根据以下描述修改 mPaaS 应用的默认主题：

修改导航栏背景色、返回控制区域、标题控制区域等，可重写 AUThemeManager 类的 au_defaultTheme_extraInfo 方法，修改以下 key 对应的返回值。

接口方法

代码示例

@implementation AUThemeManager (Portal)
+ (NSDictionary *)au_defaultTheme_extraInfo
{
    NSMutableDictionary *dict = [[NSMutableDictionary alloc] init];
    dict[TITLEBAR_BACKGROUND_COLOR] = @"COLOR(#108EE9,1)"; // 导航栏背景色
    dict[TITLEBAR_LINE_COLOR] = @"COLOR(#108EE9,1)";       // 导航栏底部分割线或边线的颜色
    dict[TITLEBAR_TITLE_TEXTCOLOR] = @"COLOR(#ffffff,1)";  // 导航栏标题色
    dict[TITLEBAR_TITLE_TEXTSIZE_BOLD] = @"FONT(18)";      // 导航栏标题大小
    dict[TITLEBAR_TEXTCOLOR] = @"COLOR(#ffffff,1)";        // 导航栏返回按钮颜色
    return dict;
}
@end
}

重要：颜色值必须使用类如 COLOR(#108EE9,1) 的方式，否则会报错。

修改主题配置中返回按钮图片，需重写 AUBarButtonItem 类中的 au_default_backButtonImg 方法。
- 接口方法
- 代码示例
```
@implementation AUBarButtonItem (CGBBarButtonItem)
+ (UIImage *)au_default_backButtonImg
{
    // 自定义返回按钮的图片
    return  APCommonUILoadImage(@"back_button_normal_white");
}
@end
```
修改所有页面的返回按钮样式和文案。

定制某一个页面导航栏样式

除了定制主题外，有时也需定制当前页面的导航栏的样式，如修改背景颜色、返回按钮样式等，根据修改时机不同，mPaaS 提供了不同的方法。

页面加载前，在默认导航栏样式基础上修改导航栏颜色，可以在当前页面所在的 VC 中，实现 DTNavigationBarAppearanceProtocol 中的定义方法，来修改对应区域的颜色。

接口方法

代码示例

#pragma mark DTNavigationBarAppearanceProtocol：进入页面时修改导航栏样式
- (UIColor *)opaqueNavigationBarColor
{
    // 设置当前页面导航栏背景为红色
    return [UIColor redColor];
//    // 设置当前页面导航栏透明
//    return [UIColor colorWithRGB:0xff0000 alpha:0];
}
- (BOOL)autohideNavigationBar
{
    // 设置当前页面导航栏是否隐藏
    return NO;
}
- (UIStatusBarStyle)customStatusBarStytle
{
    // 设置当前页面状态栏样式
    return UIStatusBarStyleDefault;
}
- (UIColor *)customNavigationBarBackButtonTitleColor
{
    // 设置当前页面返回按钮文案颜色
    return [UIColor greenColor];
}
- (UIImage *)customNavigationBarBackButtonImage
{
    // 设置当前页面返回按钮图片
    return APCommonUILoadImage(@"back_button_normal_white");
}
- (UIColor *)customNavigationBarTitleColor
{
    // 设置当前页面标题颜色
    return [UIColor greenColor];
}

页面打开后，在用户操作的过程中动态修改导航栏样式，如背景颜色滑动渐变、修改右侧菜单按钮等，根据修改的区域不同，主要分为以下几类：

背景区域：包括隐藏/显示导航栏、透明导航栏、修改导航栏背景颜色、修改状态栏颜色。

- (void)gotoHideNavigator
{
    // 隐藏导航栏
    [self.navigationController.navigationBar setHidden:YES];
}
- (void)gotoShowNavigator
{
    // 显示导航栏
    [self.navigationController.navigationBar setHidden:NO];
}
- (void)gotoTransparency
{
    // 透明导航栏
    [self.navigationController.navigationBar setNavigationBarTranslucentStyle];
}
- (void)gotoUpdateBackgroundColor
{
    // 修改导航栏背景颜色
    [self.navigationController.navigationBar setNavigationBarStyleWithColor:[UIColor whiteColor] translucent:NO];
    [self.navigationController.navigationBar setNavigationBarBottomLineColor:[UIColor whiteColor]];
}
- (void)gotoUpdateStatusBarStyle
{
    // 修改状态栏颜色
    [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
}

返回控制区域：修改默认返回按钮文案颜色、修改默认返回按钮返回箭头样式、重新设置返回按钮样式。

- (void)gotoUpdateBackTitleColor
{
    // 修改默认返回按钮文案颜色
    NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;
    if ([leftBarButtonItems count] == 1) {
        if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
            AUBarButtonItem *backItem = leftBarButtonItems[0];
            backItem.titleColor = [UIColor blackColor];
        }
    }
}
- (void)gotoUpdateBackImage
{
    // 修改默认返回按钮返回箭头样式
    NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;
    if ([leftBarButtonItems count] == 1) {
        if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
            AUBarButtonItem *backItem = leftBarButtonItems[0];
            backItem.backButtonImage = APCommonUILoadImage(@"back_button_normal");
        }
    }
}
- (void)gotoUpdateBackItem
{
    // 重新设置返回按钮样式
    self.navigationItem.leftBarButtonItem = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeDelete target:self action:@selector(onClickBack)];
}
- (void)onClickBack
{
    [self.navigationController popViewControllerAnimated:YES];
}

标题控制区域：修改默认标题颜色、设置上下主副标题、修改标题为图片显示。

- (void)gotoUpdateTitleColor
{
    // 修改标题颜色
    [self.navigationController.navigationBar setNavigationBarTitleTextAttributesWithTextColor:[UIColor blackColor]];
}
- (void)gotoTwoTitle
{
    // 修改标题样式：上下主副标题
    self.navigationItem.titleView = [[AUDoubleTitleView alloc] initWithTitle:@"主标题" detailTitle:@"副标题"];
}
- (void)gotoTitleImage
{
    // 修改标题样式：图片
    UIImageView *imageView = [[UIImageView alloc] initWithImage:APCommonUILoadImage(@"ilustration_ap_expection_alert")];
    imageView.frame = CGRectMake(0, 0, self.self.view.width-100, 64);
    self.navigationItem.titleView = imageView;
}

菜单控制区域：设置单个或多个右侧菜单按钮。

- (void)gotoSetOptionMenu
{
    // 设置右侧单按钮
    self.navigationItem.rightBarButtonItem = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeGroupChat target:self action:@selector(onClickRightItem)];
}
- (void)gotoSetTwoOptionMenu
{
    // 设置右侧双按钮
    AUBarButtonItem *item1 = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeGroupChat target:self action:@selector(onClickRightItem)];
    AUBarButtonItem *item2 = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeHelp target:self action:@selector(onClickRightItem)];
    self.navigationItem.rightBarButtonItems = @[item1, item2];
}

沉浸式导航栏：进入时导航栏透明，滑动到指定位置后不透明。主要分为以下两类：

进入页面时，设置导航栏透明：在当前页面所在的 VC 中重写以下接口。

- (UIColor *)opaqueNavigationBarColor
  {
      // 设置当前页面导航栏透明
      return [UIColor colorWithRGB:0xff0000 alpha:0];
  }

页面滑动到指定位置后，修改导航栏背景区域、返回区域、标题区域及菜单控制区域等样式。

  - (void)gotoUpdateBackgroundColor
  {
      // 修改导航栏背景颜色
      [self.navigationController.navigationBar setNavigationBarStyleWithColor:[UIColor whiteColor] translucent:NO];
      [self.navigationController.navigationBar setNavigationBarBottomLineColor:[UIColor whiteColor]];
  }
  - (void)gotoUpdateBackTitleColor
  {
      // 修改默认返回按钮文案颜色
      NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;
      if ([leftBarButtonItems count] == 1) {
          if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
              AUBarButtonItem *backItem = leftBarButtonItems[0];
              backItem.titleColor = [UIColor blackColor];
          }
      }
  }
  - (void)gotoUpdateTitleColor
  {
      // 修改标题颜色
      [self.navigationController.navigationBar setNavigationBarTitleTextAttributesWithTextColor:[UIColor blackColor]];
  }

原创文章，作者：网友投稿，如若转载，请注明出处：https://www.cloudads.cn/archives/33858.html