Dessiner une bordure de certaine couleur autour UIImage de couleur dans la barre d'onglet

Question

Pour comprendre mon problème, je vais commencer par une brève description de mon objectif:

Au centre de ma barre d'onglets J'utilise délibérément une image généralement trop grand (un cercle) qui s'étend sur la barre d'onglets (la couleur d'arrière-plan de la barre d'onglets est blanche) de sorte qu'elle chevauche la bordure supérieure de la barre d'onglets. Puisque toute la couleur par défaut de UITabBarItem s est un gris clair (apparemment ce n'est ni UIColor.lightGray ni .darkGray) et je voudrais changer la couleur de ceci (et seulement ceci) UITabBarItem (ou plutôt l'image considérant ceci est la seule chose qui peut être vu de ce UITabBarItem) au blanc, je l'ai utilisé l'extension/fonction suivante qui fonctionne très bien:

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

Comme à la fois la couleur de teinte de l'image et la couleur d'arrière-plan de la barre d'onglets sont blancs , Je voudrais maintenant ajouter une bordure de couleur rouge à l'image maintenant blanc. Heureusement, je suis parvenu à trouver un autre question on stackoverflow qui a répondu à cette question (même si je dois ajouter que je ne suis pas entièrement satisfait de cette extension, car elle laisse un très petit espace entre le UIImage et la frontière):

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

Mon problème est maintenant si j'utilise la fonction consécutivement comme ça ...:

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

..., la frontière est dessiné, mais la couleur de teinte de UITabBarItem remonte à ce gris par défaut mentionné ci-dessus (même pas la frontière est rouge). Donc ma question: Y a-t-il un moyen de faire les deux, c'est-à-dire colorier l'image en blanc et la bordure en rouge dans UITabBar?

Answer 1

Vous devez ajouter cette ligne result = result.withRenderingMode(UIImageRenderingMode.alwaysOriginal) dans votre deuxième extension aussi bien, si vous ne spécifiez pas cette ligne alors votre image prendra la teinte de votre tabBar, qui est votre problème d'origine

remplacer votre implémentation de la méthode d'extension roundedImageWithBorder avec celui-ci

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 
    } 

Test

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 
} 

Résultat