Technical dry goods | How to realize the customized development of the navigation bar under the Native page?

Introduction to completes the customized development of Native pages through the description of different actual scenes for your reference.

Many mPaaS Coders will deeply customize the navigation bar of the container after connecting to the H5 container. This article aims to complete the customized development of the Native page through the description of different actual scenarios for your reference.

Welcome to pay attention to the mPaaS official account. In the next tweet, we will introduce how to dynamically modify the navigation bar under jsapi, so stay tuned 🤞🏻

Native modify the return button on the left side of the navigation bar

(1) Modify in custom NBPluginBase plug-in

1. Customize native BarButtonItem

Monitor kNBEvent\_Scene\_NavigationItem\_Left\_Back\_Create\_Before, set a custom BarButtonItem in this listening event

//监听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;

Note: This program customizes the button, you need to implement the logic of closing the page by yourself.

2. Modify the back button

Monitor kNBEvent\_Scene\_NavigationItem\_Left\_Back\_Create\_After, modify the default back button style in this listening event, including copy color, return arrow, etc. The copy content cannot be modified by default.

//监听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];
    }
}

(2) Custom modification in H5 container

1. Method 1: Obtain custom startup parameters in viewWillAppear, and customize the return button according to the parameters.

- (void)viewWillAppear:(BOOL)animated {
    [super viewWillAppear:animated];
    // 当前页面的启动参数
    NSDictionary *expandParams = self.psdScene.createParam.expandParams;
    NSLog(@"[mpaas] expandParams: %@", expandParams);
}

After obtaining the startup parameters, implement a custom button based on the custom parameters.

// 修改默认返回按钮文案颜色
    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. Method two, you can customize the number of AUBarButtonItem buttons in the entire return area in viewWillAppear:

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

If you want to modify the text size, color and other depth customization of BarButtonItem, you can refer to the following code:

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 modify the close button on the left side of the navigation bar

(1) The close button in the custom NBPluginBase plug-in needs to be created by yourself

Monitor kNBEvent\_Scene\_NavigationItem\_Left\_Close\_Create\_Before, and create a close button in this listening event.

//监听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;

Monitor kNBEvent\_Scene\_NavigationItem\_Left\_Close\_Create\_After, modify the close button style in this listening event.

//监听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 modify the title of the navigation bar

(1) Obtain custom startup parameters in viewWillAppear, and customize the title according to the parameters

//打开H5离线包
NSString *appId = @"20190927";
    [[MPNebulaAdapterInterface shareInstance]startH5ViewControllerWithNebulaApp:@{@"appId":appId,@"defaultTitle":@"测试",@"readTitle":@"NO",@"titleColor":@"ff0000",@"titleFont":@"18.0"}];//启动参数设置标题文案、颜色、大小;

The key values of the parameters appId, defaultTitle, and readTitle here are not modifiable by default by the framework, and the key values of the remaining parameters are customizable.

- (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 modify the button on the right side of the navigation bar

(1) Custom modification in NBPluginBase plug-in

1. In NBPluginBase,

Monitor kNBEvent\_Scene\_NavigationItem\_Right\_Setting\_Create\_Before, and create a button on the right side of the navigation bar in this listening event.

//监听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. In NBPluginBase

Monitor kNBEvent\_Scene\_NavigationItem\_Right\_Setting\_Create\_After, modify the button on the right side of the navigation bar in this listening event.

//监听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];//去掉默认按钮图片

Note:

1. To customize the buttons on the right side of the navigation bar in the plug-in, you must set @{@"showOptionMenu": @"YES"} in the startup parameters of opening the H5 container. Otherwise, setting the right button is invalid.

2. [event stopPropagation] must be implemented in the kNBEvent\_Scene\_NavigationItem\_Right\_Setting\_Create\_After listening event; otherwise, the default picture of the showOptionMenu button cannot be removed.

(2) Custom modification in H5 container

1. Obtain custom startup parameters in viewWillAppear, and customize the AUBarButtonItem button according to the parameters.

(1) Picture style:

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) Text style:

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. If you want to modify the text size, color and other depth customization of BarButtonItem, please refer to the following code:

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 custom navigation bar

