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

87

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:

Aquí está la vista problemática

Eric Gao
fuente
¿Qué hay debajo de la capa?
trojanfoe
El MapView. Puedo configurar la capa para usar clearColor y clearColor y será completamente transparente.
Eric Gao
A lo que estoy tratando de llegar: ¿la capa debajo de esta capa es gris?
trojanfoe
No ... ¿No debería insertSublayer en el índice 0 poner esta capa en la capa más profunda? Y si no inserto la subcapa, el fondo de la vista es tan claro como debería ser. Solo cuando configuro el degradado aparece ese color gris.
Eric Gao
¿Ha intentado configurarlo en self.detailView.layer.mask en su lugar? (self.detailView.layer.mask = layer;)
Akaino

Respuestas:

185

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.

Eric Gao
fuente
16
Reemplaza la sombra negra con la sombra blanca. Todavía no es transparente
RealNmae
2
Importante : para 2018, considere este enfoque: stackoverflow.com/a/25408833/294884
Fattie
7
@RealNmae Si desea pasar de un color a claro, use UIColor.startColor y UIColor.startColor.withAlphaComponent (0.0) como sus dos colores.
Conor
@Conor Esta es en realidad la respuesta correcta - gracias, funciona perfectamente independientemente del color
SomaMan
60

En Swift Esto funcionó para mí,

UIColor.white.withAlphaComponent(0).cgColor
Mohammad Zaid Pathan
fuente
3
¡No olvide agregar el .cgColor como se muestra en la respuesta! Usé accidentalmente UIColor.white.withAlphaComponent (0) y me rasqué la cabeza durante una hora preguntándome por qué todavía estaba gris.
SnoopyProtocol
21

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)
Magoo
fuente
12

Sintaxis Swift 3,

UIColor(white: 1, alpha: 0).cgColor
Stuart Casarotto
fuente
1

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.

Brian Sachetta
fuente
0

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()
    }
}
Tancrede Chazallet
fuente
0

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] 
Jake
fuente