iPhone X selectionIndicatorImage

[SwiftRabbit]

Having an issue trying to set the selectionIndicator Image.

self.tabBar.selectionIndicatorImage = UIImage.imageWithColor(UIColor.black, size: CGSize(width: tabBar.frame.width/CGFloat((tabBar.items?.count)!), height: tabBar.frame.height))

I create an image with a black background and this is what I get:

[albertml]

did you find a solution for this?

[SwiftRabbit]

No, still pending :( (Found another bug making a vertical transition though)

[albertml]

Maybe it's a bug in iphone X. I will inform you when I've found a solution.

[casperzandbergenyaacomm]

I have the same problem but I got a bit closer using:

.resizableImage(withCapInsets: UIEdgeInsets(top: 1, left: 0, bottom: 0, right: 0))

This makes the positioning correct but adds padding around it.. :/

Edit:

Fixed by making the image 1 pixel less in height. https://stackoverflow.com/questions/46276728/uitabbar-selectionindicatorimage-height-on-iphone-x

[premanandchandrasekar]

@casperzandbergenyaacomm solution works for me.

[tacovollmer]

It appears capsInsets top or bottom should not be 0 for the positioning to be correct on iPhoneX. So using CGFloat.leastNonzeroMagnitude for top or bottom also works. e.g.:

.resizableImage(withCapInsets: UIEdgeInsets(top: .leastNonzeroMagnitude, left: 0, bottom: 0, right: 0))

[SureshChary]

@casperzandbergenyaacomm and @tacovollmer I followed ur steps. but still getting some gap in all iPhone versions. Please suggest how to fill the gaps. My Code: self.tabBar.selectionIndicatorImage = makeImageWithColorAndSize(color: UIColor.white, size: CGSize(width: tabWidth, height: tabHeight-1)).resizableImage(withCapInsets: .zero, resizingMode: .stretch)

[tacovollmer]

I haven't been able to fill to the bottom @SureshChary. I'm interested to know if anyone did manage.

[casperzandbergenyaacomm]

@SureshChary I have the same as you and it works for me, are you sure the tabHeight is tabBar.frame.height?

My code for the bar in the image.

let numberOfItems = CGFloat(tabBar.items!.count)
let tabBarItemSize = CGSize(width: tabBar.frame.width/numberOfItems, height: tabBar.frame.height)
let color = tabSelectedColor

tabBar.selectionIndicatorImage = UIImage
    .imageWithColor(color: color, size: tabBarItemSize)
    .resizableImage(withCapInsets: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0))

extension UIImage {

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

Note: I do not use this library

[SureshChary]

Yes, let tabHeight = tabBar.frame.height

I tried your above code. But again it is failing in iPhone X 11.2. any idea? Here is code: let tabWidth = (tabBar.frame.width/CGFloat(tabBar.items!.count)) let tabHeight = tabBar.frame.height self.tabBar.selectionIndicatorImage = imageWithColor(color: UIColor.white, size: CGSize(width: tabWidth, height: tabHeight)).resizableImage(withCapInsets: UIEdgeInsets(top: 0, left: 0, bottom: 0, right: 0))

[casperzandbergenyaacomm]

@SureshChary You need to call that code in the viewDidLayoutSubviews (after the height sizing for iPhone X)

[SureshChary]

Perfect!! Worked and thanks @casperzandbergenyaacomm

I feel iPhone X Tab UI is ugly bcoz of height-83. is it Ok for Apple?

[KoukuntlaAditya]

I faced the same issue and was able to fix it by adding an extra rect in the imageWithColor extension,

This is how it looked after the fix.

[casperzandbergenyaacomm]

I would actually advise against using a background color on your tab bar buttons nowadays, they look off on the current generation of iPhones. A selected icon and unselected icon is a better way to show wether the tab is active.

[mushthak]

https://stackoverflow.com/a/46310166/3629513 This worked for me by just reducing the height value by 1. Ya that's odd

let numberOfItems = CGFloat(tabBar.items?.count ?? 0) let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height - 1) self.tabBarController?.tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor.blue, size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)