ios - 在标签栏中的彩色 UIImage 周围绘制某种颜色的边框

Question

为了理解我的问题，我将首先简短描述我的目标:

在标签栏的中心，我故意使用一个通常太大的图像(一个圆圈)，该图像延伸到标签栏上(标签栏的背景颜色为白色)，因此它重叠在标签栏的顶部边框上。由于所有 UITabBarItem 的默认颜色都是浅灰色(显然它既不是 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

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

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
}

结果