Many mPaaS coders will deeply customize the navigation bar of the CONTAINER after accessing the H5 container. This paper aims to complete the customized development of Native pages for reference through the description of different actual scenes.

Welcome to follow the mPaaS official account. Next time, we will introduce how to dynamically modify the navigation bar under JSAPI. Please look forward to 🤞🏻

Native modify navigation bar left return button

(a) custom NBPluginBase plug-in modification

1. Customize the native BarButtonItem

Listen for kNBEvent_Scene_NavigationItem_Left_Back_Create_Before and set custom BarButtonItem in this listen event

// Listen on 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: @ "cancel" forState: UIControlStateNormal]; Button. The titleLabel. The font = [UIFont systemFontOfSize: 14.0]; [button setTitleColor:[UIColor blueColor] forState:UIControlStateNormal]; event.context.currentViewController.navigationItem.leftBarButtonItem.customView = button;Copy the code

Note: This scheme defines the button, which needs to realize the logic of closing the page.

2. Modify the back button

Listen on kNBEvent_Scene_NavigationItem_Left_Back_Create_After, modify the default return button style in this listening event, including text color, return arrow, etc., text content cannot be modified by default.

// Listen on kNBEvent_Scene_NavigationItem_Left_Back_Create_After: / / modify back button style NSArray * leftBarButtonItems = event in the 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"]; / / hide and show the return arrow backItem hideBackButtonImage = NO; //backItem.backButtonTitle; The title content change is invalid. Backitem. titleColor = [UIColor clearColor]; backitem. titleColor = [UIColor clearColor]; }}Copy the code

(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]; / / start the parameters of the current page NSDictionary. * expandParams = self psdScene. CreateParam. ExpandParams; NSLog(@"[mpaas] expandParams: %@", expandParams); }Copy the code

After the startup parameters are obtained, the customized buttons are realized according to the customized 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 = @" test "; Title backitem. titleColor = backButtonColor; Backitem. backButtonColor = [UIColor blueColor]; backButtonColor = [UIColor blueColor]; / / set the arrow color backItem hideBackButtonImage = NO. Backitem.backbuttonimage; backitem.backButtonImage; backitem.backButtonImage; Setting invalid, can only hide or show}}}Copy the code

2. In the second way, you can customize the whole return area AUBarButtonItem button and number 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];Copy the code

If you want to modify the BarButtonItem text size, color and other in-depth customization 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. The titleLabel. The font = [UIFont systemFontOfSize: 14.0 f]; AUBarButtonItem *backItem = [[AUBarButtonItem alloc] initWithCustomView:button];Copy the code
/ / return button event - (void) custBack: (id) sender {NSLog (@ "back -- -- -- -- --"); [self back]; } / / close all session - (void) custClose: (id) sender {NSLog (@ "close -- -- -- -- -- -"); NSArray<NBSession *> *sessions = [[NBContext sharedContext] sessions]; for (NBSession* session in sessions) { [[NBContext sharedContext] exitSession:session animated:YES]; }}Copy the code

Native modify navigation bar left close button

(a) In the custom NBPluginBase plug-in close button to create their own

Listen on kNBEvent_Scene_NavigationItem_Left_Close_Create_Before and create the close button in this listen event.

// Listen on kNBEvent_Scene_NavigationItem_Left_Close_Create_Before, in this listener event: NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event; UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom]; button.frame = CGRectMake(0, 0, 44, 44); button.backgroundColor = [UIColor whiteColor]; [button setTitle: @ "closed" forState: UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; itemEvent.customView = button;Copy the code

Listen on kNBEvent_Scene_NavigationItem_Left_Close_Create_After and modify the close button style in this listen event.

// Listen on kNBEvent_Scene_NavigationItem_Left_Close_Create_After in this listener event: // Change the close button style [event preventDefault]; NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event; UIButton *closeButton = (UIButton *)itemEvent.customView; [closeButton setTitle: @ "closed" forState: UIControlStateNormal]; [closeButton setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];Copy the code

Native modifies the navigation bar title

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

NSString *appId = @"20190927"; [[MPNebulaAdapterInterface ShareInstance] startH5ViewControllerWithNebulaApp: @ {@ "appId" : appId, @ "defaultTitle:" @ "test," @ "readTitle" : @ "NO," @ "titleColor" : @ "ff0000" @ "titleFont:" @ "18.0"}]; // Start parameters set the title text, color, size;Copy the code

The key values appId, defaultTitle, and readTitle cannot be modified by default. Other key values can be customized.

- (void)viewWillAppear:(BOOL)animated { [super viewWillAppear:animated]; / / start the parameters of the current page 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]]; }}Copy the code

Native Modify the right button of the navigation bar

(1) Custom modification in NBPluginBase plug-in

In NBPluginBase,

Listen on kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before to create a button on the right of the navigation bar.

// 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: @ "set" forState: UIControlStateNormal]; [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal]; [button setBackgroundColor: [UIColor whiteColor]]; settingEvent.customView = button; [event preventDefault];Copy the code

2. In the NBPluginBase

Listen on kNBEvent_Scene_NavigationItem_Right_Setting_Create_After to modify the right button in the navigation bar.

// Listen on 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. The titleLabel. The font = [UIFont systemFontOfSize: 14.0 f]; 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 imageCopy the code

