Swift TabBar项目颜色和背景颜色 [英] Swift TabBar Item color and background color

问题描述

我正在尝试在TabBarController中的TabBar上设置单个项目的图标颜色和背景颜色。

I'm trying to set the icon color and background color of an individual item on my TabBar within the TabBarController.

我的TabBar上有5个图标，其中4个我设置了颜色，这只是我正在努力的最后一个图标。我在图片下方附上了一个链接，以显示我想要实现的目标。

I have 5 icons on my TabBar, 4 of which i've set the color for, it's just this last icon that i'm struggling with. I've attached a link below of an image to show what i'm trying to achieve.

特定图标是（图像中间的图标）我的相机输入，这个图标我想要是白色的，背景是红色的。
到目前为止我的代码是这样的 -
在我的TabBarController上：

The specific icon is (the one in the middle of the image) for my camera feed, this icon i would like to be white and the background to be red. My code so far is such - On my TabBarController:

var imageNames = ["FeedIcon", "ExploreIcon", "CameraIcon", "ActivityIcon", "MyProfileIcon"]

    let tabItems = tabBar.items as! [UITabBarItem]
    for (index, value) in enumerate(tabItems)
    {
       var imageName = imageNames[index]
        value.image = UIImage(named: imageName)
        value.imageInsets = UIEdgeInsetsMake(5.0, 0, -5.0, 0)

    }
    //for below i've used a extension for imageWithColor to set the color of my icons
    for tabItems in self.tabBar.items as! [UITabBarItem] {
        if let image = tabItems.image {
            tabItems.image = image.imageWithColor(UIColor(red: 57.0/255.0, green: 57.0/255.0, blue: 57.0/255.0, alpha: 1.0)).imageWithRenderingMode(.AlwaysOriginal)
        }
    }

我的扩展：

    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, kCGBlendModeNormal)

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

推荐答案

可能有点晚但是要创建这个相机项目我认为唯一的解决方案是创建一个UIButton并将按钮的中心设置为UITabBar的中心。您可以在帖子中查看如何操作。之后，您可以将图像设置为具有此背景颜色的按钮。

Might be a bit late but to create this "camera item" I think the only solution is to create a UIButton and set the center of the button to the center of the UITabBar. You can see how to do it in this post. After that you can set the image to the button with this background color.

更新：

我创建了用swift编写的示例项目，您可以在其中查看在tabBar上添加此按钮。

I created this sample project written with swift where you can see how to add this button on the tabBar.

主要问题是子类UITabBarController并添加此类中的按钮。

The main issue is to subclass UITabBarController and add the button from this class.

class TabBarViewController: UITabBarController {

    override func viewDidLoad() {

        super.viewDidLoad()

    }

    override func didReceiveMemoryWarning() {

        super.didReceiveMemoryWarning()

    }

    override func viewDidAppear(animated: Bool) {

        // Creates image of the Button
        let imageCameraButton: UIImage! = UIImage(named: "cameraIcon")

        // Creates a Button
        let cameraButton = UIButton(type: .Custom)
        // Sets width and height to the Button
        cameraButton.frame = CGRectMake(0.0, 0.0, imageCameraButton.size.width, imageCameraButton.size.height);
        // Sets image to the Button
        cameraButton.setBackgroundImage(imageCameraButton, forState: .Normal)
        // Sets the center of the Button to the center of the TabBar
        cameraButton.center = self.tabBar.center
        // Sets an action to the Button
        cameraButton.addTarget(self, action: "doSomething", forControlEvents: .TouchUpInside)

        // Adds the Button to the view
        self.view.addSubview(cameraButton)

    }

    func doSomething() {

        print("Action of camera button")

    }

}

这篇关于Swift TabBar项目颜色和背景颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！