iOS Changing half of the image's color

Question

I have a single image that looks like this…

enter image description here

What I have to achieve is that I have to change the color of the lower half of this image.. like this one.. enter image description here

I've tried using CAGradientLayer, Masking but no luck getting the result..

any help would be great.. Thanks in advance..

UPDATE 1

This is what em getting after this code.. One thing i need to add is that image is resized before using..

enter image description here

UPDATE 2

enter image description here

Why not just edit the image in a photo editor and add it back to the project? If you want to switch between the two images.. just use two images so it gives the effect you're after? — Robert J. Clegg, Apr 09 '14 at 11:23
Are you using a Label to show the text "There" or is it i the image itself.? If you are using a label to show the text then how about provinding the necessary background color to the UILabel itself. — borncrazy, Apr 09 '14 at 11:36
http://stackoverflow.com/questions/12396236/ios-change-the-colors-of-a-uiimage/12399760#12399760 — Arun, Apr 09 '14 at 12:00

score 9 · Accepted Answer · answered Apr 09 '14 at 12:02

you made me some good challenge with this, but here you go:

Method that return image with bottom half coloured with some colour

- (UIImage *)image:(UIImage *)image withBottomHalfOverlayColor:(UIColor *)color
{
    CGRect rect = CGRectMake(0.f, 0.f, image.size.width, image.size.height);

    if (UIGraphicsBeginImageContextWithOptions) {
        CGFloat imageScale = 1.f;
        if ([self respondsToSelector:@selector(scale)])
            imageScale = image.scale;
        UIGraphicsBeginImageContextWithOptions(image.size, NO, imageScale);
    }
    else {
        UIGraphicsBeginImageContext(image.size);
    }

    [image drawInRect:rect];

    CGContextRef context = UIGraphicsGetCurrentContext();
    CGContextSetBlendMode(context, kCGBlendModeSourceIn);

    CGContextSetFillColorWithColor(context, color.CGColor);

    CGRect rectToFill = CGRectMake(0.f, image.size.height*0.5f, image.size.width, image.size.height*0.5f);
    CGContextFillRect(context, rectToFill);

    UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return newImage;
}

Example of use :

    UIImage *image = [UIImage imageNamed:@"q.png"];
    image = [self image:image withBottomHalfOverlayColor:[UIColor cyanColor]];
    self.imageView.image = image;

My results : enter image description here

this is what i've used for resizing `UIImage *bgImage = [[UIImage imageNamed:@"TM-Bubbles-Blue"] resizableImageWithCapInsets: UIEdgeInsetsMake(30, 32, 30, 23) resizingMode: UIImageResizingModeStretch];` — Ahmed Z., Apr 09 '14 at 12:18
This worked great for me, thank you so much!. I translated it into Swift, will post below. — Coder1224, Jan 06 '17 at 20:56

score 6 · Answer 2 · edited Nov 12 '19 at 18:35

In Swift 4. Some Changes

func withBottomHalfOverlayColor(myImage: UIImage, color: UIColor) -> UIImage
  {
    let rect = CGRect(x: 0, y: 0, width: myImage.size.width, height: myImage.size.height)


    UIGraphicsBeginImageContextWithOptions(myImage.size, false, myImage.scale)
    myImage.draw(in: rect)

    let context = UIGraphicsGetCurrentContext()!
    context.setBlendMode(CGBlendMode.sourceIn)

    context.setFillColor(color.cgColor)

    let rectToFill = CGRect(x: 0, y: myImage.size.height*0.5, width: myImage.size.width, height: myImage.size.height*0.5)
    context.fill(rectToFill)

    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return newImage!
  }

score 0 · Answer 3 · answered Apr 09 '14 at 11:24

0

You can use some tricks:

Use 2 different images and change the whole background.
Use one background color (light blue) and 2 images, one with the bottom half transparent

answered Apr 09 '14 at 11:24

txulu

1,602
16
26

i have to calculate the size of the background image and then place it on view – Ahmed Z. Apr 09 '14 at 11:29
In my experience, drawing such pixel perfect and complicate composite views is achieved more easily with images and tricks like those ones than by writing very complex drawing code. Also, you should consider making that widget two separate views or something like that. – txulu Apr 09 '14 at 16:47

score 0 · Answer 4 · answered Apr 12 '22 at 16:14

Swift 5 extension

extension UIImage {
    func withBottomHalfOverlayColor(color: UIColor) -> UIImage
      {
        let rect = CGRect(x: 0, y: 0, width: size.width, height: size.height)


        UIGraphicsBeginImageContextWithOptions(size, false, scale)
        draw(in: rect)

        let context = UIGraphicsGetCurrentContext()!
        context.setBlendMode(CGBlendMode.sourceIn)

        context.setFillColor(color.cgColor)

        let rectToFill = CGRect(x: 0, y: size.height*0.5, width: size.width, height: size.height*0.5)
        context.fill(rectToFill)

        let newImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()

        return newImage!
      }
}

iOS Changing half of the image's color

4 Answers4