(1) Hide the native navigation bar

To customize the navigation bar, first hide the native navigation bar.

//隐藏容器类navBar
self.options.showTitleBar = NO;
//隐藏系统层navBar
[self.navigationController setNavigationBarHidden:YES];

(Two) create navBarView

1. The initialization method to create AUCustomNavigationBar must be navigationBarForCurrentVC: otherwise the button setting is invalid.
2. The container assigned to self.customNavigationBar will automatically adapt to the height of the H5 page, otherwise the page needs to be adapted by itself.

//创建navBarView，必须要用此方法
AUCustomNavigationBar *navBar = [AUCustomNavigationBar navigationBarForCurrentVC:self];
[self.view addSubview:navBar];
//设置给容器VC
self.customNavigationBar = navBar;

(Three) custom background style

Set the background color, gradient color, etc., setNavigationBarBlurEffective set the frosted glass effect, and support more styles to choose from.

//设置背景颜色，渐变色可自行设置
navBar.backgroundColor = [UIColor lightGrayColor];
[navBar setNavigationBarBlurEffectiveWithStyle:UIBlurEffectStyleDark]; // 毛玻璃效果，更多样式自选

(4) Set the left navigation button

1. Set the left navigation button method 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. Set the left navigation button, self-associate event mode two, conflict with mode one, choose one of the two.

//自行关联事件方式，与上述属性设置冲突。
//image和title两者选其一
[navBar setNavigationBarLeftItemWithImage:[UIImage imageNamed:@"back_button@2x"]target:self action:@selector(leftItemImageClick)];
[navBar setNavigationBarLeftItemWithTitle:@"取消" target:self action:@selector(leftItemTitleClick)];

(5) Set the title of the navigation bar

1. Set the navigation bar title method 1:

//设置导航栏标题
navBar.title = @"标题";
navBar.titleColor = [UIColor redColor];
navBar.titleLabel.font = [UIFont systemFontOfSize:14.0];

2. Set the title of the navigation bar, AUDoubleTitleView double title titleView method two:

//设置双标题titleView
AUDoubleTitleView *titleView = [[AUDoubleTitleView alloc]initWithTitle:@"主标题" detailTitle:@"副标题"];
navBar.titleView = titleView;
//这里使用了mPaaS下双标题UI，也可自行实现titleView

(6) Set the buttons on the right side of the navigation bar

1. Single right button

(1) Set a single button method 1:

//设置导航右侧按钮
navBar.rightItemTitle = @"菜单";
navBar.rightItemTitleColor = [UIColor blackColor];
//image和title两者选其一
navBar.rightItemImage = [UIImage imageNamed:@"rightTT@2x"];

(2) Set a single button method two:

//自行关联事件方式
//image和title两者选其一
[navBar setNavigationBarRightItemWithTitle:@"菜单" target:self action:@selector(rightItemTitleClick)];
[navBar setNavigationBarRightItemWithImage:[UIImage imageNamed:@"rightTT@2x"] target:self action:@selector(rightItemImageClick)];

2. Deep custom single and multiple right buttons

Deeply customize the buttons, text, size, and pictures on the right, and associate events by yourself.

//深度自定义右侧按钮、文字、大小、图片、关联事件
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];

Author of this article: Alibaba Cloud mPaaS TAM team (Shi Pengfei Rongyang)

E · N · D

---

Click here for more details mPaaS

Copyright Notice: content of this article is contributed spontaneously by Alibaba Cloud real-name registered users. The copyright belongs to the original author. The Alibaba Cloud Developer Community does not own its copyright and does not assume corresponding legal responsibilities. For specific rules, please refer to the "Alibaba Cloud Developer Community User Service Agreement" and the "Alibaba Cloud Developer Community Intellectual Property Protection Guidelines". If you find suspected plagiarism in this community, fill in the infringement complaint form to report it. Once verified, the community will immediately delete the suspected infringing content.