xcode UITabBarItem Tab Bar Item 单独选择的背景颜色

UITabBarItem Tab Bar Item Individual Selected Background Color

提问by exotue

In my project, I am using an extension of UIImage to create change the selected background color of the tab bar items:

在我的项目中，我使用 UIImage 的扩展来创建更改选项卡栏项目的选定背景颜色：

extension UIImage {
func imageWithColor(tintColor: UIColor) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)

    let context = UIGraphicsGetCurrentContext() as CGContextRef!
    CGContextTranslateCTM(context, 0, self.size.height)
    CGContextScaleCTM(context, 1.0, -1.0);
    CGContextSetBlendMode(context, CGBlendMode.Normal)

    let rect = CGRectMake(0, 0, self.size.width, self.size.height) as CGRect
    CGContextClipToMask(context, rect, self.CGImage)
    tintColor.setFill()
    CGContextFillRect(context, rect)

    let newImage = UIGraphicsGetImageFromCurrentImageContext() as UIImage
    UIGraphicsEndImageContext()

    return newImage
}

func makeImageWithColorAndSize(color: UIColor, size: CGSize) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(size, false, 0)
    color.setFill()
    UIRectFill(CGRectMake(0, 0, 100, 100))
    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
    return image
}   
}

And then using that in my MainTabBarController

然后在我的 MainTabBarController 中使用它

 class MainTabBarController: UITabBarController {
 override func viewDidLoad() {
    super.viewDidLoad()

    let itemIndex = 0
    let bgColor = UIColor(red: 194/255.0, green: 39/255.0, blue: 65/255.0, alpha: 1.0)

    let itemWidth = tabBar.frame.width / CGFloat(tabBar.items!.count)
    let frame = CGRectMake(CGFloat(itemWidth) * CGFloat(itemIndex), 0, itemWidth, tabBar.frame.height)
    let bgView = UIView(frame: frame)

    bgView.backgroundColor = bgColor
    tabBar.insertSubview(bgView, atIndex: 0)

    for item in self.tabBar.items as [UITabBarItem]! {
        if let image = item.image {
            item.image = image.imageWithColor(UIColor.whiteColor()).imageWithRenderingMode(.AlwaysOriginal)
        }


        // Sets the default color of the icon of the selected UITabBarItem and Title
        UITabBar.appearance().tintColor = UIColor.whiteColor()

        // Sets the default color of the background of the UITabBar
        UITabBar.appearance().barTintColor = UIColor(red: 39/255.0, green: 39/255.0, blue: 39/255.0, alpha: 1.0)

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


        print(UITabBar.appearance().selectionIndicatorImage)



        UITabBar.appearance().selectionIndicatorImage = UIImage().makeImageWithColorAndSize(UIColor(red: 21/255.0, green: 21/255.0, blue: 21/255.0, alpha: 1.0), size: CGSizeMake(tabBar.frame.width/4, tabBar.frame.height))

    }

    // Do any additional setup after loading the view.
}

This works, but how can I change the selected background color for individual tab bar items?

这有效，但如何更改单个标签栏项目的选定背景颜色？

采纳答案by matt

how can I change the selected background color for individual tab bar items

如何更改单个标签栏项目的选定背景颜色

Tab bar items do not have a "selected background color". What they have, which you canset, is a selectedImage. By setting this to an image whose rendering mode is .AlwaysOriginal, you can dictate the look of the entire tab bar item image when it is selected, as opposed to when it is not selected.

标签栏项目没有“选定的背景颜色”。他们拥有的，您可以设置的，是一个selectedImage. 通过将其设置为渲染模式为 的图像.AlwaysOriginal，您可以在选择时指定整个选项卡栏项目图像的外观，而不是在未选择时。

回答by mobiledev Alex

Add this to application:didFinishLaunchingWithOptions:

将此添加到 application:didFinishLaunchingWithOptions:

UIColor *backgroundColor = [UIColor greenColor];

// set the bar background color
[[UITabBar appearance] setBackgroundImage:[AppDelegate imageFromColor:backgroundColor forSize:CGSizeMake(320, 49) withCornerRadius:0]];

// set the text color for selected state
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor, nil] forState:UIControlStateSelected];
// set the text color for unselected state
[[UITabBarItem appearance] setTitleTextAttributes:[NSDictionary dictionaryWithObjectsAndKeys:[UIColor whiteColor], UITextAttributeTextColor, nil] forState:UIControlStateNormal];

// set the selected icon color
[[UITabBar appearance] setTintColor:[UIColor whiteColor]];
[[UITabBar appearance] setSelectedImageTintColor:[UIColor whiteColor]];
// remove the shadow
[[UITabBar appearance] setShadowImage:nil];

