在标签栏

Question

为了理解我的问题，我将首先简要介绍一下我的目标：

在我的标签栏的中心，我故意使用一个通常太大的图像（一个圆圈），它在标签栏上方延伸（标签栏的背景颜色为白色），因此它覆盖了标签栏的顶部边框。标签栏。由于所有UITabBarItem s＆＃39;默认颜色是浅灰色（显然它既不是UIColor.lightGray也不是.darkGray）我想改变它的颜色（只有这个）UITabBarItem（或者更确切地说是考虑到这一点的图像）是唯一可以看到这个UITabBarItem）白色的东西我已经使用了以下扩展/功能，它可以正常工作：

extension UIImage {
    func tabBarImageWithCustomTint(tintColor: UIColor) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale)
        let context: CGContext = UIGraphicsGetCurrentContext()!
        context.translateBy(x: 0, y: self.size.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.setBlendMode(CGBlendMode(rawValue: 1)!)
        let rect: CGRect = CGRect(x: 0, y: 0, width:  self.size.width, height: self.size.height)
        context.clip(to: rect, mask: self.cgImage!)
        tintColor.setFill()
        context.fill(rect)
        var newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        newImage = newImage.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        return newImage
    }
}

Link to question where I found this extension

由于图像的色调颜色和标签栏的背景颜色都是白色，我现在想要为 now white 图像添加红色边框。幸运的是，我设法找到另一个question on stackoverflow回答了这个问题（尽管我必须补充一点，我对这个扩展并不完全满意，因为它在UIImage和边界之间留下了一个非常小的空间）： / p>

extension UIImage {
    func roundedImageWithBorder(width: CGFloat, color: UIColor) -> UIImage? {
        let square = CGSize(width: min(size.width, size.height) + width * 2, height: min(size.width, size.height) + width * 2)
        let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
        imageView.contentMode = .center
        imageView.image = self
        imageView.layer.cornerRadius = square.width/2
        imageView.layer.masksToBounds = true
        imageView.layer.borderWidth = width
        imageView.layer.borderColor = color.cgColor
        UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, false, scale)
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        imageView.layer.render(in: context)
        let result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return result
    }
}

我现在的问题是如果我连续使用这个函数......：

let tabRecordButton = UIImage(named: "circle").tabBarImageWithCustomTint(tintColor: .white).roundedImageWithBorder(width: 1, color: .red)

...，边框是绘制的，但UITabBarItem的色调颜色会回到上面提到的默认灰色（甚至边框都不是红色）。

所以我的问题是：有没有办法可以同时做到这两种方式，即在我的UITabBar中将图像颜色变为白色和红色边框？

Answer 1

您必须在第二个扩展名中添加此行result = result.withRenderingMode(UIImageRenderingMode.alwaysOriginal)，如果您省略此行，那么您的图片将从您的tabBar中获取色调，这是您的原始问题

将此roundedImageWithBorder扩展方法实现替换为此

func roundedImageWithBorder(width: CGFloat, color: UIColor) -> UIImage? {
        let square = CGSize(width: min(size.width, size.height) + width * 2, height: min(size.width, size.height) + width * 2)
        let imageView = UIImageView(frame: CGRect(origin: CGPoint(x: 0, y: 0), size: square))
        imageView.contentMode = .center
        imageView.image = self
        imageView.layer.cornerRadius = square.width/2
        imageView.layer.masksToBounds = true
        imageView.layer.borderWidth = width
        imageView.layer.borderColor = color.cgColor
        UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, false, scale)
        guard let context = UIGraphicsGetCurrentContext() else { return nil }
        imageView.layer.render(in: context)
        var result = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        result = result?.withRenderingMode(UIImageRenderingMode.alwaysOriginal)
        return result
    }

<强>测试

override func viewDidLoad() {
    super.viewDidLoad()
    // Do any additional setup after loading the view, typically from a nib.
    self.tabBarItem.selectedImage = UIImage(named: "icono-menu")?.tabBarImageWithCustomTint(tintColor: UIColor.magenta).roundedImageWithBorder(width: 1, color: UIColor.blue)
    self.tabBarController?.tabBar.tintColor = UIColor.red //note that the tintColor of the tabBar is red
}

<强>结果