La capa de degradado de blanco a transparente de iOS es gris

Tengo un CAGradientLayer insertado en la parte inferior de esta pequeña vista de detalle que aparece en la parte inferior de la aplicación. Como puede ver, he configurado los colores de blanco a claro, pero aparece este extraño tinte gris. ¿Algunas ideas?

    // Set up detail view frame and gradient
    [self.detailView setFrame:CGRectMake(0, 568, 320, 55)];

    CAGradientLayer *layer = [CAGradientLayer layer];
    layer.frame = self.detailView.bounds;
    layer.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor, nil];
    layer.startPoint = CGPointMake(1.0f, 0.7f);
    layer.endPoint = CGPointMake(1.0f, 0.0f);
    [self.detailView.layer insertSublayer:layer atIndex:0];

Aquí está la vista problemática:

clearColor tiene un canal de color negro con un alfa de 0, así que tuve que usar

[UIColor colorWithWhite:1 alpha:0]

y funciona bien.

En Swift Esto funcionó para mí,

UIColor.white.withAlphaComponent(0).cgColor

Vale la pena señalar que cualquier otro color funcionará así ... usando una combinación de las dos respuestas anteriores ...

C objetivo

UIColor *colour = [UIColor redColor];
NSArray *colourArray = @[(id)[colour colorWithAlphaComponent:0.0f].CGColor,(id)colour.CGColor]
NSArray *locations = @[@0.2,@0.8];

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = colourArray;
gradientLayer.locations = locations;
gradientLayer.frame = self.frame;

[self.layer addSublayer:gradientLayer];

Swift 3

let colour:UIColor = .red
let colours:[CGColor] = [colour.withAlphaComponent(0.0).cgColor,colour.cgColor]
let locations:[NSNumber] = [0.2,0.8]

let gradientLayer = CAGradientLayer()
gradientLayer.colors = colours
gradientLayer.locations = locations
gradientLayer.frame = frame

layer.addSublayer(gradientLayer)

Sintaxis Swift 3,

UIColor(white: 1, alpha: 0).cgColor

Las respuestas anteriores como:

UIColor.white.withAlphaComponent(0).cgColor

y

UIColor(white: 1.0, alpha: 0.0).cgColor

debería funcionar en términos de hacer que una parte de su gradiente sea clara (en lugar del gris al que se refiere OP). Sin embargo, si todavía ve un blanco transparente cuando debería ver un color claro, asegúrese backgroundColorde que la vista a la que está aplicando el degradado también sea clara.

De forma predeterminada, es probable que el color de fondo de esa vista sea blanco (o un color oscuro si el dispositivo está en modo oscuro), por lo que cuando aplique el degradado, la parte clara será "bloqueada" por la backgroundColorpropia vista . Configure eso para borrar y debería estar listo para comenzar.

Como muchos, todavía tengo un color gris a pesar de usar un blanco claro.

Así que cambié mi enfoque y opté por una máscara en lugar de un degradado. El resultado final es el mismo, bueno, mejor, ya que este funciona en todas las situaciones, no solo si tienes un fondo adecuado.

No probé este código con IB, pero espero que también funcione. Simplemente configúrelo backgroundColory estará listo para comenzar .

@IBDesignable
class FadingView: UIView {

    @IBInspectable var startLocation: Double =   0.05 { didSet { updateLocations() }}
    @IBInspectable var endLocation:   Double =   0.95 { didSet { updateLocations() }}
    @IBInspectable var horizontalMode:  Bool =  false { didSet { updatePoints() }}
    @IBInspectable var diagonalMode:    Bool =  false { didSet { updatePoints() }}
    @IBInspectable var invertMode:      Bool =  false { didSet { updateColors() }}

    private let gradientLayerMask = CAGradientLayer()

    private func updatePoints() {
        if horizontalMode {
            gradientLayerMask.startPoint = diagonalMode ? CGPoint(x: 1, y: 0) : CGPoint(x: 0, y: 0.5)
            gradientLayerMask.endPoint   = diagonalMode ? CGPoint(x: 0, y: 1) : CGPoint(x: 1, y: 0.5)
        } else {
            gradientLayerMask.startPoint = diagonalMode ? CGPoint(x: 0, y: 0) : CGPoint(x: 0.5, y: 0)
            gradientLayerMask.endPoint   = diagonalMode ? CGPoint(x: 1, y: 1) : CGPoint(x: 0.5, y: 1)
        }
    }

    private func updateLocations() {
        gradientLayerMask.locations = [startLocation as NSNumber, endLocation as NSNumber]
    }

    private func updateSize() {
        gradientLayerMask.frame = bounds
    }

    private func updateColors() {
        gradientLayerMask.colors = invertMode ? [UIColor.white.cgColor, UIColor.clear.cgColor] : [UIColor.clear.cgColor, UIColor.white.cgColor]
    }

    private func commonInit() {
        layer.mask = gradientLayerMask
    }

    override init(frame: CGRect) {
        super.init(frame: frame)
        commonInit()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        commonInit()
    }

    override func layoutSubviews() {
        super.layoutSubviews()
        updatePoints()
        updateLocations()
        updateSize()
        updateColors()
    }
}

Vale la pena señalar que para manejar degradados de blanco / negro (o realmente cualquier color con apariencia clara / oscura) basados ​​en el modo claro / oscuro en iOS 13, este enfoque también funciona con los nuevos colores del sistema:

gradientLayer.colors = [
    UIColor.systemBackground.cgColor,
    UIColor.systemBackground.withAlphaComponent(0).cgColor]