Шар від білого до прозорого градієнта iOS - сірий

Question 1

У мене вставлено CAGradientLayer внизу цього маленького подання деталей, яке з’являється внизу програми. Як бачите, я встановив кольори від білого до прозорого, але з'являється цей дивний сірий відтінок. Будь-які ідеї?

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

Ось проблемний погляд:

Question 2

clearColor має чорний кольоровий канал з альфа-0, тому мені довелося скористатися

[UIColor colorWithWhite:1 alpha:0]

і це чудово працює.

Question 3

У Свіфті Це спрацювало для мене,

UIColor.white.withAlphaComponent(0).cgColor

Question 4

Варто зазначити, що будь-який інший колір буде працювати так ... використовуючи комбінацію двох відповідей вище ....

Завдання С

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

Стрімкий 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)

Question 5

Синтаксис Swift 3,

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

Question 6

Відповіді вище, такі як:

UIColor.white.withAlphaComponent(0).cgColor

і

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

має працювати з точки зору отримання частини вашого градієнта чіткою (а не сірого кольору, на який посилається OP). Однак, якщо ви все ще бачите прозорий білий, коли ви повинні бачити чіткий колір, переконайтеся, backgroundColorщо вигляд, до якого ви застосовуєте градієнт, також чіткий.

За замовчуванням фоновий колір цього подання, швидше за все, буде білим (або темним кольором, якщо пристрій перебуває в темному режимі), тому, коли ви застосовуєте градієнт, його прозора частина буде "заблокована" самим видом backgroundColor. Встановіть це, щоб очистити, і вам повинно бути добре.

Question 7

Як і багато інших, я все-таки отримав сірий колір, незважаючи на використання прозорого білого.

Тому я змінив свій підхід і скористався маскою, а не градієнтом. Кінцевий результат однаковий, ну, краще, оскільки цей працює у будь-яких ситуаціях, а не лише у тому випадку, якщо у вас є відповідне тло.

Я не пробував цей код з IB, але, сподіваюся, він теж працює. Просто встановіть, backgroundColorі ви готові піти.

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

Question 8

Варто зазначити, що для обробки градієнтів білого / чорного (або насправді будь-якого кольору зі світлим / темним виглядом) на основі режиму світло / темно в iOS 13 цей підхід також працює з новими системними кольорами:

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