All Products
Search
Document Center

Mobile Platform as a Service:Customize the iOS navigation bar

Last Updated:Jul 07, 2023

During app development, it is often required to customize the top navigation bar. This topic describes how to customize the navigation bar on a page created based on the MPaaS framework and including customizing the theme of the app and customizing the navigation bar style for a specific page.

Basic concepts

Distribution of navigation bar elements

Navigation bar elements are mainly distributed in three areas. Generally, navigation bar customization involves modifying these areas.

edit2.png
  1. Back: The Back button control area that is created by the base class of the mPaaS page. The default format is back arrow + “Back”.

  2. Title/Subtitle: The title bar control area, which is not displayed by default. To display this area, call the system method to set the title of the current page.

  3. Option menu: The page menu option area, which is not displayed by default. To display this area, call the system method to set rightNavigationItem for the current page.

Navigation bar structure

  • As shown in the following figure, the default UI structure for apps created based on the mPaaS framework is as follows: window/navigationController > tabViewController > viewController embedded for each tab. In other words, the root of the main window of the app is a UINavigationController object, and the root of UINavigationController is a UITabViewController.导航栏结构 拷贝

  • The preceding UI structure shows that the entire app has only one navigationController globally. Therefore, all pages share the same navigation bar (created by using APNavigationBar by default).屏幕快照 2019-03-11 11.07.26 拷贝

  • For unifying the navigation bar styles of all pages, it is required that in the mPaaS app, all VCs where a page resides must inherit DTViewControler, including the native and HTML5 pages.

  • The default theme of the app created based on the mPaaS framework is characterized by a white background, black text, and blue button.屏幕快照 2019-03-11 11.07.25 拷贝

Customize the theme of the app

