IOS: how to add underline in UITabBarItem

Question

I work in an application where I need to add underscore in UITabbarItem .

so I would like to add an underline under the selected UITabbarItem by default the iOS UITabbarcontroller .

I already created a subclass of UITabbarcontroller , but did not find a way to add a string to this.

I want to do something like the image below.

If anyone has any ideas, please share this.

Answer 1

Please try this. I once used in my application and hope this helps too.

This is how I programmatically created the tab bar:

  UITabBarController *tab = [[UITabBarController alloc]init]; ViewController1 *v1 = [[ViewController1 alloc]init]; ViewController1 *v2 = [[ViewController1 alloc]init]; ViewController1 *v3 = [[ViewController1 alloc]init]; ViewController1 *v4 = [[ViewController1 alloc]init]; tab.viewControllers = [NSArray arrayWithObjects:v1,v2,v3,v4,nil]; [[tab.tabBar.items objectAtIndex:0]setImage:[UIImage imageNamed:@""]]; [[tab.tabBar.items objectAtIndex:1]setImage:[UIImage imageNamed:@""]]; [[tab.tabBar.items objectAtIndex:2]setImage:[UIImage imageNamed:@""]]; [[tab.tabBar.items objectAtIndex:3]setImage:[UIImage imageNamed:@""]]; int divide = 4; if([UIDevice currentDevice].userInterfaceIdiom ==UIUserInterfaceIdiomPad) divide =6; } UIView *view = [[UIView alloc]initWithFrame:CGRectMake(tab.tabBar.frame.origin.x,tab.tabBar.frame.origin.y, self.view.frame.size.width/divide, 56)]; UIImageView *border = [[UIImageView alloc]initWithFrame:CGRectMake(view.frame.origin.x,view.frame.size.height-6, self.view.frame.size.width/divide, 6)]; border.backgroundColor = "your color"; [view addSubview:border]; [tab.tabBar setSelectionIndicatorImage:[self changeViewToImage:view]]; //This is the method that will draw the underline -(UIImage ) changeViewToImage : (UIView ) viewForImage { UIGraphicsBeginImageContext(viewForImage.bounds.size); [viewForImage.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return img; } 

Answer 2

Code for Swift 3

In the didFininshLaunch call method:

 func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplicationLaunchOptionsKey: Any]?) -> Bool { // Override point for customization after application launch. UITabBar.appearance().selectionIndicatorImage = getImageWithColorPosition(color: UIColor.blue, size: CGSize(width:(self.window?.frame.size.width)!/4,height: 49), lineSize: CGSize(width:(self.window?.frame.size.width)!/4, height:2)) return true } 

Method:

 func getImageWithColorPosition(color: UIColor, size: CGSize, lineSize: CGSize) -> UIImage { let rect = CGRect(x:0, y: 0, width: size.width, height: size.height) let rectLine = CGRect(x:0, y:size.height-lineSize.height,width: lineSize.width,height: lineSize.height) UIGraphicsBeginImageContextWithOptions(size, false, 0) UIColor.clear.setFill() UIRectFill(rect) color.setFill() UIRectFill(rectLine) let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() return image } 

Answer 3

Just put this code in Appdelegate.

 - (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions { // Override point for customization after application launch. UIView *view1 = [[UIView alloc]initWithFrame:CGRectMake([UITabBar appearance].frame.origin.x,[UITabBar appearance].frame.origin.y, [[UIScreen mainScreen] bounds].size.width/3, 56)]; UIImageView *border = [[UIImageView alloc]initWithFrame:CGRectMake(view1.frame.origin.x,view1.frame.size.height-6, [[UIScreen mainScreen] bounds].size.width/3, 6)]; border.backgroundColor = [UIColor colorWithRed:255.0f/255.0f green:105.0f/255.0f blue:84.0f/255.0f alpha:1.0f]; [view1 addSubview:border]; UIImage *img=[self ChangeViewToImage:view1]; [[UITabBar appearance] setSelectionIndicatorImage:img]; [[UITabBar appearance] setTintColor: [UIColor colorWithRed:255.0f/255.0f green:105.0f/255.0f blue:84.0f/255.0f alpha:1.0f]]; return YES; } -(UIImage * ) ChangeViewToImage : (UIView *) viewForImage { UIGraphicsBeginImageContext(viewForImage.bounds.size); [viewForImage.layer renderInContext:UIGraphicsGetCurrentContext()]; UIImage *img = UIGraphicsGetImageFromCurrentImageContext(); UIGraphicsEndImageContext(); return img; } 

Answer 4

In AppDelegate didFininshLaunch method Add global style for UITabbar

 UITabBar.appearance().selectionIndicatorImage = UIImage.getImageWithColorPosition(UIColor.whiteColor(), size: CGSizeMake(kScreenWidth/4, 49), lineSize: CGSizeMake(kScreenWidth/4, 2)) class func getImageWithColorPosition(color: UIColor, size: CGSize, lineSize: CGSize) -> UIImage { let rect = CGRectMake(0, 0, size.width, size.height) let rectLine = CGRectMake(0, size.height-lineSize.height, lineSize.width, lineSize.height) UIGraphicsBeginImageContextWithOptions(size, false, 0) UIColor.clearColor().setFill() UIRectFill(rect) color.setFill() UIRectFill(rectLine) let image: UIImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image } 

EDIT Swift 3

 func getImageWithColorPosition(color: UIColor, size: CGSize, lineSize: CGSize) -> UIImage { let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height) let rectLine = CGRect(x: 0, y: size.height-lineSize.height, width: lineSize.width, height: lineSize.height) UIGraphicsBeginImageContextWithOptions(size, false, 0) UIColor.clear.setFill() UIRectFill(rect) color.setFill() UIRectFill(rectLine) let image = UIGraphicsGetImageFromCurrentImageContext()! UIGraphicsEndImageContext() return image } 

Answer 5

Use this code to add a lower bound to any UIView object, just replace view with your UITabbarItem object:

 CALayer *bottomBorder = [CALayer layer]; bottomBorder.frame = CGRectMake(0, view.frame.size.height - 1, view.frame.size.width - 1, 1); bottomBorder.backgroundColor = [UIColor lightGrayColor].CGColor; [view.layer addSublayer:bottomBorder];