UITabBar.appearance().selectionIndicatorImage 设置的 UITabBarItem 背景在 iPhone X 上未对齐
UITabBarItem background set by UITabBar.appearance().selectionIndicatorImage misaligned on iPhone X
代码:
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
在普通设备上看起来像这样:
在 iPhone X 上这样:
iPhone X 标签栏项目背景未对齐的原因是什么?
更新 1:
将代码更改为如下所示后,它看起来更好,但它仍然是解决方法,因为图像没有完全占据标签栏项目 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)
}
更新 2:
上面的代码从 viewDidLoad
调用(也尝试从 viewWillAppear
)。 UITabBarController
的子类 100% 由代码编写(未使用 Storyboards/Xibs)。
更新 3:
我们还有一个自定义按钮作为子视图添加到 UITabBar 并正确定位。只有 selectionIndicatorImage
未对齐...
更新 4:
运行 上面 viewDidAppear
中的原始代码而不是 viewDidLoad
或 viewWillAppear
中的原始代码产生以下结果:
尝试一下,这对我有用。不确定它是否适用于所有人。
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
tabbar.invalidateIntrinsicContentSize()
}
试试这个
对生成彩色图像的图像进行扩展。
extension UIImage {
class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
let rect: CGRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(rect)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
}
并将该图像设置为 tabbarcontroller 并将 tabbar 的高度设置为 48
var tabFrame = self.tabBarController.tabBar.frame
//self.TabBar is IBOutlet of your TabBar
tabFrame.size.height = 48
tabFrame.origin.y = self.window!.frame.size.height - 48
self.tabBarController.tabBar.frame = tabFrame
self.tabBarController.tabBar.autoresizesSubviews = false
self.tabBarController.tabBar.clipsToBounds = true
self.tabBarController.delegate = self
tabNavigation = UINavigationController(rootViewController: self.tabBarController)
tabNavigation.isNavigationBarHidden = true
let numberOfItems = CGFloat((tabBarController.tabBar.items!.count))
let tabBarItemSize = CGSize(width: (tabBarController.tabBar.frame.width) / numberOfItems,
height: (tabBarController.tabBar.frame.height))
tabBarController.tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor(red: 90/255.0, green: 43/255.0, blue:123/255.0, alpha: 1.0), size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)
tabBarController.tabBar.frame.size.width = self.window!.frame.width + 4
tabBarController.tabBar.frame.origin.x = -2
您只需要在延迟后调用它,因为在您的情况下它没有获得正确的 tabBar 高度并将其设置为 self.tabBar,下面的代码对我有用我在 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
}
代码:
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
在普通设备上看起来像这样:
在 iPhone X 上这样:
iPhone X 标签栏项目背景未对齐的原因是什么?
更新 1:
将代码更改为如下所示后,它看起来更好,但它仍然是解决方法,因为图像没有完全占据标签栏项目 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)
}
更新 2:
上面的代码从 viewDidLoad
调用(也尝试从 viewWillAppear
)。 UITabBarController
的子类 100% 由代码编写(未使用 Storyboards/Xibs)。
更新 3:
我们还有一个自定义按钮作为子视图添加到 UITabBar 并正确定位。只有 selectionIndicatorImage
未对齐...
更新 4:
运行 上面 viewDidAppear
中的原始代码而不是 viewDidLoad
或 viewWillAppear
中的原始代码产生以下结果:
尝试一下,这对我有用。不确定它是否适用于所有人。
override func viewWillLayoutSubviews() {
super.viewWillLayoutSubviews()
tabbar.invalidateIntrinsicContentSize()
}
试试这个
对生成彩色图像的图像进行扩展。
extension UIImage {
class func imageWithColor(color: UIColor, size: CGSize) -> UIImage {
let rect: CGRect = CGRect(x: 0, y: 0, width: size.width, height: size.height)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
color.setFill()
UIRectFill(rect)
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
}
并将该图像设置为 tabbarcontroller 并将 tabbar 的高度设置为 48
var tabFrame = self.tabBarController.tabBar.frame
//self.TabBar is IBOutlet of your TabBar
tabFrame.size.height = 48
tabFrame.origin.y = self.window!.frame.size.height - 48
self.tabBarController.tabBar.frame = tabFrame
self.tabBarController.tabBar.autoresizesSubviews = false
self.tabBarController.tabBar.clipsToBounds = true
self.tabBarController.delegate = self
tabNavigation = UINavigationController(rootViewController: self.tabBarController)
tabNavigation.isNavigationBarHidden = true
let numberOfItems = CGFloat((tabBarController.tabBar.items!.count))
let tabBarItemSize = CGSize(width: (tabBarController.tabBar.frame.width) / numberOfItems,
height: (tabBarController.tabBar.frame.height))
tabBarController.tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor(red: 90/255.0, green: 43/255.0, blue:123/255.0, alpha: 1.0), size: tabBarItemSize).resizableImage(withCapInsets: UIEdgeInsets.zero)
tabBarController.tabBar.frame.size.width = self.window!.frame.width + 4
tabBarController.tabBar.frame.origin.x = -2
您只需要在延迟后调用它,因为在您的情况下它没有获得正确的 tabBar 高度并将其设置为 self.tabBar,下面的代码对我有用我在 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
}