iOS 흰색에서 투명 그라디언트 레이어는 회색입니다.

앱 하단에 나타나는이 작은 상세보기의 하단에 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];

다음은 문제가있는보기입니다.

clearColor에는 알파가 0 인 검정색 채널이 있으므로

[UIColor colorWithWhite:1 alpha:0]

잘 작동합니다.

에서 스위프트 이것은 나를 위해 일한

UIColor.white.withAlphaComponent(0).cgColor

위의 두 답변을 조합하여 다른 색상이 이와 같이 작동한다는 점을 지적 할 가치가 있습니다 ....

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

스위프트 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)

Swift 3 구문,

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

위의 답변 :

UIColor.white.withAlphaComponent(0).cgColor

과

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

그라디언트의 일부를 명확하게 만드는 측면에서 작동해야합니다 (OP가 참조하는 회색이 아닌). 그러나 선명한 색상을 표시해야 할 때 여전히 투명한 흰색 backgroundColor이 표시되는 경우 그래디언트를 적용하는 뷰 의 투명성도 확인해야합니다 .

기본적으로 해당 뷰의 배경색은 흰색 (또는 장치가 어두운 모드 인 경우 어두운 색상)이 될 수 있으므로 그래디언트를 적용 할 때 뷰 backgroundColor자체에 의해 명확한 부분이 "차단"됩니다 . 그것을 지울 수 있도록 설정하십시오.

많은 사람들이 깨끗한 흰색을 사용 함에도 불구하고 여전히 회색을 얻었습니다.

그래서 저는 접근 방식을 바꾸고 그라디언트 대신 마스크를 사용했습니다. 최종 결과는 똑같습니다. 적절한 배경이있는 경우뿐만 아니라 모든 상황에서 작동하기 때문입니다.

이 코드를 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()
    }
}

iOS 13에서 밝은 / 어두운 모드를 기반으로 흰색 / 검정색 (또는 실제로 밝은 / 어두운 모양의 모든 색상) 그라디언트를 처리하려면이 접근 방식이 새로운 시스템 색상에서도 작동한다는 점에 주목할 가치가 있습니다.

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