Как я могу изменить изображение tintColor в iOS и WatchKit

315

У меня есть UIImageView под названием "theImageView", с UIImage в одном цвете (прозрачный фон), как и левое черное сердце внизу. Как изменить цвет оттенка этого изображения программно в iOS 7 или выше в соответствии с методом оттенков, используемым в значках панели навигации iOS 7+?

Может ли этот метод работать в WatchKit для приложения Apple Watch?

Изображение 54

  • 4
    Что вы имеете в виду «следующий код неправильный», установка UIImage с UIImageRenderingModeAlwaysTemplate и затем установка UIImageVIew tintColor работает (в моем коде ^^)
  • 1
    Используйте PNG с прозрачностью, как этот
Показать ещё 2 комментария
Теги:
watchkit
uiimage
uicolor

18 ответов

659
Лучший ответ

IOS
Для приложения iOS в Swift 3 или 4:

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

Свифт 2:

theImageView.image = theImageView.image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate)
theImageView.tintColor = UIColor.redColor()

Между тем, современное решение Objective-C:

theImageView.image = [theImageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
[theImageView setTintColor:[UIColor redColor]];

Watchkit
В WatchKit для приложений Apple Watch вы можете установить цвет оттенка для изображения шаблона.

  1. Вы должны добавить свое изображение в каталог активов в приложении WatchKit и установить набор изображений, который будет отображаться как изображение шаблона в инспекторе атрибутов. В отличие от приложения для iPhone, в настоящее время вы не можете установить визуализацию шаблона в коде в расширении WatchKit.
  2. Установите это изображение для использования в вашем WKInterfaceImage в конструкторе интерфейса для вашего приложения
  3. Создайте IBOutlet в вашем WKInterfaceController для WKInterfaceImage под названием "theImage"...

Чтобы затем установить оттенок цвета в Swift 3 или 4:

theImage.setTintColor(UIColor.red)

Свифт 2:

theImage.setTintColor(UIColor.redColor())

Чтобы затем установить оттенок цвета в Objective-C:

[self.theImage setTintColor:[UIColor redColor]];

Если вы используете шаблонное изображение и не применяете оттенок цвета, будет применен глобальный оттенок для вашего приложения WatchKit. Если вы не установили глобальный оттенок, theImage будет theImage светло-синий цвет по умолчанию при использовании в качестве изображения шаблона.

  • 2
    это лучшее и простое решение.
  • 4
    imageWithRenderingMode сделал свое дело
Показать ещё 10 комментариев
123

Здесь категория, которая должна делать трюк

@interface UIImage(Overlay)
@end

@implementation UIImage(Overlay)

- (UIImage *)imageWithColor:(UIColor *)color1
{
        UIGraphicsBeginImageContextWithOptions(self.size, NO, self.scale);
        CGContextRef context = UIGraphicsGetCurrentContext();
        CGContextTranslateCTM(context, 0, self.size.height);
        CGContextScaleCTM(context, 1.0, -1.0);
        CGContextSetBlendMode(context, kCGBlendModeNormal);
        CGRect rect = CGRectMake(0, 0, self.size.width, self.size.height);
        CGContextClipToMask(context, rect, self.CGImage);
        [color1 setFill];
        CGContextFillRect(context, rect);
        UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
        UIGraphicsEndImageContext();
        return newImage;
}
@end

чтобы вы сделали:

theImageView.image = [theImageView.image imageWithColor:[UIColor redColor]];
  • 0
    Спасибо за этот очень правильный ответ, я думаю, мой код был в порядке с самого начала, я должен ответить на свой вопрос и дать вам +1 независимо от ..
82

Я должен был сделать это в Swift, используя extension.

Я думал, что поделюсь, как я это сделал:

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

        let context = UIGraphicsGetCurrentContext() as CGContextRef
        CGContextTranslateCTM(context, 0, self.size.height)
        CGContextScaleCTM(context, 1.0, -1.0);
        CGContextSetBlendMode(context, CGBlendMode.Normal)

        let rect = CGRectMake(0, 0, self.size.width, self.size.height) as CGRect
        CGContextClipToMask(context, rect, self.CGImage)
        CGContextFillRect(context, rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext() as UIImage
        UIGraphicsEndImageContext()

        return newImage
    }
}

