horizontal CAGradientLayer in iOS 7.0 horizontal CAGradientLayer in iOS 7.0 ios ios

horizontal CAGradientLayer in iOS 7.0


This questions is fairly old, but I came across it, so others likely will as well. The following code will produce a horizontal gradient running on an iPhone simulator with version 7.0.3

+ (void)drawGradientOverContainer:(UIView *)container{    UIColor *transBgColor = [UIColor colorWithWhite:1.0 alpha:0.0];    UIColor *black = [UIColor blackColor];    CAGradientLayer *maskLayer = [CAGradientLayer layer];    maskLayer.opacity = 0.8;    maskLayer.colors = [NSArray arrayWithObjects:(id)black.CGColor,     (id)transBgColor.CGColor, (id)transBgColor.CGColor, (id)black.CGColor, nil];    // Hoizontal - commenting these two lines will make the gradient veritcal    maskLayer.startPoint = CGPointMake(0.0, 0.5);    maskLayer.endPoint = CGPointMake(1.0, 0.5);    NSNumber *gradTopStart = [NSNumber numberWithFloat:0.0];    NSNumber *gradTopEnd = [NSNumber numberWithFloat:0.4];    NSNumber *gradBottomStart = [NSNumber numberWithFloat:0.6];    NSNumber *gradBottomEnd = [NSNumber numberWithFloat:1.0];    maskLayer.locations = @[gradTopStart, gradTopEnd, gradBottomStart, gradBottomEnd];    maskLayer.bounds = container.bounds;    maskLayer.anchorPoint = CGPointZero;    [container.layer addSublayer:maskLayer];}

I'm not sure why your code doesn't work, but I get odd behaviour if I do not set the anchor point - the gradient is still horizontal though. Maybe it has something to do with it being a cell background view - you could try applying the gradient to the underlying table.


In Swift 4 I've implemented a nice working extension:

extension UIView {    enum GradientColorDirection {        case vertical        case horizontal    }    func showGradientColors(_ colors: [UIColor], opacity: Float = 1, direction: GradientColorDirection = .vertical) {        let gradientLayer = CAGradientLayer()        gradientLayer.opacity = opacity        gradientLayer.colors = colors.map { $0.cgColor }        if case .horizontal = direction {            gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.0)            gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.0)        }        gradientLayer.bounds = self.bounds        gradientLayer.anchorPoint = CGPoint.zero        self.layer.addSublayer(gradientLayer)    }}


Just came across it now, 3 years after. Thank you Gord for this solution. Here it is in Swift 3.0:

func drawGradientOver(container: UIView) {    let transBgColor = UIColor.clear    let black = UIColor.black    let maskLayer = CAGradientLayer()    maskLayer.opacity = 0.8    maskLayer.colors = [black.cgColor, transBgColor.cgColor, transBgColor.cgColor, black.cgColor]    // Hoizontal - commenting these two lines will make the gradient veritcal    maskLayer.startPoint = CGPoint(x: 0.0, y: 0.5)    maskLayer.endPoint = CGPoint(x: 1.0, y: 0.5)    let gradTopStart = NSNumber(value: 0.0)    let gradTopEnd = NSNumber(value: 0.4)    let gradBottomStart = NSNumber(value: 0.6)    let gradBottomEnd = NSNumber(value: 1.0)    maskLayer.locations = [gradTopStart, gradTopEnd, gradBottomStart, gradBottomEnd]    maskLayer.bounds = container.bounds    maskLayer.anchorPoint = CGPoint.zero    container.layer.addSublayer(maskLayer)}