Add a row as a selection indicator in UITabbarItem in Swift

Question

I want to use the thick line at the bottom of UITabbarItems as an indicator of choice. Due to the fact that the application should work on different phones, I can not use the image as an indicator of choice. Therefore, I think that for this you need to use Swift. (The line should be 1/3 of the width of the page).

I tried to use UITabBarItem.appearance() , but to no avail.

Answer 1

I solved my problem.

Features of this tiny piece of code:

• dynamic width
• he is animated

• it is much more customizable for future functions

   class FirstViewController: UIViewController { let rectShape = CAShapeLayer() let indicatorHeight: CGFloat = 5 var indicatorWidth: CGFloat! let indicatorBottomMargin: CGFloat = 2 let indicatorLeftMargin: CGFloat = 2 override func viewDidLoad() { super.viewDidLoad() // setup tabbar indicator rectShape.fillColor = UIColor.redColor().CGColor indicatorWidth = view.bounds.maxX / 2 // count of items self.tabBarController!.view.layer.addSublayer(rectShape) self.tabBarController?.delegate = self // initial position updateTabbarIndicatorBySelectedTabIndex(0) } func updateTabbarIndicatorBySelectedTabIndex(index: Int) -> Void { let updatedBounds = CGRect( x: CGFloat(index) * (indicatorWidth + indicatorLeftMargin), y: view.bounds.maxY - indicatorHeight, width: indicatorWidth - indicatorLeftMargin, height: indicatorHeight) let path = CGPathCreateMutable() CGPathAddRect(path, nil, updatedBounds) rectShape.path = path } } extension FirstViewController: UITabBarControllerDelegate { func tabBarController(tabBarController: UITabBarController, didSelectViewController viewController: UIViewController) { updateTabbarIndicatorBySelectedTabIndex(tabBarController.selectedIndex) } } 

Answer 2

You can do this by adding a custom image to be created in your code, prior to selectionIndicatorImage on your UITabBar object. For example, you can create an extension class for UIImage as follows:

 extension UIImage { func createSelectionIndicator(color: UIColor, size: CGSize, lineWidth: CGFloat) -> UIImage { UIGraphicsBeginImageContextWithOptions(size, false, 0) color.setFill() UIRectFill(CGRectMake(0, size.height - lineWidth, size.width, lineWidth)) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image } } 

And name it in the first loaded ViewController as follows:

 class FirstViewController: UIViewController { override func viewDidLoad() { super.viewDidLoad() let tabBar = self.tabBarController!.tabBar tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(UIColor.blueColor(), size: CGSizeMake(tabBar.frame.width/CGFloat(tabBar.items!.count), tabBar.frame.height), lineWidth: 2.0) } override func didReceiveMemoryWarning() { super.didReceiveMemoryWarning() // Dispose of any resources that can be recreated. } } 

In this case, the result will be like this:

Answer 3

Swift 3:

 extension UIImage { func createSelectionIndicator(color: UIColor, size: CGSize, lineWidth: CGFloat) -> UIImage { UIGraphicsBeginImageContextWithOptions(size, false, 0) color.setFill() UIRectFill(CGRect(origin: CGPoint(x: 0,y :size.height - lineWidth), size: CGSize(width: size.width, height: lineWidth))) let image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() return image! } } override func viewDidLoad() { super.viewDidLoad() let tabBar = self.tabBarController!.tabBar tabBar.selectionIndicatorImage = UIImage().createSelectionIndicator(color: UIColor.blue, size: CGSize(width: tabBar.frame.width/CGFloat(tabBar.items!.count), height: tabBar.frame.height), lineWidth: 2.0) }