Od bieli iOS do przezroczystej warstwy gradientu jest szary

Mam CAGradientLayer wstawioną na dole tego małego widoku szczegółowego, który pojawia się u dołu aplikacji. Jak widać, ustawiłem kolory z białego na wyraźne, ale pojawia się ten dziwny szary odcień. Jakieś pomysły?

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

Oto problematyczny widok:

clearColor ma czarny kanał koloru z alfa 0, więc musiałem użyć

[UIColor colorWithWhite:1 alpha:0]

i działa dobrze.

W Swift To zadziałało dla mnie,

UIColor.white.withAlphaComponent(0).cgColor

Warto zauważyć, że każdy inny kolor będzie działał w ten sposób ... używając kombinacji dwóch powyższych odpowiedzi ....

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

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

Składnia Swift 3,

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

Powyższe odpowiedzi, takie jak:

UIColor.white.withAlphaComponent(0).cgColor

i

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

powinien działać w kategoriach uzyskania wyraźnego fragmentu gradientu (zamiast szarego, do którego odnosi się OP). Jeśli jednak nadal widzisz przezroczystą biel, podczas gdy powinieneś widzieć wyraźny kolor, upewnij się, backgroundColorże widok, do którego stosujesz gradient, również jest wyraźny.

Domyślnie kolor tła tego widoku będzie prawdopodobnie biały (lub ciemny kolor, jeśli urządzenie jest w trybie ciemnym), więc po zastosowaniu gradientu jego wyraźna część zostanie „zablokowana” przez sam widok backgroundColor. Ustaw to, aby było jasne i powinieneś być gotowy.

Tyle samo, mimo zastosowania czystej bieli nadal mam szary kolor.

Więc zmieniłem podejście i wybrałem maskę zamiast gradientu. Efekt końcowy jest taki sam, no cóż, lepszy, ponieważ ten działa w każdej sytuacji, nie tylko wtedy, gdy masz odpowiednie tło.

Nie próbowałem tego kodu z IB, ale mam nadzieję, że to też działa. Po prostu ustaw backgroundColori gotowe.

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

Warto zauważyć, że aby obsługiwać gradienty biały / czarny (lub naprawdę dowolny kolor z jasnymi / ciemnymi efektami) w oparciu o tryb jasny / ciemny w iOS 13, podejście to działa również z nowymi kolorami systemowymi:

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