All Products
Search
Document Center

Customize the iOS navigation bar

Last Updated: Mar 10, 2021

Introduction

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. This topic includes:

Basic concepts

Distribution of navigation bar elements

Navigation bar elements are mainly distributed in three areas. Generally, navigation bar customization involves modifying these areas.Navigation bar element.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.

    Navigation bar structure

  • 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).

    Navigation bar structure -UI.png

  • 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 DTViewControoler, including the native and H5 pages.

  • The default theme of the app created based on the mPaaS framework is characterized by a white background, black text, and blue button.

    ddd

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 methodau_defaultTheme_extraInfo.png
    • Sample code

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

      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 methodau_default_backButtonImg
    • Sample code

      1. @implementation AUBarButtonItem (CGBBarButtonItem)
      2. + (UIImage *)au_default_backButtonImg
      3. {
      4. // Customize the Back icon
      5. return APCommonUILoadImage(@"back_button_normal_white");
      6. }
      7. @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 methodDTNavigationBarAppearanceProtocol
    • Sample code

      1. #pragma mark DTNavigationBarAppearanceProtocol: Modify the navigation bar style when entering the page.
      2. - (UIColor *)opaqueNavigationBarColor
      3. {
      4. // Set the background color of the navigation bar to red for the current page .
      5. return [UIColor redColor];
      6. // // Set the navigation bar to transparent for the current page
      7. // return [UIColor colorWithRGB:0xff0000 alpha:0];
      8. }
      9. - (BOOL)autohideNavigationBar
      10. {
      11. // Set whether to hide the navigation bar for the current page
      12. return NO;
      13. }
      14. - (UIStatusBarStyle)customStatusBarStytle
      15. {
      16. // Set the status bar style for the current page
      17. return UIStatusBarStyleDefault;
      18. }
      19. - (UIColor *)customNavigationBarBackButtonTitleColor
      20. {
      21. // Set the text color of the Back button for the current page
      22. return [UIColor greenColor];
      23. }
      24. - (UIImage *)customNavigationBarBackButtonImage
      25. {
      26. // Set the Back icon for the current page.
      27. return APCommonUILoadImage(@"back_button_normal_white");
      28. }
      29. - (UIColor *)customNavigationBarTitleColor
      30. {
      31. // Set the title color for the current page.
      32. return [UIColor greenColor];
      33. }
  • 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.

      1. - (void)gotoHideNavigator
      2. {
      3. // Hide the navigation bar
      4. [self.navigationController.navigationBar setHidden:YES];
      5. }
      6. - (void)gotoShowNavigator
      7. {
      8. // Show the navigation bar
      9. [self.navigationController.navigationBar setHidden:NO];
      10. }
      11. - (void)gotoTransparency
      12. {
      13. // Set the navigation bar to transparent
      14. [self.navigationController.navigationBar setNavigationBarTranslucentStyle];
      15. }
      16. - (void)gotoUpdateBackgroundColor
      17. {
      18. // Modify the background color of the navigation bar
      19. [self.navigationController.navigationBar setNavigationBarStyleWithColor:[UIColor whiteColor] translucent:NO];
      20. [self.navigationController.navigationBar setNavigationBarBottomLineColor:[UIColor whiteColor]];
      21. }
      22. - (void)gotoUpdateStatusBarStyle
      23. {
      24. // Modify the status bar color
      25. [[UIApplication sharedApplication] setStatusBarStyle:UIStatusBarStyleLightContent];
      26. }
      • 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.
      1. - (void)gotoUpdateBackTitleColor
      2. {
      3. // Modify the default text color of the Back button
      4. NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;
      5. if ([leftBarButtonItems count] == 1) {
      6. if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
      7. AUBarButtonItem *backItem = leftBarButtonItems[0];
      8. backItem.titleColor = [UIColor blackColor];
      9. }
      10. }
      11. }
      12. - (void)gotoUpdateBackImage
      13. {
      14. // Modify the default arrow style of the Back button
      15. NSArray *leftBarButtonItems = self.navigationItem.leftBarButtonItems;
      16. if ([leftBarButtonItems count] == 1) {
      17. if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
      18. AUBarButtonItem *backItem = leftBarButtonItems[0];
      19. backItem.backButtonImage = APCommonUILoadImage(@"back_button_normal");
      20. }
      21. }
      22. }
      23. - (void)gotoUpdateBackItem
      24. {
      25. // Reset the style of the Back button
      26. self.navigationItem.leftBarButtonItem = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeDelete target:self action:@selector(onClickBack)];
      27. }
      28. - (void)onClickBack
      29. {
      30. [self.navigationController popViewControllerAnimated:YES];
      31. }
      • 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.

      1. - (void)gotoSetOptionMenu
      2. {
      3. // Set a single button on the right side
      4. self.navigationItem.rightBarButtonItem = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeGroupChat target:self action:@selector(onClickRightItem)];
      5. }
      6. - (void)gotoSetTwoOptionMenu
      7. {
      8. // Set two buttons on the right side
      9. AUBarButtonItem *item1 = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeGroupChat target:self action:@selector(onClickRightItem)];
      10. AUBarButtonItem *item2 = [AUBarButtonItem barButtonItemWithImageType:AUBarButtonImageTypeHelp target:self action:@selector(onClickRightItem)];
      11. self.navigationItem.rightBarButtonItems = @[item1, item2];
      12. }
  • 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.

      1. - (UIColor *)opaqueNavigationBarColor
      2. {
      3. // Set the navigation bar to transparent for the current page
      4. return [UIColor colorWithRGB:0xff0000 alpha:0];
      5. }
    • 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 {

      1. // Modify the background color of the navigation bar
      2. [self.navigationController.navigationBar setNavigationBarStyleWithColor:[UIColor whiteColor] translucent:NO];
      3. [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) {

        1. if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
        2. AUBarButtonItem *backItem = leftBarButtonItems[0];
        3. backItem.titleColor = [UIColor blackColor];
        4. }

        }}

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