Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 507
Vlad Avatar asked Nov 01 '17 12:11

Vlad


People also ask

How do I use tab bars in uitabbaritem?

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.

What is the uitabbar class used for?

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]?

What is the uitabbardelegate protocol?

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.

How to set the background image for the tab bar programmatically?

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.


1 Answers

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
    }
like image 195
Developer Avatar answered Nov 15 '22 00:11

Developer