技术干货Native页面下如何实现导航栏的定制化开发？

　　很多 mPaaS Coder 在接入 H5 容器后都会对容器的导航栏进行深度定制，本文旨在通过不同实际场景的描述，供大家参考完成 Native 页面的定制化开发。 Native 修改导航栏左侧返回按钮
　　（一）自定义 NBPluginBase 插件中修改
　　1.自定义原生 BarButtonItem
　　监听 kNBEvent_Scene_NavigationItem_Left_Back_Create_Before，在此监听事件中设置自定义 BarButtonItem  //监听kNBEvent_Scene_NavigationItem_Left_Back_Create_Before，在此监听事件中：  UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 44, 44); button.backgroundColor = [UIColor whiteColor]; [button setTitle:@＂取消＂ forState:UIControlStateNormal]; button.titleLabel.font = [UIFont systemFontOfSize:14.0]; [button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal];       event.context.currentViewController.navigationItem.leftBarButtonItem.customView = button;
　　注：此方案自定义button，需要自行实现关闭页面逻辑。
　　2.修改返回按钮
　　监听 kNBEvent_Scene_NavigationItem_Left_Back_Create_After，在此监听事件中修改默认返回按钮样式，包括文案颜色、返回箭头等，文案内容默认不可修改。  //监听kNBEvent_Scene_NavigationItem_Left_Back_Create_After，在此监听事件中： // 修改返回按钮样式 NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems; if ([leftBarButtonItems count] == 1) {     if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {         //在默认返回按钮基础上，修改返回箭头和文案颜色         AUBarButtonItem *backItem = leftBarButtonItems[0];         backItem.backButtonColor = [UIColor greenColor];         backItem.titleColor = [UIColor orangeColor];// [UIColor colorFromHexString:@＂#00ff00＂];         //隐藏、显示返回箭头         backItem.hideBackButtonImage = NO;         //backItem.backButtonTitle; 标题内容更改无效。                                 // 隐藏返回文案：文案设置为透明，保留返回按钮 s 点击区域         //backItem.titleColor = [UIColor clearColor];     } }
　　（二）H5容器中自定义修改
　　1.方式一，在 viewWillAppear 获取自定义启动参数，根据参数自定义返回按钮。  - (void)viewWillAppear:(BOOL)animated {     [super viewWillAppear:animated];     // 当前页面的启动参数     NSDictionary *expandParams = self.psdScene.createParam.expandParams;     NSLog(@＂[mpaas] expandParams: %@＂, expandParams); }
　　获取启动参数后，依据自定义参数实现自定义按钮。 // 修改默认返回按钮文案颜色     NSString *backButtonColorString = expandParams[@＂backButtonColor＂];     if ([backButtonColorString isKindOfClass:[NSString class]] && [backButtonColorString length] > 0) {         UIColor *backButtonColor = [UIColor colorFromHexString:backButtonColorString];         NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;         if ([leftBarButtonItems count] == 1) {             if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {                 backItem.backButtonTitle = @＂测试＂;// 返回按钮title                 backItem.titleColor = backButtonColor;// 返回按钮文本颜色                 backItem.backButtonColor = [UIColor blueColor];// 设置箭头颜色                 backItem.hideBackButtonImage = NO;//隐藏返回按钮图片，提供给框架使用                 // 返回按钮图片 backItem.backButtonImage; 设置无效，只可隐藏or显示             }         }     }
　　2.方式二，可以在 viewWillAppear 自定义整个返回区域 AUBarButtonItem 按钮、个数：  AUBarButtonItem *backItem = [AUBarButtonItem barButtonItemWithIconFontName:kICONFONT_BACK iconColor:[UIColor lightGrayColor] target:self action:@selector(custBack:)];    AUBarButtonItem *backItem = [AUBarButtonItem backBarButtonItemWithTitle:@＂测试＂ backArrowColor:[UIColor redColor] target:self action:@selector(custBack:)]; backItem.customView.frame = CGRectMake(0, 0, 44, 44);          AUBarButtonItem *closeItem = [AUBarButtonItem barButtonItemWithIconFontName:kICONFONT_SYSTEM_CANCEL_BOLD iconColor:[UIColor lightGrayColor] target:self action:@selector(custClose:)]; closeItem.customView.frame = CGRectMake(0, 0, 30, 44);          self.navigationItem.leftBarButtonItems = @[backItem,closeItem];
　　如果要修改 BarButtonItem 的文字大小、颜色等深度定制可以参考以下代码：  UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 40, 40); [button setTitle:@＂我的＂ forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [button setBackgroundColor: [UIColor whiteColor]]; button.titleLabel.font = [UIFont systemFontOfSize:14.0f]; AUBarButtonItem *backItem = [[AUBarButtonItem alloc] initWithCustomView:button];//返回按钮事件 - (void)custBack:(id)sender{     NSLog(@＂back -----＂);     [self back]; } //关闭所有session - (void)custClose:(id)sender{     NSLog(@＂close   ------＂);     NSArray *sessions = [[NBContext sharedContext] sessions];     for (NBSession* session in sessions) {         [[NBContext sharedContext] exitSession:session animated:YES];     } }Native 修改导航栏左侧关闭按钮
　　（一）在自定义 NBPluginBase 插件中关闭按钮需自行创建
　　监听 kNBEvent_Scene_NavigationItem_Left_Close_Create_Before，在此监听事件中创建关闭按钮。  //监听kNBEvent_Scene_NavigationItem_Left_Close_Create_Before，在此监听事件中： // 创建关闭按钮 [event preventDefault]; NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 44, 44); button.backgroundColor = [UIColor whiteColor]; [button setTitle:@＂关闭＂ forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; itemEvent.customView = button;
　　监听kNBEvent_Scene_NavigationItem_Left_Close_Create_After，在此监听事件中修改关闭按钮样式。  //监听kNBEvent_Scene_NavigationItem_Left_Close_Create_After，在此监听事件中： // 修改关闭按钮样式 [event preventDefault]; NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event; UIButton *closeButton = (UIButton *)itemEvent.customView; [closeButton setTitle:@＂关闭＂ forState:UIControlStateNormal]; [closeButton setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];Native 修改导航栏标题
　　（一）在viewWillAppear 获取自定义启动参数，根据参数自定义标题 //打开H5离线包 NSString *appId = @＂20190927＂;     [[MPNebulaAdapterInterface shareInstance]startH5ViewControllerWithNebulaApp:@{@＂appId＂:appId,@＂defaultTitle＂:@＂测试＂,@＂readTitle＂:@＂NO＂,@＂titleColor＂:@＂ff0000＂,@＂titleFont＂:@＂18.0＂}];//启动参数设置标题文案、颜色、大小;
　　这里的参数key值appId、defaultTitle、readTitle为框架默认不可修改，其余参数 key 值自定义。  - (void)viewWillAppear:(BOOL)animated {     [super viewWillAppear:animated];     // 当前页面的启动参数     NSDictionary *expandParams = self.psdScene.createParam.expandParams;     NSLog(@＂[mpaas] expandParams: %@＂, expandParams);          // 设置导航栏标题     NSString *titleColorString = expandParams[@＂titleColor＂];     NSString *titleFont = expandParams[@＂titleFont＂];     if ([titleColorString isKindOfClass:[NSString class]] && [titleColorString length] > 0 && [titleFont length] > 0) {         UIColor *titleColor = [UIColor colorFromHexString:titleColorString];         id titleView =          self.navigationItem.titleView;         [[titleView mainTitleLabel] setTextColor:titleColor];                  float font = [titleFont floatValue];         [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:font]];              } }Native 修改导航栏右侧按钮
　　（一）NBPluginBase 插件中自定义修改
　　1.在 NBPluginBase 中
　　监听 kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before，在此监听事件中创建导航栏右侧按钮。  //监听kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before，在此监听事件中： NBNavigationItemRightSettingEvent *settingEvent = (id)event; settingEvent.adjustsWidthToFitText = YES; settingEvent.maxWidth = [UIScreen mainScreen].bounds.size.width / 4.0f; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 33, 40); [button setTitle:@＂设置＂ forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [button setBackgroundColor: [UIColor whiteColor]]; settingEvent.customView = button; [event preventDefault];
　　2.在 NBPluginBase 中
　　监听kNBEvent_Scene_NavigationItem_Right_Setting_Create_After，在此监听事件中修改导航栏右侧按钮。  //监听kNBEvent_Scene_NavigationItem_Right_Setting_Create_After，在此监听事件中： NBNavigationItemRightSettingEvent *settingEvent = (id)event; settingEvent.adjustsWidthToFitText = YES; settingEvent.maxWidth = [UIScreen mainScreen].bounds.size.width / 4.0f; UIButton *button = settingEvent.customView; button.titleLabel.font = [UIFont systemFontOfSize:14.0f]; button.frame = CGRectMake(0, 0, 40, 40); [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateHighlighted]; [button setBackgroundColor: [UIColor whiteColor]]; [event stopPropagation];//去掉默认按钮图片
　　注：
　　1. 在插件中自定义导航栏右侧按钮，必须要在打开H5容器的启动参数中设置@{@＂showOptionMenu＂: @＂YES＂} 否则设置右侧按钮无效。
　　2. 必须要在kNBEvent_Scene_NavigationItem_Right_Setting_Create_After监听事件中实现[event stopPropagation];否则showOptionMenu按钮的默认图片没有办法去掉。
　　（二）H5 容器中自定义修改
　　1.在 viewWillAppear 获取自定义启动参数，根据参数自定义设置 AUBarButtonItem按钮。
　　（1）图片样式：  AUBarButtonItem *rightItem1 = [[AUBarButtonItem alloc] initWithImage:image1 style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed1)]; AUBarButtonItem *rightItem2 = [[AUBarButtonItem alloc] initWithImage:image2 style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed2)]; //单个按钮 self.navigationItem.rightBarButtonItem = rightItem1; //多个按钮 self.navigationItem.rightBarButtonItems = @[rightItem1, rightItem2];
　　（2）文字样式：  AUBarButtonItem *titleItem1 = [[AUBarButtonItem alloc]initWithTitle:@＂按钮＂ style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed1)]; AUBarButtonItem *titleItem2 = [[AUBarButtonItem alloc]initWithTitle:@＂右侧＂ style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed2)]; //单个按钮 self.navigationItem.rightBarButtonItem = rightItem1; //多个按钮 self.navigationItem.rightBarButtonItems = @[titleItem1, titleItem2];
　　2.如果要修改 BarButtonItem 的文字大小、颜色等深度定制参考以下代码：  UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 40, 40); [button setTitle:@＂我的＂ forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [button setBackgroundColor: [UIColor whiteColor]]; button.titleLabel.font = [UIFont systemFontOfSize:14.0f]; AUBarButtonItem *rightItem = [[AUBarButtonItem alloc] initWithCustomView:button];Native 自定义导航栏
　　（一）隐藏原生导航栏
　　自定义导航栏，要先隐藏原生导航栏。  //隐藏容器类navBar self.options.showTitleBar = NO; //隐藏系统层navBar [self.navigationController setNavigationBarHidden:YES];
　　（二）创建 navBarView 创建 AUCustomNavigationBar 初始化方法必须要 navigationBarForCurrentVC: 否则按钮设置无效。  赋值给 self.customNavigationBar 容器会自动适配H5页面高度，否则需自行适配页面。  //创建navBarView，必须要用此方法 AUCustomNavigationBar *navBar = [AUCustomNavigationBar navigationBarForCurrentVC:self]; [self.view addSubview:navBar]; //设置给容器VC self.customNavigationBar = navBar;
　　（三）自定义背景样式
　　设置背景色、渐变色等，setNavigationBarBlurEffective 设置毛玻璃效果，支持更多样式自选。  //设置背景颜色，渐变色可自行设置 navBar.backgroundColor = [UIColor lightGrayColor]; [navBar setNavigationBarBlurEffectiveWithStyle:UIBlurEffectStyleDark]; // 毛玻璃效果，更多样式自选
　　（四）设置左侧导航按钮
　　1.设置左侧导航按钮方式一：  //导航左侧按钮 navBar.backButtonTitle = @＂取消＂; navBar.backTitleLabel.font = [UIFont systemFontOfSize:16.0]; navBar.backButtonTitleColor = [UIColor orangeColor]; navBar.backButtonImage = [UIImage imageNamed:@＂back_button@2x＂]; [navBar addSubview:navBar.leftItem];
　　2.设置左侧导航按钮，自行关联事件方式二，与方式一冲突，两者选其一。  //自行关联事件方式，与上述属性设置冲突。 //image和title两者选其一 [navBar setNavigationBarLeftItemWithImage:[UIImage imageNamed:@＂back_button@2x＂]target:self action:@selector(leftItemImageClick)]; [navBar setNavigationBarLeftItemWithTitle:@＂取消＂ target:self action:@selector(leftItemTitleClick)];
　　（五）设置导航栏标题
　　1.设置导航栏标题方式一:  //设置导航栏标题 navBar.title = @＂标题＂; navBar.titleColor = [UIColor redColor]; navBar.titleLabel.font = [UIFont systemFontOfSize:14.0];
　　2.设置导航栏标题，AUDoubleTitleView双标题titleView方式二：  //设置双标题titleView AUDoubleTitleView *titleView = [[AUDoubleTitleView alloc]initWithTitle:@＂主标题＂ detailTitle:@＂副标题＂]; navBar.titleView = titleView; //这里使用了mPaaS下双标题UI，也可自行实现titleView
　　（六）设置导航栏右侧按钮
　　1.单个右侧按钮
　　（1）设置单个按钮方式一：  //设置导航右侧按钮 navBar.rightItemTitle = @＂菜单＂; navBar.rightItemTitleColor = [UIColor blackColor]; //image和title两者选其一 navBar.rightItemImage = [UIImage imageNamed:@＂rightTT@2x＂];
　　（2）设置单个按钮方式二：  //自行关联事件方式 //image和title两者选其一 [navBar setNavigationBarRightItemWithTitle:@＂菜单＂ target:self action:@selector(rightItemTitleClick)]; [navBar setNavigationBarRightItemWithImage:[UIImage imageNamed:@＂rightTT@2x＂] target:self action:@selector(rightItemImageClick)];
　　2.深度自定义单、多个右侧按钮
　　深度自定义右侧按钮、文字、大小、图片，自行关联事件。  //深度自定义右侧按钮、文字、大小、图片、关联事件 AUButton *button = [AUButton buttonWithStyle:AUButtonStyleNone title:@＂右一＂ target:self action:@selector(rightItemTitleClick)]; button.titleLabel.font = [UIFont systemFontOfSize:16.0]; [button setTitleColor:[UIColor redColor] forState:UIControlStateNormal];      AUButton *button1 = [AUButton buttonWithStyle:AUButtonStyleNone]; [button1 setImage:[UIImage imageNamed:@＂rightTT@2x＂] forState:UIControlStateNormal]; navBar.rightItemList = @[button,button1];
　　作者：阿里云 mPaaS TAM 团队（石鹏飞 荣阳）
　　原文链接：http://click.aliyun.com/m/1000298581/
　　本文为阿里云原创内容，未经允许不得转载。