Ios 如何使UITabBar选择指示器图像填满整个空间？

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

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

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

---

这张图片只是一个红色的正方形，在82x49px上有一个解决方案，但对于更宽的图片，它仍然不能填满整个空间。希望你们能帮上忙-谢谢。

你应该看看如何调整tabbarbgtest.png的大小，然后将图像分配给selectionIndicatorImage，你甚至可以在情节提要编辑器中这样做。

如果你想在选项卡选择上设置红色图像，我建议你设置活动选项卡栏项目的背景色，根据我的意见，无论什么时候，只要你们能做你们的东西和编码为什么要使用图像，所以它更好地设置选择颜色，而不是图像。 您可以使用以下代码实现这一点

    // 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
    }
}

希望这对你有帮助

或另一种方法是：

在Tabbar控制器中，您可以设置图像的默认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!
    }
}

---

到2017年为止，老实说，皮尤斯的回答对我并不适用。在寻找另一个解决方案的几天后，我通过对UITabBarController子类化找到了我的解决方案。

即使旋转，它也适用于多个设备。

注释：

将图像的渲染模式设置为原始模式

将下面的此类指定给故事板中的UITabBarController，或者如果以编程方式显示屏幕，则将其指定为基类

//
//  BaseTabBarController.swift
//  MyApp
//
//  Created by DRC on 1/27/17.
//  Copyright © 2017 PrettyITGirl. All rights reserved.
//

import UIKit

class BaseTabBarController: UITabBarController {

    let numberOfTabs: CGFloat = 4
    let tabBarHeight: CGFloat = 60

    override func viewWillAppear(_ animated: Bool) {
        super.viewWillAppear(animated)

        updateSelectionIndicatorImage()
    }

    override func viewWillLayoutSubviews() {
        super.viewWillLayoutSubviews()

        updateSelectionIndicatorImage()
    }

    func updateSelectionIndicatorImage() {
        let width = tabBar.bounds.width
        var selectionImage = UIImage(named:"myimage.png")
        let tabSize = CGSize(width: width/numberOfTabs, height: tabBarHeight)

        UIGraphicsBeginImageContext(tabSize)
        selectionImage?.draw(in: CGRect(x: 0, y: 0, width: tabSize.width, height: tabSize.height))
        selectionImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        tabBar.selectionIndicatorImage = selectionImage
    }

}

要支持iPhone X（以下代码适用于所有版本），请在viewDidLayoutSubviews（）中编写代码

---

来源：

这一目标c中相对简单的解决方案适用于我的iPhone X，不难转换为swift：

CGFloat bottomPadding = 0;

if (@available(iOS 11.0, *)) {
  UIWindow *window = UIApplication.sharedApplication.keyWindow;
  bottomPadding = window.safeAreaInsets.bottom;
}

[UITabBar.appearance setSelectionIndicatorImage:[UIImage imageWithColor:[UIColor lightGrayColor] 
          andBounds:CGRectMake(0, 0, self.tabBar.frame.size.width/5, self.tabBar.frame.size.height + bottomPadding)]];

这是上面的改编

---

是否有一个CSS样式表分配给这个？你试过看一下吗？看起来像是一个大尺寸87*49px的图像填充。@LOTUSMS它不是这样工作的。这些都不是这样的。你为什么不提供一个完整的答案，而不是一个现在毫无结果的外部链接呢？使用一些侦探技巧。他提供了一个链接，教你如何调整图像的大小，如果你还不知道的话。一旦有了可调整大小的图像，就可以在UITabBar实例上将该图像设置为selectionIndicatorImage。艾伦回答的不好之处在于他没有读这个问题。因为他的答案正是OP指出的不起作用/是问题所在。看来你的答案是我迄今为止找到的最好答案。如果你在那里提供这个答案，如果没有更好的答案，我会给你奖金。把我的答案贴在那里。在iPhone8之前都可以正常工作，但对于iPhoneX，您需要使用“ResizebleimageWithCapinsets”来进行小的校正，而不是使用“UIEdgeInsets.Zero”。您需要在UIEdgeInsets中将top设置为1以避免处理。我修复了这个问题，如tabBar.selectionIndicatorImage=UIImage.imageWithColor（UIColor.redColor（），size:tabBarItemSize）.resizebleimagewithcapinsets（UIEdgeInsets（top:1，left:0，bottom:0，right:0））@PAC for iphonex，我使用了用户解决方案，但图像并没有填满整个选项卡栏。从四个侧面观察到一些间隙。有什么想法吗？@Suresh Durishetti将UIEdgeInsets top值更改为0.25，然后再试一次。@PAC运气不好，四个面仍有缺口。@PAC终于在这里修复了

CGFloat bottomPadding = 0;

if (@available(iOS 11.0, *)) {
  UIWindow *window = UIApplication.sharedApplication.keyWindow;
  bottomPadding = window.safeAreaInsets.bottom;
}

[UITabBar.appearance setSelectionIndicatorImage:[UIImage imageWithColor:[UIColor lightGrayColor] 
          andBounds:CGRectMake(0, 0, self.tabBar.frame.size.width/5, self.tabBar.frame.size.height + bottomPadding)]];

    import UIKit

    class BaseTabBarController: UITabBarController {

        var tabBarBounds: CGRect? {
            didSet {
                guard tabBarBounds != oldValue else { return }
                updateSelectionIndicatorColor(UIColor.green)
            }
        }

        override func viewWillLayoutSubviews() {
            super.viewWillLayoutSubviews()
            tabBarBounds = tabBar.bounds
        }

        func updateSelectionIndicatorColor(_ tintColor: UIColor) {
            guard let tabBarItems = self.tabBar.items else { return }

            let tabWidth = tabBar.bounds.width
            let tabHeight = tabBar.bounds.height
            let tabSize = CGSize(width: tabWidth / CGFloat(tabBarItems.count), height: tabHeight)
            var selectionImage = UIImage(color: tintColor, size: tabSize)

            UIGraphicsBeginImageContext(tabSize)
            selectionImage?.draw(in: CGRect(x: 0, y: 0, width: tabSize.width, height: tabSize.height))
            selectionImage = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()

            tabBar.selectionIndicatorImage = selectionImage
        }

    }

    public extension UIImage {
        public convenience init?(color: UIColor, size: CGSize = CGSize(width: 1, height: 1)) {
            let rect = CGRect(origin: .zero, size: size)
            UIGraphicsBeginImageContextWithOptions(rect.size, false, 0.0)
            color.setFill()
            UIRectFill(rect)
            let image = UIGraphicsGetImageFromCurrentImageContext()
            UIGraphicsEndImageContext()

            guard let cgImage = image?.cgImage else { return nil }
            self.init(cgImage: cgImage)
        }
    }