Me di cuenta de que cuando pongo un blanco o negro UIImage en un UISegmentedControl automáticamente las mascaras de color para que coincida con el tono de la segmentación de control. Pensé que esto era realmente genial, y me preguntaba si yo podría hacer esto en otros lugares. Por ejemplo, yo tengo un montón de botones que tienen una forma uniforme, pero de diferentes colores. En lugar de hacer un PNG para cada botón, podría de alguna manera el uso de este color enmascaramiento de utilizar la misma imagen para todos ellos, pero, a continuación, establecer un tono de color o algo para cambiar su color real?

Puedes publicar la imagen que desea utilizar y también de la imagen para el resultado deseado?
este hacer lo mismo desde el interface builder stackoverflow.com/a/25179217/2051381

OriginalEl autor Logan Shire | 2013-11-07

15 Comentarios

  1. 505

    Como de iOS 7, hay un nuevo método en UIImage para especificar el modo de representación. Usando el modo de representación de UIImageRenderingModeAlwaysTemplate permitirá que el color de la imagen a ser controlado por el botón del matiz de color.

    Objective-C

    UIButton *button = [UIButton buttonWithType:UIButtonTypeCustom];
    UIImage *image = [[UIImage imageNamed:@"image_name"] imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
    [button setImage:image forState:UIControlStateNormal]; 
    button.tintColor = [UIColor redColor];

    Swift

    let button = UIButton(type: .custom)
    let image = UIImage(named: "image_name")?.withRenderingMode(.alwaysTemplate)
    button.setImage(image, for: .normal)
    button.tintColor = UIColor.red
    Creo que es mejor usar el botón.imageView.tintColor
    sólo funciona cuando uso el botón.tintColor y no el botón.imageview.tintColor
    Sólo recuerde que el conjunto de la imagen modo de procesamiento de la imagen en xcassets por @hashier
    La creación de un UIButton de tipo UIButtonTypeSystem automáticamente honor a la tintColor establecido.
    Si su tintColor es demasiado oscuro, asegúrese de adjustsImageWhenHighlighted es NO. (O en IB: «, Destacó Ajusta la Imagen» está desactivada.)

    OriginalEl autor Ric Santos

  2. 197

    Ric ya se mencionó en su post puede establecer el modo de procesamiento en el código, también puede hacerlo directamente en el catálogo de imagen, ver imagen adjunta a continuación. Sólo tienes que configurar el Render As a Template Image

    El Matiz De Color UIButton Imagen

    Advertencia he tenido problemas con iOS 7 y este enfoque. Así que si usted utiliza iOS 7, así que usted puede ser que desee hacer en el código, así que asegúrese de que, como se describe aquí.

    Como una nota del lado, el archivo de imagen debe ser de color negro y transparente (no b&w)
    de verdad que no. La imagen puede ser de cualquier color que usted desea y transparente. Cualquier color diferente transparente se convertirá en un genérico y, a continuación, va a ser teñido con el color negro por defecto.

    OriginalEl autor hashier

  3. 63

    Botones personalizados aparecen en sus respectivos colores de la imagen. Ajuste el botón de tipo de «Sistema» en el guión gráfico (o a UIButtonTypeSystem en el código), hará que el botón con la imagen de defecto matiz de color.

    El Matiz De Color UIButton Imagen

    (probado en iOS9, Xcode 7.3)

    Que se puede evitar con la alwaysTemplate y tintColor métodos que aquí se sugiere. Con la ventaja de la .sistema de botón de obtener el cambio en el color con toque hacia abajo sobre el grifo.

    OriginalEl autor auco

  4. 35

    Debe establecer la representación de la imagen modo de UIImageRenderingModeAlwaysTemplate con el fin de tener la tintColor afectan a la UIImage. Aquí está la solución en Swift:

    let image = UIImage(named: "image-name")
    let button = UIButton()
    button.setImage(image?.imageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), forState: .Normal)
    button.tintColor = UIColor.whiteColor()

    OriginalEl autor Nick Wargnier

  5. 20

    Si usted tiene un botón personalizado con una imagen de fondo.Puede establecer el color del matiz de su botón y reemplazar la imagen con la siguiente .

    En activos seleccione el botón de fondo que desea establecer matiz de color.

    El atributo por el inspector de la imagen de establecer el valor de render como «la Imagen de la Plantilla»

    El Matiz De Color UIButton Imagen

    Ahora siempre que se establecebutton.tintColor = UIColor.red que el botón se mostrará en rojo.

    si usted está aquí, usted puede ir a este enlace: useyourloaf.com/blog/styling-buttons-using-the-asset-catalog y bajar a la plantilla de imágenes (para servir como una explicación)
    Esta es una mejor solución, ya que reduce el código y prácticamente hace lo mismo que el aceptado respuesta.

    OriginalEl autor Ilker Baltaci

  6. 17

    Rápido puede hacer que así:

    var exampleImage = UIImage(named: "ExampleImage.png")?.imageWithRenderingMode(.AlwaysTemplate)

    A continuación, en su viewDidLoad

    exampleButtonOutlet.setImage(exampleImage, forState: UIControlState.Normal)

    Y modificar el color

    exampleButtonOutlet.tintColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1) //your color

    EDITAR Xcode 8
    Ahora también puede, simplemente, el modo de representación de la imagen en el .xcassets a la Imagen de la Plantilla y, a continuación, usted no necesita específicamente a declarar en el var exampleImage más

    OriginalEl autor Fri3ndlyGerman

  7. 14

    No estoy seguro exactamente de lo que quieras, pero esta categoría método de la máscara de un UIImage con un color especificado, de modo que usted puede tener una sola imagen y cambiar su color a lo que usted desea.

    ImageUtils.h

    - (UIImage *) maskWithColor:(UIColor *)color;

    ImageUtils.m

    -(UIImage *) maskWithColor:(UIColor *)color 
    {
        CGImageRef maskImage = self.CGImage;
        CGFloat width = self.size.width;
        CGFloat height = self.size.height;
        CGRect bounds = CGRectMake(0,0,width,height);
    
        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
        CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
        CGContextClipToMask(bitmapContext, bounds, maskImage);
        CGContextSetFillColorWithColor(bitmapContext, color.CGColor);    
        CGContextFillRect(bitmapContext, bounds);
    
        CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
        UIImage *coloredImage = [UIImage imageWithCGImage:cImage];
    
        CGContextRelease(bitmapContext);
        CGColorSpaceRelease(colorSpace);
        CGImageRelease(cImage);
    
        return coloredImage;    
    }

    Importar el ImageUtils categoría y hacer algo como esto…

    #import "ImageUtils.h"
    
    ...
    
    UIImage *icon = [UIImage imageNamed:ICON_IMAGE];
    
    UIImage *redIcon = [icon maskWithColor:UIColor.redColor];
    UIImage *blueIcon = [icon maskWithColor:UIColor.blueColor];
    Uso kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLast en CGBitmapContextCreate
    Bueno, pero necesita ser ajustado para Retina gráficos… Cuando ejecuto esto en la Retina la imagen, lo que me devuelve un no-retina.
    Para apoyar la Retina de los dispositivos que usted puede utilizar la escala de la propiedad de la UIDevice clase: CGFloat scale = [UIScreen mainScreen].scale; CGFloat width = self.size.width * scale; CGFloat height = self.size.height * scale; La scale propiedad existe como de iOS 4.0.
    También es necesario utilizar el scale valor cuando el UIImage se crea: UIImage *coloredImage = [UIImage imageWithCGImage:cImage scale:scale orientation:self.imageOrientation];

    OriginalEl autor Kirby Todd

  8. 7

    Swift 4 con customType:

    let button = UIButton(frame: aRectHere)
        let buttonImage = UIImage(named: "imageName")
        button.setImage(buttonImage?.withRenderingMode(.alwaysTemplate), for: .normal)
        button.tintColor = .white

    OriginalEl autor aBikis

  9. 4

    Para Xamarin.iOS (C#):

            UIButton messagesButton = new UIButton(UIButtonType.Custom);
            UIImage icon = UIImage.FromBundle("Images/icon.png");
            messagesButton.SetImage(icon.ImageWithRenderingMode(UIImageRenderingMode.AlwaysTemplate), UIControlState.Normal);
            messagesButton.TintColor = UIColor.White;
            messagesButton.Frame = new RectangleF(0, 0, 25, 25);

    OriginalEl autor Maciek z Wrocławia

  10. 4

    Swift 3:

    Esta solución podría ser cómodo si usted tiene ya programados de su imagen a través de xCode interface builder. Básicamente usted tiene una extensión para colorear la imagen:

    extension UIImage {
        public func image(withTintColor color: 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.normal)
            let rect: CGRect = CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)
            context.clip(to: rect, mask: self.cgImage!)
            color.setFill()
            context.fill(rect)
            let newImage: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
            UIGraphicsEndImageContext()
            return newImage
        }
    }

    A continuación , usted puede preparar este UIButton extensión para colorear la imagen de un estado en particular:

    extension UIButton {
        func imageWith(color:UIColor, for: UIControlState) {
            if let imageForState = self.image(for: state) {
                self.image(for: .normal)?.withRenderingMode(.alwaysTemplate)
                let colorizedImage = imageForState.image(withTintColor: color)
                self.setImage(colorizedImage, for: state)
            }
        }
    }

    Uso:

    myButton.imageWith(.red, for: .normal)

    P. S. (buenos también en las celdas de la tabla, usted no necesita llamar a setNeedDisplay() método, el cambio de color es inmediata debido a la UIImage extensión..

    OriginalEl autor Alessandro Ornano

  11. 3

    Si quieres manualmente la máscara de la imagen, aquí se actualizó el código que funciona con pantallas retina

    - (UIImage *)maskWithColor:(UIColor *)color
    {
        CGImageRef maskImage = self.CGImage;
        CGFloat width = self.size.width * self.scale;
        CGFloat height = self.size.height * self.scale;
        CGRect bounds = CGRectMake(0,0,width,height);
    
        CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
        CGContextRef bitmapContext = CGBitmapContextCreate(NULL, width, height, 8, 0, colorSpace, kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLast);
        CGContextClipToMask(bitmapContext, bounds, maskImage);
        CGContextSetFillColorWithColor(bitmapContext, color.CGColor);
        CGContextFillRect(bitmapContext, bounds);
    
        CGImageRef cImage = CGBitmapContextCreateImage(bitmapContext);
        UIImage *coloredImage = [UIImage imageWithCGImage:cImage scale:self.scale orientation:self.imageOrientation];
    
        CGContextRelease(bitmapContext);
        CGColorSpaceRelease(colorSpace);
        CGImageRelease(cImage);
    
        return coloredImage;
    }

    OriginalEl autor Josh Bernfeld

  12. 2

    Usted Debe Tratar De

    Después De Establecer El Marco

    NSArray *arr10 =[NSArray arrayWithObjects:btn1,btn2,nil];
    for(UIButton *btn10 in arr10)
    {
    CAGradientLayer *btnGradient2 = [CAGradientLayer layer];
    btnGradient2.frame = btn10.bounds;
    
    btnGradient2.colors = [NSArray arrayWithObjects:
                           (id)[[UIColor colorWithRed:151.0/255.0f green:206.0/255.5 blue:99.0/255.0 alpha:1] CGColor],
                           (id)[[UIColor colorWithRed:126.0/255.0f green:192.0/255.5 blue:65.0/255.0 alpha:1]CGColor],
                           nil];
    [btn10.layer insertSublayer:btnGradient2 atIndex:0];
    
    }

    OriginalEl autor guptha

  13. 1

    Swift 3.0

        let image = UIImage(named:"NoConnection")!
    
     warningButton = UIButton(type: .system)        
        warningButton.setImage(image, for: .normal)
        warningButton.tintColor = UIColor.lightText
        warningButton.frame = CGRect(origin: CGPoint(x:-100,y:0), size: CGSize(width: 59, height: 56))
    
        self.addSubview(warningButton)

    OriginalEl autor Jad

  14. 1

    Botón de cambio de imagen o la imagen vista de matiz de color de Swift :

    btn.imageView?.imagen = btn.imageView?.de la imagen?.withRenderingMode(.alwaysTemplate)

    btn.imageView?.tintColor = #colorLiteral(rojo: 0, de color verde: 0, de color azul: 0, alfa: 1)

    podría usted por favor el formato de este código?

    OriginalEl autor Urvish Modi

  15. 0

    Ninguno de los anteriormente trabajó para mí, porque el tinte fue absuelto después de que haga clic en. Tuve que usar

    button.setImageTintColor(Palette.darkGray(), for: UIControlState())

    OriginalEl autor Szymon Klimaszewski

Dejar respuesta

Please enter your comment!
Please enter your name here