Centre the tab titles using UITabBarItem appearance

Question

I'm using the following code to highlight the selected tab title.

  [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], NSForegroundColorAttributeName,nil] forState:UIControlStateNormal];

  [[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor redColor], NSForegroundColorAttributeName, nil] forState:UIControlStateSelected];

The above code works perfectly. Can I modify the above code to increase the font size of the tab title and make it center ?

now the title is at the bottom of the tab. I want the title to be in center — , Jun 08 '16 at 13:29
http://stackoverflow.com/questions/10192665/uitabbaritem-title-position — Teja Nandamuri, Jun 08 '16 at 13:30

Santo · Answer 1 · 2016-06-08T13:31:03.620

0

This Code will help you.

// set the text color for selected state
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor blackColor], NSForegroundColorAttributeName,[UIFont fontWithName:YOUR_FONT_NAME size:YOUR_FONT_SIZE],NSFontAttributeName ,nil] forState:UIControlStateSelected];

// set the text color for unselected state
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor blackColor], NSForegroundColorAttributeName,[UIFont fontWithName:YOUR_FONT_NAME size:YOUR_FONT_SIZE],NSFontAttributeName ,nil] forState:UIControlStateNormal];


//To make title center use below one 
[[self.tabBarController.tabBar.items objectAtIndex:0] setTitlePositionAdjustment:UIOffsetMake(0, 0)];
[[self.tabBarController.tabBar.items objectAtIndex:1] setTitlePositionAdjustment:UIOffsetMake(0, 0)];

//if you have more tabs increase the index

edited Jun 08 '16 at 13:31

answered Jun 08 '16 at 13:24

Santo

1,611
3
17
37

still the title is not centered bro – Jun 08 '16 at 13:26
to move the label vertically set the offset to negative value. – Teja Nandamuri Jun 08 '16 at 13:31
pls refer this answer: http://stackoverflow.com/questions/10192665/uitabbaritem-title-position – Teja Nandamuri Jun 08 '16 at 13:32
wondering for down vote without a comment. people who down votes should make a comment. – Santo Jun 09 '16 at 07:16

score 0 · Accepted Answer · answered Jun 09 '16 at 06:06

Try this:

UITabBarController *tabBarController = (UITabBarController *)self.window.rootViewController;
tabBarController.selectedIndex = 1;
UITabBar *tabBar = tabBarController.tabBar;
UITabBarItem *tabBarItem1 = [tabBar.items objectAtIndex:0];
UITabBarItem *tabBarItem2 = [tabBar.items objectAtIndex:1];
UITabBarItem *tabBarItem3 = [tabBar.items objectAtIndex:3];
UITabBarItem *tabBarItem4 = [tabBar.items objectAtIndex:4];
tabBarItem1.title = @"Tab1"; tabBarItem2.title = @"Tab2";
tabBarItem3.title = @"Tab3"; tabBarItem4.title = @"Tab4";
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: [UIColor whiteColor], NSForegroundColorAttributeName, nil] forState:UIControlStateNormal];
UIColor *titleHighlightedColor = [UIColor colorWithRed:153/255.0 green:192/255.0 blue:48/255.0 alpha:1.0];
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys: titleHighlightedColor, NSForegroundColorAttributeName, nil] forState:UIControlStateHighlighted]; return YES;

score 0 · Answer 3 · edited Nov 10 '21 at 21:12

This solution works for me

let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.alignment = .center
  
  if #available(iOS 13, *) {
     let appearance = tabBarController.tabBar.standardAppearance
     appearance.stackedLayoutAppearance.normal.titleTextAttributes = [
        NSAttributedString.Key.paragraphStyle: paragraphStyle
     ]
     appearance.stackedLayoutAppearance.selected.titleTextAttributes = [
        NSAttributedString.Key.paragraphStyle: paragraphStyle
     ]
  } else {
     if #available(iOS 11, *) {
        UITabBarItem.appearance().setTitleTextAttributes([
           NSAttributedString.Key.paragraphStyle: paragraphStyle
        ], for: .normal)
        UITabBarItem.appearance().setTitleTextAttributes([
           NSAttributedString.Key.paragraphStyle: paragraphStyle
        ], for: .selected)
     }
  }

Centre the tab titles using UITabBarItem appearance

3 Answers3