Note:

1. To customize the button on the right of the navigation bar in the plug-in, you must set @{@”showOptionMenu”: @”YES”} in the startup parameter of the H5 container; otherwise, the button on the right is invalid.

2. KNBEvent_Scene_NavigationItem_Right_Setting_Create_After must implement [event stopPropagation]; Otherwise the default image of the showOptionMenu button cannot be removed.

(2) Custom modification in H5 container

1. Get the custom startup parameter in viewWillAppear and customize the AUBarButtonItem button according to the parameter.

(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)]; / / a single button on the self. The navigationItem. RightBarButtonItem = rightItem1; / / multiple button self. NavigationItem. RightBarButtonItems = @ [rightItem1 rightItem2];Copy the code

(2) Text style:

AUBarButtonItem * titleItem1 = [[AUBarButtonItem alloc] initWithTitle: @ "button" style: UIBarButtonItemStylePlain target: the self action:@selector(rightBarItemPressed1)]; AUBarButtonItem * titleItem2 = [[AUBarButtonItem alloc] initWithTitle: @ "right" style: UIBarButtonItemStylePlain target: the self action:@selector(rightBarItemPressed2)]; / / a single button on the self. The navigationItem. RightBarButtonItem = rightItem1; / / multiple button self. NavigationItem. RightBarButtonItems = @ [titleItem1 titleItem2];Copy the code

2. If you want to modify the text size and color of BarButtonItem for in-depth customization, 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. The titleLabel. The font = [UIFont systemFontOfSize: 14.0 f]; AUBarButtonItem *rightItem = [[AUBarButtonItem alloc] initWithCustomView:button];Copy the code

Native custom navigation bar

(1) Hide the 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];Copy the code

Create a navBarView

  1. Create AUCustomNavigationBar initialization method must be navigationBarForCurrentVC: otherwise set the button is invalid.

  2. The container assigned to self. Customationbar automatically ADAPTS the H5 page height, otherwise it ADAPTS the page itself.

/ / create navBarView, must want to use this method AUCustomNavigationBar * navBar = [AUCustomNavigationBar navigationBarForCurrentVC: self]. [self.view addSubview:navBar]; // Set it to the container VC self. customationBar = navBar;Copy the code

(3) Custom background style

Set the background color, gradients, etc., setNavigationBarBlurEffective set frosted glass effect, support more variety are optional.

NavBar. BackgroundColor = [UIColor lightGrayColor]; [navBar setNavigationBarBlurEffectiveWithStyle:UIBlurEffectStyleDark]; // Frosted glass effect, more style optionalCopy the code

(4) Set the left navigation button

1. Set the navigation button on the left.

// navbar. backButtonTitle = @" cancel "; NavBar. BackTitleLabel. The font = [UIFont systemFontOfSize: 16.0]; navBar.backButtonTitleColor = [UIColor orangeColor]; navBar.backButtonImage = [UIImage imageNamed:@"back_button@2x"]; [navBar addSubview:navBar.leftItem];Copy the code

2. Set the navigation button on the left to automatically associate events with mode 2 or conflict with mode 1.

// The self-associated event mode conflicts with the above property Settings. / / the image and title both choose [navBar setNavigationBarLeftItemWithImage: [UIImage imageNamed: @ "back_button @ 2 x"] target: the self action:@selector(leftItemImageClick)]; [navBar setNavigationBarLeftItemWithTitle: @ "cancel" target: self action: @ the selector (leftItemTitleClick)];Copy the code

(5) Set the navigation bar title

1. Set the navigation bar title method 1:

// set the navigation bar title to @" title "; navBar.titleColor = [UIColor redColor]; NavBar. TitleLabel. The font = [UIFont systemFontOfSize: 14.0];Copy the code

2. Set the title of the navigation bar, AUDoubleTitleView

// Set titleView AUDoubleTitleView *titleView = [[AUDoubleTitleView alloc]initWithTitle:@" detailTitle "]; navBar.titleView = titleView; // We use the mPaaS dual title UI, and we can also implement titleView ourselvesCopy the code

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

1. A single button on the right

(1) Setting a single button Mode 1:

// Set navigation right button navbar. rightItemTitle = @" menu "; navBar.rightItemTitleColor = [UIColor blackColor]; Navbar. rightItemImage = [UIImage imageNamed:@"rightTT@2x"];Copy the code

(2) Setting a single button Mode 2:

/ / / / to correlate events way both the image and title choose [navBar setNavigationBarRightItemWithTitle: @ "menu" target: the self action:@selector(rightItemTitleClick)]; [navBar setNavigationBarRightItemWithImage:[UIImage imageNamed:@"rightTT@2x"] target:self action:@selector(rightItemImageClick)];Copy the code

2. Customize one or multiple right buttons in depth

You can customize the buttons, text, size, and picture on the right in depth.

/ / depth custom button on the right side, text, size, pictures, related events AUButton * button = [AUButton buttonWithStyle: AUButtonStyleNone title: @ "right" target: the self action:@selector(rightItemTitleClick)]; Button. The titleLabel. The 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];Copy the code

Author: Ali Cloud mPaaS TAM team (Shi Pengfei Rongyang)

E.N.D.

Click here to learn more about mPaaS