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.

46voto

YannickSteph Points 7353

Swift 4

Modifier la teinte de UIImage SVG / PDF qui travaillent pour image avec une couleur unique :

enter image description here enter image description here

import Foundation

// MARK: - UIImage extensions

public extension UIImage {

    //
    /// Tint Image
    ///
    /// - Parameter fillColor: UIColor
    /// - Returns: Image with tint color
    func tint(with fillColor: UIColor) -> UIImage? {
        let image = withRenderingMode(.alwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        fillColor.set()
        image.draw(in: CGRect(origin: .zero, size: size))

        guard let imageColored = UIGraphicsGetImageFromCurrentImageContext() else {
            return nil
        }

        UIGraphicsEndImageContext()
        return imageColored
    }
}

Modifier la teinte de UIImageView qui travaillent pour image avec une couleur unique :

enter image description here enter image description here

let imageView = UIImageView(frame: CGRect(x: 50, y: 50, width: 50, height: 50))
imageView.image = UIImage(named: "hello.png")!.withRenderingMode(.alwaysTemplate)
imageView.tintColor = .yellow

Modifier la teinte de UIImage para photo utilise ça :

enter image description here enter image description here

import Foundation

// MARK: - Extensions UIImage

public extension UIImage {

    /// Tint, Colorize image with given tint color
    /// This is similar to Photoshop's "Color" layer blend mode
    /// This is perfect for non-greyscale source images, and images that 
    /// have both highlights and shadows that should be preserved<br><br>
    /// white will stay white and black will stay black as the lightness of 
    /// the image is preserved
    ///
    /// - Parameter TintColor: Tint color
    /// - Returns:  Tinted image
    public func tintImage(with fillColor: UIColor) -> UIImage {

        return modifiedImage { context, rect in
            // draw black background - workaround to preserve color of partially transparent pixels
            context.setBlendMode(.normal)
            UIColor.black.setFill()
            context.fill(rect)

            // draw original image
            context.setBlendMode(.normal)
            context.draw(cgImage!, in: rect)

            // tint image (loosing alpha) - the luminosity of the original image is preserved
            context.setBlendMode(.color)
            fillColor.setFill()
            context.fill(rect)

            // mask by alpha values of original image
            context.setBlendMode(.destinationIn)
            context.draw(context.makeImage()!, in: rect)
        }
    }

    /// Modified Image Context, apply modification on image
    ///
    /// - Parameter draw: (CGContext, CGRect) -> ())
    /// - Returns:        UIImage
    fileprivate func modifiedImage(_ draw: (CGContext, CGRect) -> ()) -> UIImage {

        // using scale correctly preserves retina images
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        let context: CGContext! = UIGraphicsGetCurrentContext()
        assert(context != nil)

        // correctly rotate image
        context.translateBy(x: 0, y: size.height)
        context.scaleBy(x: 1.0, y: -1.0)

        let rect = CGRect(x: 0.0, y: 0.0, width: size.width, height: size.height)

        draw(context, rect)

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

18voto

Esq Points 498

Avec Swift

let commentImageView = UIImageView(frame: CGRectMake(100, 100, 100, 100))
commentImageView.image = UIImage(named: "myimage.png")!.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
commentImageView.tintColor = UIColor.blackColor()
addSubview(commentImageView)

12voto

DairySeeker Points 276

Pour les besoins de Swift 3

theImageView.image = theImageView.image!.withRenderingMode(.alwaysTemplate)
theImageView.tintColor = UIColor.red

10voto

WaliD Points 53

Voici une extension simple qui fonctionne pour Swift 5 :

extension UIImageView {

func setImageTintColor(_ color: UIColor) {
    let tintedImage = self.image?.withRenderingMode(.alwaysTemplate)
    self.image = tintedImage
    self.tintColor = color
  }
}

Utilisation :

myImageView.setImageTintColor(.systemBlue)

9voto

mustafa Points 11

En outre, pour les réponses ci-dessus, dans iOS 13 et les versions ultérieures, il existe une méthode propre.

let image = UIImage(named: "imageName")?.withTintColor(.white, renderingMode: .alwaysTemplate)

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