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:
On iPhone X like this:
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)
}
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...
UPDATE 4:
Running original code above in viewDidAppear
instead of in viewDidLoad
or viewWillAppear
produces following result:
Typically, you use tab bars in conjunction with a UITabBarController object, but you can also use them as standalone controls in your app. Tab bars always appear across the bottom edge of the screen and display the contents of one or more UITabBarItem objects.
The UITabBar class provides the ability for the user to reorder, remove, and add items to the tab bar; this process is referred to as customizing the tab bar. The tab bar delegate receives messages when customizing occurs. var items: [UITabBarItem]?
The UITabBarDelegate protocol defines optional methods for a delegate of a UITabBar object. The UITabBar class provides the ability for the user to reorder, remove, and add items to the tab bar; this process is referred to as customizing the tab bar. The tab bar delegate receives messages when customizing occurs.
When you configure a background image, the tab bar ignores the tint color information. To set this attribute programmatically, use the backgroundImage property. The custom shadow image for the tab bar.
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
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With