iOS White to Transparent Gradient Layer adalah Grey

Saya memiliki CAGradientLayer yang dimasukkan ke bagian bawah tampilan detail kecil ini yang muncul di bagian bawah aplikasi. Seperti yang Anda lihat, saya telah mengatur warna dari putih menjadi jernih, tetapi ada warna abu-abu aneh yang muncul. Ada ide?

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

Berikut adalah tampilan yang bermasalah:

clearColor memiliki saluran warna hitam dengan alpha 0, jadi saya harus menggunakan

[UIColor colorWithWhite:1 alpha:0]

dan itu bekerja dengan baik.

Di Swift Ini berhasil untuk saya,

UIColor.white.withAlphaComponent(0).cgColor

Perlu diketahui bahwa warna lain akan bekerja seperti ini ... menggunakan kombinasi dari dua jawaban di atas ....

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

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

Sintaks Swift 3,

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

Jawaban di atas seperti:

UIColor.white.withAlphaComponent(0).cgColor

dan

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

harus bekerja dalam hal mendapatkan sebagian dari gradien Anda menjadi jelas (bukan abu-abu yang dirujuk OP). Namun, jika Anda masih melihat putih transparan saat Anda seharusnya melihat warna yang jelas, pastikan backgroundColortampilan tempat Anda menerapkan gradien juga jelas.

Secara default, warna latar tampilan tersebut kemungkinan besar akan menjadi putih (atau warna gelap jika perangkat dalam mode gelap), jadi saat Anda menerapkan gradien, bagian yang jelas akan "diblokir" oleh tampilan itu backgroundColorsendiri. Atur itu menjadi jelas dan Anda harus melakukannya dengan baik.

Sebanyak itu, saya masih mendapat warna abu-abu meski menggunakan putih bening.

Jadi saya mengubah pendekatan saya dan memilih topeng daripada gradien. Hasil akhirnya sama, yah, lebih baik, karena yang satu ini berfungsi di semua situasi, tidak hanya jika Anda memiliki latar belakang yang sesuai.

Saya tidak mencoba kode ini dengan IB, tapi semoga berhasil juga. Atur saja backgroundColordan Anda siap berangkat.

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

Perlu dicatat bahwa untuk menangani gradien putih / hitam (atau warna apa pun dengan tampilan terang / gelap) berdasarkan mode terang / gelap di iOS 13 bahwa pendekatan ini juga berfungsi dengan warna sistem baru:

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