Search code examples
iosswiftiphone-x

UITabBarItem background set by UITabBar.appearance().selectionIndicatorImage misaligned on iPhone X


The code:

let size = CGSize(width: tabBar.frame.width / CGFloat(TabBarItem.allValues.count),
                  height: tabBar.frame.height)
let image = UIImage.image(color: Color.action, size: size)
UITabBar.appearance().selectionIndicatorImage = image

On usual devices looks like this:

enter image description here

On iPhone X like this:

enter image description here

What can be the reason why iPhone X tab bar item background is misaligned?


UPDATE 1:

After changing code to be like below it looks better but it is still workaround as image not fully occupies tab bar item space:

  var image: UIImage
  if DeviceInfo.is5p8Inch {
     image = UIImage.image(color: Color.action, size: CGSize(width: 4, height: 4))
     image = image.resizableImage(withCapInsets: UIEdgeInsets(top: 2, left: 2, bottom: 2, right: 2), resizingMode: .tile)
  } else {
     let size = CGSize(width: tabBar.frame.width / CGFloat(TabBarItem.allValues.count),
                       height: tabBar.frame.height)
     image = UIImage.image(color: Color.action, size: size)
  }

enter image description here


UPDATE 2:

Code above called from viewDidLoad (also tries from viewWillAppear). Subclass of UITabBarController written 100% from code (no Storyboards/Xibs used).


UPDATE 3:

We also have a custom button added as subview to UITabBar which positioned correctly. Only selectionIndicatorImage is misaligned...

enter image description here


UPDATE 4:

Running original code above in viewDidAppear instead of in viewDidLoad or viewWillAppear produces following result:

enter image description here


Solution

  • You just need to call it after delay because it didn't get correct height of tabBar in your case and set it in self.tabBar, bellow code works for me i did it in viewDidload

    Async.main {
            let size = CGSize(width: tabBar.frame.width / CGFloat(TabBarItem.allValues.count),
                              height: tabBar.frame.height)
            let image = UIImage.image(color: Color.action, size: size)
            UITabBar.appearance().selectionIndicatorImage = image
            self.tabBar.selectionIndicatorImage = image // this will change color and height of current tabBar
        }