移动开发平台 mPaaS iOS 定制导航栏

简介

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

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

基础概念

导航栏元素分布

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

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]];
        }

简介

基础概念

导航栏元素分布

导航栏结构

定制应用主题

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

发表回复 取消回复

发表回复取消回复