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

Posted 2021-10-27 阿里云开发者

简介：通过不同实际场景的描述，供大家参考完成 Native 页面的定制化开发。

很多 mPaaS Coder 在接入 H5 容器后都会对容器的导航栏进行深度定制，本文旨在通过不同实际场景的描述，供大家参考完成 Native 页面的定制化开发。

欢迎关注 mPaaS 公众号，下期推文，我们将为大家介绍 jsapi 下如何动态修改导航栏，敬请期待🤞🏻

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<NBSession *> *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<NBNavigationTitleViewProtocol> 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

1. 创建 AUCustomNavigationBar 初始化方法必须要 navigationBarForCurrentVC: 否则按钮设置无效。
2. 赋值给 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 团队（石鹏飞 荣阳）

E · N · D

---

点击这里了解更多 mPaaS 详情

原文链接：https://developer.aliyun.com/article/792497?

版权声明：本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。