All Products
Search
Document Center

Customize the navigation bar for HTML5 pages

Last Updated: Feb 24, 2021

Prerequisites

Before customizing the navigation bar style for the HTML5 page, familiarize yourself with related knowledge about the framework navigation bar and HTML5 container, including:

Set the default navigation bar style for all HTML5 pages

Given an app theme, to specify a uniform style for all HTML5 pages, you can customize a style by listening to the events provided by the Nebula container.

  • For details about events supported by the container, see the header file NebulaSDK/NBDefine.h.

    h5

  • The listening event of Customize a plugin needs to be customized:

       
    1. @implementation MPPlugin4TitleView
    2. - (void)pluginDidLoad
    3. {
    4. self.scope = kPSDScope_Scene;
    5. // -- Return area
    6. [self.target addEventListener:kNBEvent_Scene_NavigationItem_Left_Back_Create_Before withListener:self useCapture:NO];
    7. [self.target addEventListener:kNBEvent_Scene_NavigationItem_Left_Back_Create_After withListener:self useCapture:NO];
    8. [self.target addEventListener:kNBEvent_Scene_NavigationItem_Left_Close_Create_Before withListener:self useCapture:NO];
    9. [self.target addEventListener:kNBEvent_Scene_NavigationItem_Left_Close_Create_After withListener:self useCapture:NO];
    10. // -- Title area
    11. [self.target addEventListener:kNBEvent_Scene_TitleView_Create_Before withListener:self useCapture:NO];
    12. [self.target addEventListener:kNBEvent_Scene_TitleView_Create_After withListener:self useCapture:NO];
    13. // -- Control button area
    14. [self.target addEventListener:kNBEvent_Scene_NavigationItem_Right_Setting_Create_Before withListener:self useCapture:NO];
    15. [self.target addEventListener:kNBEvent_Scene_NavigationItem_Right_Setting_Create_After withListener:self useCapture:NO];
    16. [self.target addEventListener:kNBEvent_Scene_NavigationItem_Right_SubSetting_Create_After withListener:self useCapture:NO];
    17. [self.target addEventListener:kNBEvent_Scene_NavigationItem_Right_Setting_Change withListener:self useCapture:NO];
    18. // -- Progress bar
    19. [self.target addEventListener:kNBEvent_Scene_ProgressView_Create_Before withListener:self useCapture:NO];
    20. [self.target addEventListener:kNBEvent_Scene_ProgressView_Create_After withListener:self useCapture:NO];
    21. [super pluginDidLoad];
    22. }
  • Set the styles of the Back button and Close button in the return area:

 
  1. ```
  2. - (void)handleEvent:(PSDEvent *)event
  3. {
  4. [super handleEvent:event];
  5. if ([kNBEvent_Scene_NavigationItem_Left_Back_Create_Before isEqualToString:event.eventType]) {
  6. [event preventDefault];
  7. event.context.currentViewController.navigationItem.leftBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Cancel" style:UIBarButtonItemStylePlain target:self action:@selector(onClickBack)];
  8. }else if ([kNBEvent_Scene_NavigationItem_Left_Back_Create_After isEqualToString:event.eventType]){
  9. //Modify the style of the Back button.
  10. NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems;
  11. if ([leftBarButtonItems count] == 1) {
  12. if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
  13. // Based on the default Back button, modify the Back arrow and text color.
  14. AUBarButtonItem *backItem = leftBarButtonItems[0];
  15. backItem.backButtonColor = [UIColor greenColor];
  16. backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];
  17. // Hide the Back arrow.
  18. // backItem.hideBackButtonImage = YES;
  19. // Hide the Back text: Set the text to transparent and retain the s click area of the Back button.
  20. // backItem.titleColor = [UIColor clearColor];
  21. }
  22. }
  23. }else if ([kNBEvent_Scene_NavigationItem_Left_Close_Create_Before isEqualToString:event.eventType]){
  24. // // Hide the Close button.
  25. // [event preventDefault];
  26. // NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event;
  27. // UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
  28. // button.frame = CGRectMake(0, 0, 44, 44);
  29. // button.backgroundColor = [UIColor greenColor];
  30. // [button setTitle:@"Close" forState:UIControlStateNormal];
  31. // itemEvent.customView = button;
  32. }else if ([kNBEvent_Scene_NavigationItem_Left_Close_Create_After isEqualToString:event.eventType]){
  33. // // Modify the style of the Close button.
  34. // [event preventDefault];
  35. // NBNavigationItemLeftCloseEvent *itemEvent = (NBNavigationItemLeftCloseEvent *)event;
  36. // UIButton *closeButton = (UIButton *)itemEvent.customView;
  37. // [closeButton setTitle:@"Close" forState:UIControlStateNormal];
  38. // [closeButton setTitleColor:[UIColor greenColor] forState:UIControlStateNormal];
  39. }
  40. }
  41. ```
  • Set the title style of an HTML5 page:
 
  1. if ([kNBEvent_Scene_TitleView_Create_Before isEqualToString:event.eventType]) {
  2. // Rewrite the style of TitleView.
  3. NBNavigationTitleViewEvent *e = (id)event;
  4. [e preventDefault];
  5. }else if ([kNBEvent_Scene_TitleView_Create_After isEqualToString:event.eventType]) {
  6. // Modify the created TitleView style.
  7. NBNavigationTitleViewEvent *e = (id)event;
  8. [[e.titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
  9. [[e.titleView mainTitleLabel] setTextColor:[UIColor greenColor]];
  10. [e.titleView mainTitleLabel].lineBreakMode = NSLineBreakByTruncatingMiddle;
  11. }
  • Set the style of the OptionMenu control button:
 
  1. if ([kNBEvent_Scene_NavigationItem_Right_Setting_Create_After isEqualToString:event.eventType] || [kNBEvent_Scene_NavigationItem_Right_SubSetting_Create_After isEqualToString:event.eventType]) {
  2. // Modify the created RightBarItem style.
  3. NBNavigationItemRightSettingEvent *settingEvent = (id)event;
  4. settingEvent.adjustsWidthToFitText = YES;
  5. settingEvent.maxWidth = [UIScreen mainScreen].bounds.size.width / 3.0f;
  6. UIButton *button = settingEvent.customView;
  7. button.titleLabel.font = [UIFont systemFontOfSize:14.0f];
  8. CGRect frame = CGRectMake(0, 0, 22, 22);
  9. button.frame = frame;
  10. [button setTitleColor:[UIColor blackColor] forState:UIControlStateNormal];
  11. if (!CGSizeEqualToSize(button.bounds.size, frame.size)) {
  12. button.frame = frame;
  13. }
  14. }
  • Set the style of the progress bar displayed when an HTML5 page is loaded:
 
  1. if([kNBEvent_Scene_ProgressView_Create_After isEqualToString:event.eventType]){
  2. NBProgressViewEvent *progressEvent = (NBProgressViewEvent *)event;
  3. id<NBProgressViewProtocol> progressView = progressEvent.progressView;
  4. [progressView setProgressTintColor:[UIColor greenColor]];
  5. }

Customize the navigation bar style of an HTML5 page

You can customize the navigation bar style of an HTML5 page before the page is loaded or after the page is opened.

  • Before the page is loaded: Perform the following steps to customize the navigation bar on the basis of the default navigation bar style.

    1. When the current HTML5 page is loaded, customize startup parameters and specify a customization method.

      • For details about transferring custom startup parameters for switching from one HTML5 page to another HTML5 page, see Open a new page and Start other apps.
      • For details about the method for transferring custom startup parameters for switching from a native page to an HTML5 page, see the following code:
           
      1. #pragma mark: the custom parameter to be passed when you open an HTML5 page. The base class of the HTML5 page will read the parameter to implement your settings of whether to hide the navigation pane.
      2. - (void)gotoHideNavigator
      3. {
      4. // Open an HTML5 page and hide the navigation bar.
      5. [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": @"https://tech.antfin.com", @"showTitleBar":@NO,@"transparentTitle":@"auto"}];
      6. }
      7. - (void)gotoShowNavigator
      8. {
      9. // Open an HTML5 page and show the navigation bar.
      10. [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": @"https://tech.antfin.com", @"showTitleBar":@YES}];
      11. }
      12. - (void)gotoTransparency
      13. {
      14. // Open an HTML5 page and set the navigation bar to transparent.
      15. [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": @"https://tech.antfin.com", @"transparentTitle":@"auto"}];
      16. }
      17. - (void)gotoUpdateBackgroundColor
      18. {
      19. // Modify the background color of the navigation bar.
      20. [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": @"https://tech.antfin.com", @"titleBarColor":@"16775138"}];
      21. }
      22. - (void)gotoUpdateStatusBarStyle
      23. {
      24. // Modify the color of the status bar.
      25. [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
      26. }
      27. - (void)gotoUpdateBackTitleColor
      28. {
      29. // Modify the default text and color of the Back button.
      30. [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": @"https://tech.antfin.com", @"backButtonColor":@"ff0000"}];
      31. }
      32. - (void)gotoUpdateTitleColor
      33. {
      34. // Modify the title color.
      35. [[MPNebulaAdapterInterface shareInstance] startH5ViewControllerWithParams:@{@"url": @"https://tech.antfin.com", @"titleColor":@"ff0000"}];
      36. }
    2. Handle the HTML5 base class. In the viewWillAppear method of the base class, call the native API method based on the transferred startup parameters to modify the navigation bar style.

           
      1. - (void)viewWillAppear:(BOOL)animated
      2. {
      3. [super viewWillAppear:animated];
      4. // WebView of the current page.
      5. UIWebView *webView = (UIWebView *)self.psdContentView;
      6. NSLog(@"[mpaas] webView: %@", webView);
      7. // Startup parameters of the current page.
      8. NSDictionary *expandParams = self.psdScene.createParam.expandParams;
      9. NSLog(@"[mpaas] expandParams: %@", expandParams);
      10. if ([expandParams count] > 0) {
      11. [self customNavigationBarWithParams:expandParams];
      12. }
      13. }
      14. - (void)customNavigationBarWithParams:(NSDictionary *)expandParams
      15. {
      16. // Customize the background color of the navigation bar.
      17. NSString *titleBarColorString = expandParams[@"titleBarColor"];
      18. if ([titleBarColorString isKindOfClass:[NSString class]] && [titleBarColorString length] > 0) {
      19. UIColor *titleBarColor = [UIColor colorFromHexString:titleBarColorString];
      20. [self.navigationController.navigationBar setNavigationBarStyleWithColor:titleBarColor translucent:NO];
      21. [self.navigationController.navigationBar setNavigationBarBottomLineColor:titleBarColor];
      22. }
      23. // Set whether to hide the navigation bar, which is not hidden by default. After the navigation pane is set to be hidden, the WebView needs to be displayed in full-screen mode.
      24. NSString *showTitleBar = expandParams[@"showTitleBar"];
      25. if (showTitleBar && ![showTitleBar boolValue]) {
      26. self.options.showTitleBar = NO;
      27. [self.navigationController setNavigationBarHidden:YES];
      28. // Adjust the position of the WebView.
      29. UIWebView *webView = (UIWebView *)[self psdContentView];
      30. CGRect frame = webView.frame;
      31. frame.origin.y = [[UIApplication sharedApplication] statusBarFrame].size.height;
      32. frame.size.height -= [[UIApplication sharedApplication] statusBarFrame].size.height;
      33. webView.frame = frame;
      34. self.automaticallyAdjustsScrollViewInsets = NO;
      35. }
      36. // Set whether the navigation bar is transparent. The navigation bar is not transparent by default. After the navigation pane is set to transparent, the WebView needs to be displayed in full-screen mode.
      37. NSString *transparentTitle = expandParams[@"transparentTitle"];
      38. if ([transparentTitle isEqualToString:@"always"] || [transparentTitle isEqualToString:@"auto"]) {
      39. // The navigation bar and bottom line become transparent.
      40. UIColor *clearColor = [UIColor clearColor] ;
      41. [self.navigationController.navigationBar setNavigationBarTranslucentStyle];
      42. [self.navigationController.navigationBar setNavigationBarStyleWithColor:clearColor translucent:YES];
      43. // Adjust the position of the WebView.
      44. self.edgesForExtendedLayout = UIRectEdgeAll;
      45. if (@available(iOS 11.0, *)) {
      46. UIWebView *wb = (UIWebView *)[self psdContentView];
      47. wb.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
      48. }else{
      49. self.automaticallyAdjustsScrollViewInsets = NO;
      50. }
      51. }
      52. // Modify the default text and color of the Back button.
      53. NSString *backButtonColorString = expandParams[@"backButtonColor"];
      54. if ([backButtonColorString isKindOfClass:[NSString class]] && [backButtonColorString length] > 0) {
      55. UIColor *backButtonColor = [UIColor colorFromHexString:backButtonColorString];
      56. NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;
      57. if ([leftBarButtonItems count] == 1) {
      58. if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
      59. AUBarButtonItem *backItem = leftBarButtonItems[0];
      60. backItem.titleColor = backButtonColor;
      61. backItem.backButtonColor = backButtonColor;
      62. }
      63. }
      64. }
      65. // Set the title color.
      66. NSString *titleColorString = expandParams[@"titleColor"];
      67. if ([titleColorString isKindOfClass:[NSString class]] && [titleColorString length] > 0) {
      68. UIColor *titleColor = [UIColor colorFromHexString:titleColorString];
      69. id<NBNavigationTitleViewProtocol> titleView = self.navigationItem.titleView;
      70. [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
      71. [[titleView mainTitleLabel] setTextColor:titleColor];
      72. }
      73. }
  • After the page is opened: Modify the navigation bar style dynamically during user operation. Call the native API method to modify the style through a custom JSAPI.

    • Customize a JSAPI to handle the navigation bar style of the current page.
    • Handle the native navigation bar in the JSAPI based on the API provided in Customize the navigation bar style of an HTML5 page.

           
      1. - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback: (PSDJsApiResponseCallbackBlock)callback
      2. {
      3. [super handler:data context:context callback:callback];
      4. UIViewController *currentVC = context.currentViewController;
      5. currentVC.navigationItem.titleView = [[AUDoubleTitleView alloc] initWithTitle:@"Title" detailTitle:@"Subtitle"];
      6. callback(@{@"success":@YES});
      7. }