iOS Changing half of the image's color

Question

I have a single image that looks like this…

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

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

UPDATE 2

Answer 1

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 :

Answer 2

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

Answer 3

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

Answer 4

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