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 codeNote: 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 codeAfter 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 code2. 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 codeIf 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 codeNative 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 codeListen 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 codeNative 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 codeThe 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 codeNative 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 code2. 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 codeNote:
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 code2. 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 codeNative 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 codeCreate a navBarView
-
Create AUCustomNavigationBar initialization method must be navigationBarForCurrentVC: otherwise set the button is invalid.
-
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 code2. 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 code2. 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 code2. 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 codeAuthor: Ali Cloud mPaaS TAM team (Shi Pengfei Rongyang)
E.N.D.
Click here to learn more about mPaaS