2

How could I change the background color of only one of the tab buttons in a UITabBar? I want to recreate Instragram's old tabbar design (pictured on top) where the "post picture" tab in the middle has a different background color.

And a follow up to that, is there a way I could make the color appear as a round circle around the icon? Or at that point would I have to use a custom toolbar thats simulated to act as a tabbar?

Tommy K
  • 1,759
  • 3
  • 28
  • 51

1 Answers1

2
    let count = CGFloat(tabBar.items!.count)
    let itemSize = CGSize(width: tabBar.frame.size.width / count, height: tabBar.frame.height)

    for (index, _) in tabBar.items!.enumerate() {
      if index == 2 {
        let xPosition = itemSize.width * CGFloat(index)
        let backgroundColor = UIView.init(frame: CGRect.init(x: xPosition, y: 0, width: itemSize.width, height: itemSize.height))
        backgroundColor.backgroundColor = UIColor.redColor()
        tabBar.insertSubview(backgroundColor, atIndex: 1)
      }
    }

enter image description here

I implemented similar effect not long ago, and the code above is the crucial part.

Update1:

If you also want to change the selected background color of a specific tabBarItem, the code below will do the job. You needs to subclass UITabBarController and override the method tabBar:didSelectItem.

override func tabBar(tabBar: UITabBar, didSelectItem item: UITabBarItem) {
  let index: Int = tabBar.items!.indexOf(item)!
  if index == 2 {
    tabBar.selectionIndicatorImage = UIImage.fromColor(UIColor.greenColor(), size: CGSize.init(width: UIScreen.mainScreen().bounds.size.width/5, height: 49))
  } else {
    tabBar.selectionIndicatorImage = UIImage.fromColor(UIColor.snpPaleblueColor(), size: CGSize.init(width: UIScreen.mainScreen().bounds.size.width/5, height: 49))
  }
  tabBar.setNeedsDisplay()
}

static func fromColor(color: UIColor, size: CGSize) -> UIImage {
  let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
  UIGraphicsBeginImageContext(rect.size)
  let context = UIGraphicsGetCurrentContext()
  CGContextSetFillColorWithColor(context, color.CGColor)
  CGContextFillRect(context, rect)
  let img = UIGraphicsGetImageFromCurrentImageContext()
  UIGraphicsEndImageContext()
  return img
}

Update2:

If you want to change a tabBarItem's image and selectedImage color,use UIImage's method imageWithRenderingMode: example is below.

item.image = UIImage.init(named: "tabBarIcon-white").imageWithRenderingMode(.AlwaysOriginal)
item.selectedImage = UIImage.init(named: "tabBarIcon-blue").imageWithRenderingMode(.AlwaysOriginal)
Benbobo
  • 121
  • 5
  • Could I then also change the tint of the middle button to be different from `self.tabBar.tintColor = UIColor(red: 0/255, green: 150/255, blue: 175/255, alpha: 1.0)` like to a `UIwhiteColor`? – Tommy K Aug 30 '16 at 04:54
  • I updated my answer please have look. – Benbobo Aug 30 '16 at 06:43
  • Hi, thanks for the answer, but you miss understood me. I was talking about changing the color of the icon. In your example above, all the icons in your tabbar are white. I was trying to ask how could I set a specific one (like the middle one) to a different color from the rest of the icons? – Tommy K Aug 31 '16 at 00:23
  • I updated my answer please have a look. – Benbobo Aug 31 '16 at 01:12
  • I'm not sure where the `R` is coming from, I get 'unresolved use of identifier R' – Tommy K Aug 31 '16 at 04:00
  • Sorry i removed the `R` and [R](https://github.com/mac-cain13/R.swift) is a open source third library. – Benbobo Aug 31 '16 at 06:11