467 votes

Comment modifier la couleur de l'image (tintColor) dans iOS et WatchKit ?

J'ai un UIImageView appelé "theImageView", avec une UIImage d'une seule couleur (fond transparent) comme le cœur noir de gauche ci-dessous. Comment puis-je changer la couleur de cette image par programme dans iOS 7 ou supérieur, comme la méthode de teinte utilisée dans les icônes de la barre de navigation d'iOS 7+ ?

Cette méthode peut-elle également fonctionner dans WatchKit pour une application Apple Watch ?

enter image description here

4 votes

Que voulez-vous dire par "le code suivant est erroné", la mise en place d'une UIImage avec UIImageRenderingModeAlwaysTemplate et ensuite UIImageVIew 's tintColor Fonctionne. (dans mon code ^^)

2 votes

Utilisez un png avec transparence comme celui-ci

4 votes

Vous devriez vraiment déplacer votre réponse dans la section des réponses, car je pense que c'est la meilleure et la plus moderne.

3voto

Bawpotter Points 888

Réponse de la version Swift 3 de l'extension de fuzz

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

    let context = UIGraphicsGetCurrentContext()! as CGContext
    context.translateBy(x: 0, y: self.size.height)
    context.scaleBy(x: 1.0, y: -1.0);
    context.setBlendMode(.normal)

    let rect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height) as CGRect
    context.clip(to: rect, mask: self.cgImage!)
    context.fill(rect)

    let newImage = UIGraphicsGetImageFromCurrentImageContext()! as UIImage
    UIGraphicsEndImageContext()

    return newImage
}

3voto

KingofBliss Points 9790

Avec iOS 13 et plus, vous pouvez simplement utiliser

let image = UIImage(named: "Heart")?.withRenderingMode(.alwaysTemplate)
if #available(iOS 13.0, *) {
   imageView.image = image?.withTintColor(UIColor.white)
}

1voto

abdullahselek Points 3161

C'est mon extension UIImage et vous pouvez utiliser directement la fonction changeTintColor pour une image.

extension UIImage {

    func changeTintColor(color: UIColor) -> UIImage {
        var newImage = self.withRenderingMode(.alwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(self.size, false, newImage.scale)
        color.set()
        newImage.draw(in: CGRect(x: 0.0, y: 0.0, width: self.size.width, height: self.size.height))
        newImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return newImage
    }

    func changeColor(color: UIColor) -> UIImage {
        let backgroundSize = self.size
        UIGraphicsBeginImageContext(backgroundSize)
        guard let context = UIGraphicsGetCurrentContext() else {
            return self
        }
        var backgroundRect = CGRect()
        backgroundRect.size = backgroundSize
        backgroundRect.origin.x = 0
        backgroundRect.origin.y = 0

        var red: CGFloat = 0
        var green: CGFloat = 0
        var blue: CGFloat = 0
        var alpha: CGFloat = 0
        color.getRed(&red, green: &green, blue: &blue, alpha: &alpha)
        context.setFillColor(red: red, green: green, blue: blue, alpha: alpha)
        context.translateBy(x: 0, y: backgroundSize.height)
        context.scaleBy(x: 1.0, y: -1.0)
        context.clip(to: CGRect(x: 0.0, y: 0.0, width: self.size.width, height: self.size.height),
                 mask: self.cgImage!)
        context.fill(backgroundRect)

        var imageRect = CGRect()
        imageRect.size = self.size
        imageRect.origin.x = (backgroundSize.width - self.size.width) / 2
        imageRect.origin.y = (backgroundSize.height - self.size.height) / 2

        context.setBlendMode(.multiply)
        context.draw(self.cgImage!, in: imageRect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return newImage!
    }

}

Voici un exemple d'utilisation

let image = UIImage(named: "sample_image")
imageView.image = image.changeTintColor(color: UIColor.red)

Et vous pouvez utiliser la monnaie changeColor fonction pour changer la couleur de l'image

1voto

delabahan Points 39
let navHeight = self.navigationController?.navigationBar.frame.height;
let menuBtn = UIButton(type: .custom)
menuBtn.frame = CGRect(x: 0, y: 0, width: 45, height: navHeight!)     
menuBtn.setImage(UIImage(named:"image_name")!.withRenderingMode(.alwaysTemplate), for: .normal)        
menuBtn.tintColor = .black

1voto

dimpiax Points 96

Swift 5

Redessiner une image avec une couleur de fond et de remplissage

extension UIImage {
  func withBackground(color: UIColor, fill fillColor: UIColor) -> UIImage {
    UIGraphicsBeginImageContextWithOptions(size, true, scale)

    guard let ctx = UIGraphicsGetCurrentContext(), let image = cgImage else { return self }
    defer { UIGraphicsEndImageContext() }

    ctx.concatenate(CGAffineTransform(a: 1, b: 0, c: 0, d: -1, tx: 0, ty: size.height))

    let rect = CGRect(origin: .zero, size: size)

    // draw background
    ctx.setFillColor(color.cgColor)
    ctx.fill(rect)

    // draw image with fill color
    ctx.clip(to: rect, mask: image)
    ctx.setFillColor(fillColor.cgColor)
    ctx.fill(rect)

    return UIGraphicsGetImageFromCurrentImageContext() ?? self
  }
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X