iOS White to Transparent Gradient Layer เป็นสีเทา

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

ในSwiftสิ่งนี้ใช้ได้ผลสำหรับฉัน

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]