Lo strato sfumato da bianco a trasparente iOS è grigio


87

Ho un CAGradientLayer inserito nella parte inferiore di questa piccola visualizzazione dei dettagli che si apre nella parte inferiore dell'app. Come puoi vedere, ho impostato i colori da bianco a chiaro, ma c'è questa strana tinta di grigio che sta mostrando. Qualche idea?

    // 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];

Ecco la vista problematica:

Ecco la vista problematica


Cosa c'è sotto lo strato?
trojanfoe

Il MapView. Posso impostare il livello per utilizzare clearColor e clearColor e sarà completamente trasparente.
Eric Gao

Quello che sto cercando di ottenere: il livello sotto questo livello è grigio?
trojanfoe

No ... non dovrebbe insertSublayer all'indice 0 mettere questo livello sul livello più profondo? E se non inserisco il sottolivello, lo sfondo della vista è chiaro come dovrebbe essere. È solo quando imposto il gradiente che viene visualizzato quel colore grigio.
Eric Gao

Hai provato invece a impostarlo su self.detailView.layer.mask? (self.detailView.layer.mask = layer;)
Akaino

Risposte:


185

clearColor ha un canale di colore nero con un alfa di 0, quindi ho dovuto usare

[UIColor colorWithWhite:1 alpha:0]

e funziona bene.


16
Sostituisce l'ombra nera con l'ombra bianca. Ancora non trasparente
RealNmae

2
Importante - per il 2018, in considerazione questo approccio: stackoverflow.com/a/25408833/294884
Fattie

7
@RealNmae Se vuoi passare da un colore a un colore chiaro usa UIColor.startColor e UIColor.startColor.withAlphaComponent (0.0) come i tuoi due colori.
Conor

@Conor Questa è in realtà la risposta corretta - grazie, funziona perfettamente indipendentemente dal colore
SomaMan

60

In Swift questo ha funzionato per me,

UIColor.white.withAlphaComponent(0).cgColor

3
Non dimenticare di aggiungere il .cgColor come mostrato nella risposta !!! Ho usato accidentalmente UIColor.white.withAlphaComponent (0) e mi sono grattato la testa per un'ora chiedendomi perché fosse ancora grigio.
Protocollo Snoopy

21

Vale la pena sottolineare che qualsiasi altro colore funzionerà in questo modo ... utilizzando una combinazione delle due risposte sopra ...

Obiettivo C

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)


1

Le risposte di cui sopra come:

UIColor.white.withAlphaComponent(0).cgColor

e

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

dovrebbe funzionare in termini di rendere chiara una parte del gradiente (piuttosto che il grigio a cui si riferisce OP). Tuttavia, se stai ancora vedendo un bianco trasparente quando dovresti vedere un colore chiaro, assicurati che anche backgroundColorla vista a cui stai applicando il gradiente sia chiara.

Per impostazione predefinita, il colore di sfondo di quella vista sarà probabilmente bianco (o un colore scuro se il dispositivo è in modalità scura), quindi quando applichi il gradiente, la parte chiara sarà "bloccata" dalla vista backgroundColorstessa. Impostalo su chiaro e dovresti essere a posto.


0

Come molti, ho ancora ottenuto un colore grigio nonostante abbia usato un bianco trasparente.

Quindi ho cambiato il mio approccio e ho optato per una maschera piuttosto che un gradiente. Il risultato finale è lo stesso, beh, migliore, poiché questo funziona in tutte le situazioni, non solo se hai uno sfondo adatto.

Non ho provato questo codice con IB, ma spero che funzioni anche. Basta impostare backgroundColore sei a posto.

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

0

Vale la pena notare che per gestire i gradienti bianco / nero (o davvero qualsiasi colore con aspetti chiari / scuri) basati sulla modalità chiaro / scuro in iOS 13, questo approccio funziona anche con i nuovi colori di sistema:

gradientLayer.colors = [
    UIColor.systemBackground.cgColor,
    UIColor.systemBackground.withAlphaComponent(0).cgColor] 
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.