Использование:

theImageView.image = theImageView.image.imageWithColor(UIColor.redColor())

Swift 4

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

        let context = UIGraphicsGetCurrentContext()
        context?.translateBy(x: 0, y: self.size.height)
        context?.scaleBy(x: 1.0, y: -1.0)
        context?.setBlendMode(CGBlendMode.normal)

        let rect = CGRect(origin: .zero, size: CGSize(width: self.size.width, height: self.size.height))
        context?.clip(to: rect, mask: self.cgImage!)
        context?.fill(rect)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage!
    }
}

Использование:

theImageView.image = theImageView.image?.imageWithColor(color1: UIColor.red)

  • 1
    К вашему сведению, это не сработало для меня, пока я не переместил color1.setFill() прямо под первую строку в методе UIGraphicsBeginImageContextWithOptions(self.size, false, self.scale) .
  • 0
    @Aaron Обновлено на основе вашего комментария. Благодарю.
Показать ещё 5 комментариев
76

В раскадровке и изображениях Активы. вы также можете изменить это:

Обновить режим рендеринга до изображения шаблона

Изображение 1657

Обновить оттенок Цвет в Представлениях.

Изображение 1658

  • 17
    Это серьезно самый крутой ответ!
  • 0
    Эй, это прекрасно работает в моем статическом контроллере таблиц без необходимости писать какой-либо код.
Показать ещё 11 комментариев
30

Если кому-то нужно решение без UIImageView:

// (Swift 3)
extension UIImage {
    func tint(with color: UIColor) -> UIImage {
        var image = withRenderingMode(.alwaysTemplate)
        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        color.set()

        image.draw(in: CGRect(origin: .zero, size: size))
        image = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image
    }
}
  • 0
    Вау, работает как волшебство после поиска этого в течение часа +. Необходим для: Установка значка в NSTextAttachment в цвет, отличный от исходного значка. Стандартный ответ для использования UIImageView и изменения его tintColor здесь не работает, потому что NSTextAttachment не принимает UIImageView.
  • 1
    Это лучшее решение, которое я нашел на данный момент, особенно для тех, кто ищет код, работающий со Swift 3. Отличное предложение!
Показать ещё 1 комментарий
26

Swift 4

Измените оттенок UIImage SVG/PDF, который работает для изображения с уникальным цветом:

Изображение 1659 Изображение 1660

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

Измените оттенок UIImageView, который работает для изображения с уникальным цветом:

Изображение 1659 Изображение 1660

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

Измените оттенок UIImage для изображения, используйте это:

Изображение 1661 Изображение 1662

import Foundation

// MARK: - Extensions UIImage

public extension UIImage {

    /// Tint, Colorize image with given tint color
    /// This is similar to Photoshop "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!
    }
}
  • 1
    эй, я новичок в swift, но вы сказали здесь, что это для изображений SVG, но я не могу найти способ разобрать SVG в UIImage, не могли бы вы помочь мне? или, может быть, как-то я могу справиться с этим с SVG должным образом. Спасибо!
  • 0
    @DumitruRogojinaru использовать функцию SVG с изображением шаблона в активе
Показать ещё 2 комментария
16

С 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)
  • 3
    Вы можете просто поставить .AlwaysTemplate .
  • 0
    да, это сокращает код, но кажется, что это может снизить четкость кода. не уверен насчет точечных ярлыков из-за этого
Показать ещё 1 комментарий
4

Для быстрых 3 целей

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

3

Попробуйте это

http://robots.thoughtbot.com/designing-for-ios-blending-modes

или

- (void)viewDidLoad
{
[super viewDidLoad];

UILabel *label = [[UILabel alloc] initWithFrame:CGRectMake(10, 30, 300, 50)];
label.numberOfLines = 0;
label.font = [UIFont systemFontOfSize:13];
label.text = @"These checkmarks use the same gray checkmark image with a tintColor applied to the image view";
[self.view addSubview:label];

[self _createImageViewAtY:100 color:[UIColor purpleColor]];
}