// Set the dark color to selected tab (the dimmed background)
[[UITabBar appearance] setSelectionIndicatorImage:[AppDelegate imageFromColor:[UIColor colorWithRed:26/255.0 green:163/255.0 blue:133/255.0 alpha:1] forSize:CGSizeMake(64, 49) withCornerRadius:0]];

add a helper function to turn UIColor into UIImage

添加一个辅助函数将 UIColor 转换为 UIImage

You may put this code to AppDelegate or anywhere else:

您可以将此代码放在 AppDelegate 或其他任何地方：

+ (UIImage *)imageFromColor:(UIColor *)color forSize:(CGSize)size withCornerRadius:(CGFloat)radius
{
    CGRect rect = CGRectMake(0, 0, size.width, size.height);
    UIGraphicsBeginImageContext(rect.size);

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    // Begin a new image that will be the new image with the rounded corners
    // (here with the size of an UIImageView)
    UIGraphicsBeginImageContext(size);

    // Add a clip before drawing anything, in the shape of an rounded rect
    [[UIBezierPath bezierPathWithRoundedRect:rect cornerRadius:radius] addClip];
    // Draw your image
    [image drawInRect:rect];

    // Get the image, here setting the UIImageView image
    image = UIGraphicsGetImageFromCurrentImageContext();

    // Lets forget about that we were drawing
    UIGraphicsEndImageContext();

    return image;
}

回答by Exey Panteleev

I found workaround without adding additional images

我找到了不添加额外图像的解决方法

class TabBarController: UITabBarController {
override func viewDidLoad() {
    super.viewDidLoad()
    // update first item
    dispatch_async(dispatch_get_main_queue()) {
        self.setSelection(self.tabBar.selectedItem!)
    }
}

// MARK: - UITabBarDelegate handlers

override func tabBar(tabBar: UITabBar, didSelectItem item: UITabBarItem) {
    clearSelections()
    setSelection(item)
}

// MARK: - Selection Methods

func setSelection(item:UITabBarItem) {
    dispatch_async(dispatch_get_main_queue()) {
        for i in 0..<self.tabBar.items!.count {
            let ii = self.tabBar.items![i]
            if(item == ii) {
                let sv = self.tabBar.subviews[i+1]
                let label:UILabel =  sv.subviews[1] as! UILabel
                print("didSelectItem \(label.text) = \(ii.title)")
                sv.backgroundColor = UIColor() // Selection color
            }
        }
    }
}

func clearSelections() {
    for s in tabBar.subviews {
        s.backgroundColor = UIColor.clearColor()
    }
}
}

In result I can set background color of selected tab

结果我可以设置所选标签的背景颜色

回答by Glenn

I'm giving you the most perfect and easiest way (just kidding). You can set the selectionIndicatorImageof your TabBar's appearance in AppDelegate for default like so:

我给你最完美和最简单的方法（开玩笑）。您可以在 AppDelegate 中将 TabBar 外观的selectionIndicatorImage设置为默认值，如下所示：

    let screenWidth = UIScreen.main.bounds.width
    let tabSelectedBGImage = R.image.tabSelectedBg()?.resize(toWidth: screenWidth/3)
    UITabBar.appearance().selectionIndicatorImage = tabSelectedBGImage

I had to resize the image to the correct width, since I have 3 tabs, I need to divide the screenWidth to 3 of course. If you do not do this, the image will not fill out the width of your tab item. I'm posting this on my blog:D

我必须将图像调整为正确的宽度，因为我有 3 个选项卡，当然我需要将 screenWidth 划分为 3。如果不这样做，图像将不会填充选项卡项的宽度。我把这个贴在我的博客上:D

回答by Harol Higuera

A good approach could be using AlamofireImage library and resize your image according to your needs, then set it in the viewDidLoad method of your UITabBarViewController class:

一个好的方法是使用 AlamofireImage 库并根据需要调整图像大小，然后在 UITabBarViewController 类的 viewDidLoad 方法中设置它：

 override func viewDidLoad() {
    super.viewDidLoad()

    let screenWidth = UIScreen.main.bounds.width
    let tabSelectedBGImage = UIImage(named:"tab_selector")
    let size = CGSize(width: screenWidth/5, height: (tabSelectedBGImage?.size.height)!)
    let aspectScaledToFitImage = tabSelectedBGImage?.af_imageAspectScaled(toFill: size)

    UITabBar.appearance().selectionIndicatorImage = aspectScaledToFitImage

}

回答by Kishore Kumar

Simplest way I found.

我找到的最简单的方法。

Swift4

斯威夫特4

1.choose selectionIndicationImage.
2.Set tabar clipstobounds = true
3.Set insets for image.
4.Enjoy