Introduction: Through the description of different actual scenes for your reference, complete the customized development of Native page.
Welcome to the mPaaS official account and the next tweets. We will introduce how to modify the navigation bar dynamically under jsapi. 🤞🏻
Native modify the return button on the left side of the navigation bar
(1) Modify in the custom NBPluginBase plug-in
1. Customize native BarButtonItem
Listen for kNBEvent_Scene_NavigationItem_Left_Back_Create_Before, set the custom BarButtonItem in this listening event
//Listen for kNBEvent_Scene_NavigationItem_Left_Back_Create_Before, in this listening event: UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 44, 44); button.backgroundColor = [UIColor whiteColor]; [button setTitle:@"cancel" forState:UIControlStateNormal]; button.titleLabel.font = [UIFont systemFontOfSize:14.0]; [button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; event.context.currentViewController.navigationItem.leftBarButtonItem.customView = button;
Note: the custom button in this scheme needs to realize the logic of closing the page by itself.
2. Modify return button
Listen for kNBEvent_Scene_NavigationItem_Left_Back_Create_After, in this listening event, modify the default return button style, including copy color, return arrow, etc. the copy content cannot be modified by default.
//Listen for kNBEvent_Scene_NavigationItem_Left_Back_Create_After, in this listening event:
// Modify return button style
NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems;
if ([leftBarButtonItems count] == 1) {
if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
//Modify the return arrow and copy color based on the default return button
AUBarButtonItem *backItem = leftBarButtonItems[0];
backItem.backButtonColor = [UIColor greenColor];
backItem.titleColor = [UIColor orangeColor];// [UIColor colorFromHexString:@"#00ff00"];
//Hide, show, and return arrows
backItem.hideBackButtonImage = NO;
//backItem.backButtonTitle; Invalid title content change.
// Hide return copy: set the copy to transparent and keep the return button s click area
//backItem.titleColor = [UIColor clearColor];
}
}(2) H5 custom modification in container
1. Method 1: get the user-defined startup parameters in viewWillAppear, and customize the return button according to the parameters.
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// Startup parameters of the current page
NSDictionary *expandParams = self.psdScene.createParam.expandParams;
NSLog(@"[mpaas] expandParams: %@", expandParams);
}After obtaining the startup parameters, the user-defined button is implemented according to the user-defined parameters.
// Modify default return button copy color
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 = @"test";// Back button title
backItem.titleColor = backButtonColor;// Return button text color
backItem.backButtonColor = [UIColor blueColor];// Set arrow color
backItem.hideBackButtonImage = NO;//Hide the return button picture and provide it to the frame
// Return to the button image backItem.backButtonImage; The setting is invalid. It can only be hidden or displayed
}
}
}2. Method 2: the number of AUBarButtonItem buttons in the whole return area can be customized in viewWillAppear:
AUBarButtonItem *backItem = [AUBarButtonItem barButtonItemWithIconFontName:kICONFONT_BACK iconColor:[UIColor lightGrayColor] target:self action:@selector(custBack:)];
AUBarButtonItem *backItem = [AUBarButtonItem backBarButtonItemWithTitle:@"test" 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:@"my" 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];
//Return button event
- (void)custBack:(id)sender{
NSLog(@"back -----");
[self back];
}
//Close all session s
- (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) In the custom NBPluginBase plug-in, the close button needs to be created by yourself
Listen for kNBEvent_Scene_NavigationItem_Left_Close_Create_Before to create a close button in this listening event.
//Listen for kNBEvent_Scene_NavigationItem_Left_Close_Create_Before, in this listening event: // Create close button [event preventDefault]; NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 44, 44); button.backgroundColor = [UIColor whiteColor]; [button setTitle:@"close" forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; itemEvent.customView = button;
Listen for kNBEvent_Scene_NavigationItem_Left_Close_Create_After, modify the style of the close button in this listening event.
//Listen for kNBEvent_Scene_NavigationItem_Left_Close_Create_After, in this listening event: // Modify close button style [event preventDefault]; NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event; UIButton *closeButton = (UIButton *)itemEvent.customView; [closeButton setTitle:@"close" forState:UIControlStateNormal]; [closeButton setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
Native modify navigation bar title
(1) Get the user-defined startup parameters in viewWillAppear, and customize the title according to the parameters
//Open H5 offline package
NSString *appId = @"20190927";
[[MPNebulaAdapterInterface shareInstance]startH5ViewControllerWithNebulaApp:@{@"appId":appId,@"defaultTitle":@"test",@"readTitle":@"NO",@"titleColor":@"ff0000",@"titleFont":@"18.0"}];//Start parameters to set title, copy, color and size;The parameter key values appId, defaultTitle and readTitle here are the framework default and cannot be modified. The other parameter key values are user-defined.
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
// Startup parameters of the current page
NSDictionary *expandParams = self.psdScene.createParam.expandParams;
NSLog(@"[mpaas] expandParams: %@", expandParams);
// Set navigation bar title
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 button on the right side of the navigation bar
(1) User defined modification in NBPluginBase plug-in
1. In NBPluginBase,
Listen for kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before to create a button on the right side of the navigation bar in this listening event.
//Listen for kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before, in this listening event: 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:@"set up" forState:UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [button setBackgroundColor: [UIColor whiteColor]]; settingEvent.customView = button; [event preventDefault];
2. In NBPluginBase
Listen for kNBEvent_Scene_NavigationItem_Right_Setting_Create_After, modify the button on the right side of the navigation bar in this listening event.
//Listen for kNBEvent_Scene_NavigationItem_Right_Setting_Create_After, in this listening event: 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];//Remove the default button image
Note:
1. To customize the button on the right side of the navigation bar in the plug-in, you must set @ {@ "showOptionMenu": @"YES"} in the startup parameters of opening H5 container, otherwise the button on the right side is invalid.
2. It must be in knbevent_ Scene_ NavigationItem_ Right_ Setting_ Create_ Implement [event stopPropagation] in after listening events; Otherwise, the default image of the showOptionMenu button cannot be removed.
(2) H5 custom modification in container
1. Get the user-defined 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)]; //Single button self.navigationItem.rightBarButtonItem = rightItem1; //Multiple buttons self.navigationItem.rightBarButtonItems = @[rightItem1, rightItem2];
(2) Text style:
AUBarButtonItem *titleItem1 = [[AUBarButtonItem alloc]initWithTitle:@"Button" style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed1)]; AUBarButtonItem *titleItem2 = [[AUBarButtonItem alloc]initWithTitle:@"right" style:UIBarButtonItemStylePlain target:self action:@selector(rightBarItemPressed2)]; //Single button self.navigationItem.rightBarButtonItem = rightItem1; //Multiple buttons self.navigationItem.rightBarButtonItems = @[titleItem1, titleItem2];
2. If you want to modify the text size, color and other depth of BarButtonItem, please refer to the following code for customization:
UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 40, 40); [button setTitle:@"my" 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 native navigation bar
To customize the navigation bar, hide the native navigation bar first.
//Hide container class navBar self.options.showTitleBar = NO; //Hide system layer navBar [self.navigationController setNavigationBarHidden:YES];
(2) Create navBarView
- The initialization method of creating AUCustomNavigationBar must be navigationBarForCurrentVC: otherwise, the button setting is invalid.
- Assigned to self.customNavigationBar, the container will automatically adapt the H5 page height, otherwise it needs to adapt the page itself.
//This method is required to create navBarView AUCustomNavigationBar *navBar = [AUCustomNavigationBar navigationBarForCurrentVC:self]; [self.view addSubview:navBar]; //Set to container VC self.customNavigationBar = navBar;
(3) Custom background style
Set the background color, gradient, etc. setNavigationBarBlurEffective sets the ground glass effect, and supports more styles to choose from.
//Set the background color, and the gradient can be set by yourself navBar.backgroundColor = [UIColor lightGrayColor]; [navBar setNavigationBarBlurEffectiveWithStyle:UIBlurEffectStyleDark]; // Ground glass effect, more styles are optional
(4) Set left navigation button
1. Set left navigation button mode 1:
//Navigation left button navBar.backButtonTitle = @"cancel"; 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 to automatically associate the event mode 2. If it conflicts with mode 1, choose one of the two.
//The self associated event mode conflicts with the above property settings. //Choose between image and title [navBar setNavigationBarLeftItemWithImage:[UIImage imageNamed:@"back_button@2x"]target:self action:@selector(leftItemImageClick)]; [navBar setNavigationBarLeftItemWithTitle:@"cancel" target:self action:@selector(leftItemTitleClick)];
(5) Set navigation bar title
1. Set navigation bar Title Mode 1:
//Set navigation bar title navBar.title = @"title"; navBar.titleColor = [UIColor redColor]; navBar.titleLabel.font = [UIFont systemFontOfSize:14.0];
2. Set the navigation bar title, AUDoubleTitleView dual Title titleView mode 2:
//Set double title titleView AUDoubleTitleView *titleView = [[AUDoubleTitleView alloc]initWithTitle:@"Main title" detailTitle:@"Subtitle"]; navBar.titleView = titleView; //The dual Title UI under mPaaS is used here, and titleView can also be implemented by itself
(6) Set the buttons on the right side of the navigation bar
1. Single right button
(1) Set single button mode 1:
//Set navigation right button navBar.rightItemTitle = @"menu"; navBar.rightItemTitleColor = [UIColor blackColor]; //Choose between image and title navBar.rightItemImage = [UIImage imageNamed:@"rightTT@2x"];
(2) Set single button mode 2:
//Self related event mode //Choose between image and title [navBar setNavigationBarRightItemWithTitle:@"menu" target:self action:@selector(rightItemTitleClick)]; [navBar setNavigationBarRightItemWithImage:[UIImage imageNamed:@"rightTT@2x"] target:self action:@selector(rightItemImageClick)];
2. Depth customization sheet and multiple right buttons
Deeply customize the buttons, text, size and pictures on the right to associate events by themselves.
//Depth customization right button, text, size, picture, associated event
AUButton *button = [AUButton buttonWithStyle:AUButtonStyleNone title:@"Right one" 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: Alibaba cloud mPaaS TAM team (Shi Pengfei, Rongyang)
This article is the original content of Alibaba cloud and cannot be reproduced without permission.