ios - 如何让 UITabBar 选择指示器图像填满整个空间？

Question

我有一个 UITabBarController，我在其中使用此代码设置选择指示器图像:

let selectedBG = UIImage(named:"tabbarbgtest.png")?.resizableImageWithCapInsets(UIEdgeInsetsMake(0, 0, 0, 0))
UITabBar.appearance().selectionIndicatorImage = selectedBG

但是图像并没有填满整个空间 - 请参见下图:

图像只是一个红色方 block ，解决方案为 82x49 像素，但图像更宽，它仍然没有填满整个空间。希望你们能帮忙 - 谢谢。

Answer 1

如果你想在选项卡选择上设置红色图像，我会建议你设置事件选项卡栏项目的背景颜色，根据我的意见，每当你可以用编码做你的事情时，为什么要使用图像以便更好地设置选择颜色而不是图像。您可以使用以下代码来实现。

    // set red as selected background color
    let numberOfItems = CGFloat(tabBar.items!.count)
    let tabBarItemSize = CGSize(width: tabBar.frame.width / numberOfItems, height: tabBar.frame.height)
    tabBar.selectionIndicatorImage = UIImage.imageWithColor(color: UIColor.red, size: tabBarItemSize).resizableImage(withCapInsets: .zero)

    // remove default border
    tabBar.frame.size.width = self.view.frame.width + 4
    tabBar.frame.origin.x = -2

利用 UIImage 的以下扩展:

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 中，您可以设置默认的 UITabBar tintColor、barTintColor、selectionIndicatorImage(这里有点作弊)和图像的渲染模式，请参阅下面的评论:

    class MyTabBarController: UITabBarController, UINavigationControllerDelegate {
    ...
    override func viewDidLoad() {
        ...
            // Sets the default color of the icon of the selected UITabBarItem and Title
            UITabBar.appearance().tintColor = UIColor.red
        // Sets the default color of the background of the UITabBar
        UITabBar.appearance().barTintColor = UIColor.black

        // Sets the background color of the selected UITabBarItem (using and plain colored UIImage with the width = 1/5 of the tabBar (if you have 5 items) and the height of the tabBar)
        UITabBar.appearance().selectionIndicatorImage = UIImage().makeImageWithColorAndSize(color: UIColor.blue, size: CGSize(width: tabBar.frame.width/5, height: tabBar.frame.height))

        // Uses the original colors for your images, so they aren't not rendered as grey automatically.
        for item in (self.tabBar.items)! {
        if let image = item.image {
            item.image = image.withRenderingMode(.alwaysOriginal)
        }
    }
    }
    ...
}

并且您需要扩展 UIImage 类以制作具有您需要的大小的纯色图像:

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