Each app has its own theme. Modify the default theme of the mPaaS app as follows:

  • To modify the background color of the navigation bar, back control area, or title control area, rewrite the au_defaultTheme_extraInfo method of the AUThemeManager class and modify the return values of the following keys:

    • API method

      @interface AUThemeManager(AUExtendinfo)
      /* Default theme is set for Alipay client, and is modifiable for independent apps.
      * n this method only need to return a key-value pair different from the default theme. Please use the key defined in AUTheme.h.
      */
      +(NSDictionary *)au_defaultTheme_extraInfo;
      
      @end
      /*
      *  Example
      *  +(NSDictionary*)au_defaultTheme_add_Info
      *  {
      *    NSMutableDictionary *dict = [INSMutableDictionary alloc] init];
      *    dictITITLEBAR_BACKGROUND_COLOR] = AU_COLOR_APP_GREEN; // AUTitleBar background color
      *    dit[TITLEBAR TITLE TEXTCOLOR1 = [UIColor redColor]; // AUTitleBar title color
      *    ...
      *    return dict;
      *  }
      */
    • Sample code

        @implementation AUThemeManager (Portal)
      
      + (NSDictionary *)au_defaultTheme_extraInfo
      {
          NSMutableDictionary *dict = [[NSMutableDictionary alloc] init];
          dict[TITLEBAR_BACKGROUND_COLOR] = @"COLOR(#108EE9,1)"; // Set the background color of the navigation bar
          dict[TITLEBAR_LINE_COLOR] = @"COLOR(#108EE9,1)";       // Set the color of the separation line or sideline at the bottom of the navigation bar
          dict[TITLEBAR_TITLE_TEXTCOLOR] = @"COLOR(#ffffff,1)";  // Set the title text color of the navigation bar
          dict[TITLEBAR_TITLE_TEXTSIZE_BOLD] = @"FONT(18)";      // Set the title text font size of the navigation bar
          dict[TITLEBAR_TEXTCOLOR] = @"COLOR(#ffffff,1)";        // Set the Back button color of the navigation bar
      
          return dict;
      }
      
      @end
      }
      Note

      Note: You must set the color value in the COLOR(#108EE9,1) format, otherwise an error will be returned.

  • To modify the Back button icon in theme configuration, rewrite the au_default_backButtonImg method in the AUBarButtonItem class.

    • API method

      #import "AUUILoadDefine.h"//The program automatically generates.
      #ifdef ANTUI_UI_TitleBar_AUBarButtonltem//The program automatically generates.
      //
      // AUBarButtonltem+AUExtendInfo.h
      // AntUI
      //
      // Copyright © 2017 Alipay. All rights reserved.
      //
      #import "AUBarButtonltem.h"
      
      @interface AUBarButtonltem(AUExtendInfo)
      
      //Default return button is a blue icon for Alipay, and is modifiable for independent apps.
      +(UIImage *)au_default_backButtonlmg;
      
      @end
    • Sample code

      @implementation AUBarButtonItem (CGBBarButtonItem)
      
       + (UIImage *)au_default_backButtonImg
       {
           // Customize the Back icon
           return  APCommonUILoadImage(@"back_button_normal_white");
      
       }
       @end
  • Modify the Back button style and text for all pages.

Customize the navigation bar style for a specific page

In addition to themes, sometimes you need to customize the navigation bar style for the current page, for example, modify the background color or Back button style. mPaaS provides different methods for modification at different times.

  • Before loading a page, to modify the navigation bar color on the basis of the default navigation bar style, implement the method defined in DTNavigationBarAppearanceProtocol and modify the color of the corresponding area.

    • API method

      @protocol DTNavigationBarAppearanceProtocol<NSObject>
      
      @optional
      
      /** Whether this DTViewController needs to automatically hide navigationBar. The default value is NO, If a ViewController in business needs to hide navigationBar, reload this method and return YES.
      **/
      -(BOOL)autohideNavigationBar;
      
      /** If the current VC needs to set a hidden navigation bar as fully transparent, and set the current page with the return copy matching the framework logic., reload this method and return an instance of APCustomerNavigationView.
      -(UIView *)customNavigationBar;
      
      /** If a viewcontroller needs to set its titlebar as opaque and assign a color to the titlebar, rewrite this method and return the expected color.
      * Only for the pushed VC. VC in tabbar can not modify the translucent property of navigationBar.
      */
      -(UIColor *)opaqueNavigationBarColor;
      
      /** 
      * If a viewcontroller needs to modify the style of status bar, rewrite this method and return the expected style.
       */
      - (UIStatusBarStyle)customStatusBarStytle;
      
      /**
       *  If a viewcontroller wants to modify the color of the navigation bar title, please override this method and return the desired color.
       */
      - (UIColor *)customNavigationBarTitleColor;
    • Sample code

      #pragma mark DTNavigationBarAppearanceProtocol: Modify the navigation bar style when entering the page.
      - (UIColor *)opaqueNavigationBarColor
      {
          // Set the background color of the navigation bar to red for the current page .
          return [UIColor redColor];
      
      //    // Set the navigation bar to transparent for the current page
      //    return [UIColor colorWithRGB:0xff0000 alpha:0];
      }
      
      - (BOOL)autohideNavigationBar
      {
          // Set whether to hide the navigation bar for the current page
          return NO;
      }
      
      - (UIStatusBarStyle)customStatusBarStytle
      {
          // Set the status bar style for the current page
          return UIStatusBarStyleDefault;
      }
      
      - (UIColor *)customNavigationBarBackButtonTitleColor
      {
          // Set the text color of the Back button for the current page
          return [UIColor greenColor];
      }
      
      - (UIImage *)customNavigationBarBackButtonImage
      {
          // Set the Back icon for the current page.
          return APCommonUILoadImage(@"back_button_normal_white");
      }
      
      - (UIColor *)customNavigationBarTitleColor
      {
          // Set the title color for the current page.
          return [UIColor greenColor];
      }
  • After a page is opened, you can modify the navigation bar style and the menu button on the right side of the page during your operations. For example, you can make the background color to change gradually when you slide the slider. Modification of the following areas is supported:

    • Background area: Hide/Show the navigation bar, set the navigation bar to transparent, modify the background color of the navigation bar, and modify the color of the status bar.

      - (void)gotoHideNavigator
      {
          // Hide the navigation bar
          [self.navigationController.navigationBar setHidden:YES];
      }
      
      - (void)gotoShowNavigator
      {
          // Show the navigation bar
          [self.navigationController.navigationBar setHidden:NO];
      }
      
      - (void)gotoTransparency
      {
          // Set the navigation bar to transparent
          [self.navigationController.navigationBar setNavigationBarTranslucentStyle];
      }
      
      - (void)gotoUpdateBackgroundColor
      {
          // Modify the background color of the navigation bar
          [self.navigationController.navigationBar setNavigationBarStyleWithColor:[UIColor whiteColor] translucent:NO];
          [self.navigationController.navigationBar setNavigationBarBottomLineColor:[UIColor whiteColor]];
      }
      
      - (void)gotoUpdateStatusBarStyle
      {
          // Modify the status bar color
          [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
      }
      • Back control area: Modify the default text and color of the Back button, modify the default arrow style of the Back button, and reset the style of the Back button.

      - (void)gotoUpdateBackTitleColor
      {
          // Modify the default text color of the Back button
          NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;
          if ([leftBarButtonItems count] == 1) {
              if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
                  AUBarButtonItem *backItem = leftBarButtonItems[0];
                  backItem.titleColor = [UIColor blackColor];
              }
          }
      }
      
      - (void)gotoUpdateBackImage
      {
          // Modify the default arrow style of the Back button
          NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;
          if ([leftBarButtonItems count] == 1) {
              if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
                  AUBarButtonItem *backItem = leftBarButtonItems[0];
                  backItem.backButtonImage = APCommonUILoadImage(@"back_button_normal");
              }
          }
      }
      
      - (void)gotoUpdateBackItem
      {
          // Reset the style of the Back button
          self.navigationItem.leftBarButtonItem = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeDelete target:self action:@selector(onClickBack)];
      }
      
      - (void)onClickBack
      {
          [self.navigationController popViewControllerAnimated:YES];
      }
      • Title control area: Modify the default title color, set the title and subtitle, and enable the title to be displayed as a picture.```

      • (void)gotoUpdateTitleColor{ // Modify the title color [self.navigationController.navigationBar setNavigationBarTitleTextAttributesWithTextColor:[UIColor blackColor]];}

      • (void)gotoTwoTitle{ // Modify the title style: title and subtitle self.navigationItem.titleView = [[AUDoubleTitleView alloc] initWithTitle:@”Title” detailTitle:@”Subtitle”];}

      • (void)gotoTitleImage{ // Modify the title style to picture UIImageView *imageView = [[UIImageView alloc] initWithImage:APCommonUILoadImage(@”ilustration_ap_expection_alert”)]; imageView.frame = CGRectMake(0, 0, self.self.view.width-100, 64); self.navigationItem.titleView = imageView;}```

    • Menu control area: Set a single or multiple menu buttons on the right.

      - (void)gotoSetOptionMenu
      {
          // Set a single button on the right side
          self.navigationItem.rightBarButtonItem = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeGroupChat target:self action:@selector(onClickRightItem)];
      }
      
      - (void)gotoSetTwoOptionMenu
      {
          // Set two buttons on the right side
          AUBarButtonItem *item1 = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeGroupChat target:self action:@selector(onClickRightItem)];
          AUBarButtonItem *item2 = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeHelp target:self action:@selector(onClickRightItem)];
          self.navigationItem.rightBarButtonItems = @[item1, item2];
      }
  • Immersive navigation bar: In immersive mode, the navigation bar is transparent when you access the page, and opaque after you slide to a specified position. The details are as follows:

    • Set the navigation bar to be transparent when you access the page. Rewrite the following API in the VC where the current page resides.

       - (UIColor *)opaqueNavigationBarColor
         {
             // Set the navigation bar to transparent for the current page
             return [UIColor colorWithRGB:0xff0000 alpha:0];
         }
    • After sliding to a specified position, modify the styles of the background area, back area, title area, and menu area of the navigation bar.

        - (void)gotoUpdateBackgroundColor
        {
            // Modify the background color of the navigation bar
            [self.navigationController.navigationBar setNavigationBarStyleWithColor:[UIColor whiteColor] translucent:NO];
            [self.navigationController.navigationBar setNavigationBarBottomLineColor:[UIColor whiteColor]];
        }
      
        - (void)gotoUpdateBackTitleColor
        {
            // Modify the default text color of the Back button
            NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;
            if ([leftBarButtonItems count] == 1) {
                if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
                    AUBarButtonItem *backItem = leftBarButtonItems[0];
                    backItem.titleColor = [UIColor blackColor];
                }
            }
        }
      
        - (void)gotoUpdateTitleColor
        {
            // Modify the title color 
            [self.navigationController.navigationBar setNavigationBarTitleTextAttributesWithTextColor:[UIColor blackColor]];
        }