- (void)_createImageViewAtY:(int)y color:(UIColor *)color {
UIImage *image = [[UIImage imageNamed:@"gray checkmark.png"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
UIImageView *imageView = [[UIImageView alloc] initWithImage:image];
CGRect frame = imageView.frame;
frame.origin.x = 100;
frame.origin.y = y;
imageView.frame = frame;

if (color)
    imageView.tintColor = color;

[self.view addSubview:imageView];
}
1

IOS

Решение для этого в Интерфейсном Разработчике, установите параметр templateImage в keyPath и выберите свой оттенок в IB.

extension UIImageView {

// make template image with tint color
var templateImage: Bool {
    set {
        if newValue, let image = self.image {
            let newImage = image.withRenderingMode(.alwaysTemplate)
            self.image = newImage
        }
    } get {
        return false
    }
}

}

  • 0
    не работал! Можете ли вы предоставить код?
1

Воспользуйтесь преимуществами расширения в Swift: -

extension UIImageView {
    func changeImageColor( color:UIColor) -> UIImage
    {
        image = image!.withRenderingMode(.alwaysTemplate)
        tintColor = color
        return image!
    }
}

   //Change color of logo 
   logoImage.image =  logoImage.changeImageColor(color: .red)

Изображение 1663

0

Для тонирования изображения UIButton

let image1 = "ic_shopping_cart_empty"
btn_Basket.setImage(UIImage(named: image1)?.withRenderingMode(.alwaysTemplate), for: .normal)
btn_Basket.setImage(UIImage(named: image1)?.withRenderingMode(.alwaysTemplate), for: .selected)
btn_Basket.imageView?.tintColor = UIColor(UIColor.Red)
0

Swift 3 версия расширенного ответа от 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
}
0

Это мое расширение UIImage, и вы можете напрямую использовать функцию changeTintColor для изображения.

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

}

Пример использования, подобный этому

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

И вы можете использовать функцию изменения changeColor для изменения цвета изображения

0

Подкласс, который также может использоваться из кода и Interface Builder:

@implementation TintedImageView

- (instancetype)initWithFrame:(CGRect)frame {
    self = [super initWithFrame:frame];
    if (self) {
        [self setup];
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)aDecoder {
    self = [super initWithCoder:aDecoder];
    if (self) {
        [self setup];
    }
    return self;
}

-(void)setup {
    self.image = [self.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
}

@end
0

Вы можете использовать это в Swift 3, если у вас есть изображение для замены кнопки очистки

func addTextfieldRightView(){

    let rightViewWidth:CGFloat = 30

    let viewMax = self.searchTxt.frame.height
    let buttonMax = self.searchTxt.frame.height - 16

    let buttonView = UIView(frame: CGRect(
        x: self.searchTxt.frame.width - rightViewWidth,
        y: 0,
        width: viewMax,
        height: viewMax))

    let myButton = UIButton(frame: CGRect(
        x: (viewMax - buttonMax) / 2,
        y: (viewMax - buttonMax) / 2,
        width: buttonMax,
        height: buttonMax))

    myButton.setImage(UIImage(named: "BlueClear")!, for: .normal)

    buttonView.addSubview(myButton)

    let clearPressed = UITapGestureRecognizer(target: self, action: #selector(SearchVC.clearPressed(sender:)))
    buttonView.isUserInteractionEnabled = true
    buttonView.addGestureRecognizer(clearPressed)

    myButton.addTarget(self, action: #selector(SearchVC.clearPressed(sender:)), for: .touchUpInside)

    self.searchTxt.rightView = buttonView
    self.searchTxt.rightViewMode = .whileEditing
}
0

Теперь я использую этот метод, основанный на ответе Дункана Бэббиджа:

+ (UIImageView *) tintImageView: (UIImageView *)imageView withColor: (UIColor*) color{
    imageView.image = [imageView.image imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    [imageView setTintColor:color];
    return imageView;
}
-2

profileImageView.image = theImageView.image!.withRenderingMode(.alwaysTemplate)
profileImageView.tintColor = UIColor.green

ИЛИ ЖЕ

Сначала выберите "Особое изображение" в активе изображения, а затем выберите "Красный" вместо "По умолчанию" в качестве шаблона и после этой строки записи. profileImageView.tintColor = UIColor.green

Ещё вопросы

Сообщество Overcoder
Наверх
Меню