写点什么

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

发布于: 2 小时前
技术干货 | 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 自定义导航栏

(一)隐藏原生导航栏

自定义导航栏,要先隐藏原生导航栏。


//隐藏容器类navBarself.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];//设置给容器VCself.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 方式二:

//设置双标题titleViewAUDoubleTitleView *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 详情

发布于: 2 小时前阅读数: 2
用户头像

App 开发、测试、运营及运维一站式解决方案 2020.08.14 加入

源于蚂蚁集团,致力于提供高效、灵活、稳定的移动研发、管理平台。

评论

发布
暂无评论
技术干货 | Native 页面下如何实现导航栏的定制化开发?