color - CAGradientLayer horizontal en iOS 7.0

gradient view swift 4

Question

Dentro de mi aplicación, uso un CAGradientLayer para establecer el fondo de mi celda, de esta manera:

retValue = [tableView dequeueReusableCellWithIdentifier:@"Cells" forIndexPath:indexPath];
UIView *bgColorView = [[UIView alloc] init];
bgColorView.backgroundColor = [UIColor blueColor];
bgColorView.layer.masksToBounds = YES;
id startColor = (id)[[UIColor colorWithWhite:0.75 alpha:1] CGColor];
id endColor = (id)[[UIColor blueColor] CGColor];
CAGradientLayer* gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = retValue.contentView.bounds;
gradientLayer.colors = @[startColor,startColor,endColor,endColor];
gradientLayer.locations = @[[NSNumber numberWithFloat:0],
[NSNumber numberWithFloat:0.95],
[NSNumber numberWithFloat:0.95],
[NSNumber numberWithFloat:1]];
[gradientLayer setStartPoint:CGPointMake(0,0.5)];
[gradientLayer setEndPoint:CGPointMake(1,0.5)];
[bgColorView.layer addSublayer:gradientLayer];
retValue.selectedBackgroundView = bgColorView;

(este código está dentro de - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath )

Funciona bien en iOS 6, pero no funciona en iOS 7, en el nuevo iOS el gradiente es siempre vertical (se ignoran startPoint y endPoint)

¿Alguien encontrado en el mismo problema?

Gracias,

Sidra de pera

Answer 1

Acabo de encontrarlo ahora, 3 años después. Gracias Gord por esta solución. Aquí está en 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)
}

Answer 2

En Swift 4 he implementado una extensión de trabajo agradable:

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

Answer 3

Esta pregunta es bastante antigua, pero la encontré, por lo que es probable que otros también lo hagan. El siguiente código producirá un gradiente horizontal que se ejecuta en un simulador de iPhone con la versión 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];
}

No estoy seguro de por qué su código no funciona, pero tengo un comportamiento extraño si no configuro el punto de anclaje, aunque el degradado todavía es horizontal. Tal vez tenga algo que ver con que se trate de una vista de fondo de celda: podría intentar aplicar el gradiente a la tabla subyacente.