Transparency Gradient on UIImageView

Question

I could imagine that I am trying to do this quite simply, but I cannot figure it out. I know how to apply a gradient to UIImageusing UIImageView, but that’s not what I want. What I want to do is keep the borders of the image so that the UIImagetop half is UIImagecompletely transparent. I want to be able to see the view behind UIImagewith the bottom of the image still fully visible (not opaque).

Any ideas? Any help would be greatly appreciated.

Answer 1

The easiest way to do this is to use the CAGradientLayer as the layer mask in other words, use its opacity to determine the opacity of the layer to which it is attached. Something in this direction should do the trick:

CALayer *imageViewLayer = theImageView.layer;
CAGradientLayer *maskLayer = [CAGradientLayer layer];
maskLayer.colors = @[ (id)([UIColor blackColor].CGColor), (id)([UIColor clearColor].CGColor) ]; // gradient from 100% opacity to 0% opacity (non-alpha components of the color are ignored)
// startPoint and endPoint (used to position/size the gradient) are in a coordinate space from the top left to bottom right of the layer: (0,0)–(1,1)
maskLayer.startPoint = CGPointMake(0, 0.5); // middle left
maskLayer.endPoint = CGPointMake(0, 0); // top left
maskLayer.frame = imageViewLayer.bounds; // line it up with the layer it’s masking
imageViewLayer.mask = maskLayer;

Answer 2

It is very important not to forget to remove the sublevel from the image sublayers, the remaining cells will have more than 1 sublevel and will be filled with color without a gradient. I tried to do this on awakeFromNib, but it works poorly - the width of the container is unknown when awakeFromNib is called, so you can get the gradient without the full width.

- (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath
{
    static NSString *simpleTableIdentifier = @"actionsTableCell";

    actionsTableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:simpleTableIdentifier forIndexPath:indexPath];
    CAGradientLayer *gradient = [CAGradientLayer layer];
    gradient.frame = cell.myImage.bounds;
    gradient.colors = @[(id)[[UIColor clearColor] CGColor],
                    (id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:.5] CGColor],
                    (id)[[UIColor colorWithRed:0 green:0 blue:0 alpha:1] CGColor]];
    [[cell.myImage.layer.sublayers objectAtIndex:0] removeFromSuperlayer];
    [cell.myImage.layer addSublayer:gradient];

    cell.header.text = [recipes objectAtIndex:indexPath.row];
    return cell;
}

Answer 3

Noah . , , , layer.mask CALayer. , UIImageViews .

    CALayer *_layerImage = _imageViewBackground.layer;
    CGRect _rect = _imageViewBackground.bounds;

    __block CAGradientLayer *_maskLayer = nil;

    [_layerImage.sublayers enumerateObjectsUsingBlock:^(CALayer * _Nonnull obj, NSUInteger idx, BOOL * _Nonnull stop) {
        if ([obj isKindOfClass:[CAGradientLayer class]]) {
            _maskLayer = (CAGradientLayer*) obj;
            *stop = YES;
        }
    }];

    BOOL _found = YES;
    if (!_maskLayer) {
        _maskLayer = [CAGradientLayer layer];
        _found = NO;
    }

    _maskLayer.colors = @[ (id)([UIColor redColor].CGColor), (id)([UIColor clearColor].CGColor) ]; // gradient from 100% opacity to 0% opacity (non-alpha components of the color are ignored)
    // startPoint and endPoint (used to position/size the gradient) are in a coordinate space from the top left to bottom right of the layer: (0,0)–(1,1)
    _maskLayer.startPoint = CGPointMake(0, 0);
    _maskLayer.endPoint = CGPointMake(1, 1);
    _maskLayer.frame = _rect; // line it up with the layer it’s masking

    dispatch_async(dispatch_get_main_queue(), ^{
        if (!_found) {
            [_layerImage addSublayer:_maskLayer];
        }
    });

Hope this helps!

Answer 4

Noah Swift version 5.0 (and 4.2 ):

let maskLayer = CAGradientLayer(layer: theImageView.layer)
maskLayer.colors = [UIColor.black.cgColor, UIColor.clear.cgColor]
maskLayer.startPoint = CGPoint(x: 0, y: 0.5)
maskLayer.endPoint = CGPoint(x: 0, y: 0)
maskLayer.frame = theImageView.bounds
theImageView.layer.mask = maskLayer