iOS白色到透明渐变层为灰色


87

我在此小细节视图的底部插入了一个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];

这是有问题的视图:

这是有问题的观点


该层下面是什么?
trojanfoe 2014年

MapView。我可以将图层设置为使用clearColor和clearColor,它将完全透明。
Eric Gao

我想要得到的是:该层下面的层是灰色的吗?
trojanfoe 2014年

不。不应该将索引为0的insertSublayer放在最深的一层吗?而且,如果我不插入子层,则视图的背景应该是清晰的。仅当我设置渐变时,灰色才会显示出来。
Eric Gao

您是否尝试过将其设置为self.detailView.layer.mask?(self.detailView.layer.mask = layer;)
Akaino 2014年

Answers:


185

clearColor的黑色通道的alpha值为0,所以我不得不使用

[UIColor colorWithWhite:1 alpha:0]

而且效果很好。


16
它用白色阴影代替黑色阴影。仍然不透明
RealNmae

2
重要提示-对于2018年,请考虑以下方法:stackoverflow.com/a/25408833/294884
Fattie

7
@RealNmae如果要从一种颜色清除,请使用UIColor.startColor和UIColor.startColor.withAlphaComponent(0.0)作为两种颜色。
科纳

@Conor这实际上是正确的答案-谢谢,无论颜色如何,效果都很好
SomaMan


21

值得指出的是,结合使用以上两个答案,其他任何颜色都可以像这样工作。

目标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)


1

上面的答案如:

UIColor.white.withAlphaComponent(0).cgColor

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

应该可以使渐变的一部分变得清晰(而不是OP所指的灰色)。但是,如果在看到清晰的颜色时仍然看到透明的白色,请确保backgroundColor要应用渐变的视图也清晰。

默认情况下,该视图的背景颜色很可能是白色(如果设备处于黑暗模式,则为深色),因此,当您应用渐变时,视图的backgroundColor自身的“空白”将被其“遮挡” 。将其设置为清除,然后就可以开始使用了。


0

尽管使用了清晰的白色,但还是有很多灰色。

所以我改变了方法,选择了遮罩而不是渐变。最终结果是相同的,很好,更好,因为这一方法在所有情况下都有效,而不仅仅是您拥有合适的背景。

我没有在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()
    }
}

0

值得注意的是,基于iOS 13中的亮/暗模式来处理白色/黑色(或几乎任何具有亮/暗外观的颜色)渐变,这种方法也适用于新系统颜色:

gradientLayer.colors = [
    UIColor.systemBackground.cgColor,
    UIColor.systemBackground.withAlphaComponent(0).cgColor] 
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.