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;)
赤野2014

回答:


185

clearColorには、アルファが0の黒いカラーチャネルがあるため、使用する必要がありました

[UIColor colorWithWhite:1 alpha:0]

そしてそれはうまくいきます。


16
黒い影を白い影に置き換えます。まだ透明ではない
RealNmae 2017年

2
重要-2018年については、次のアプローチを検討してください:stackoverflow.com/a/25408833/294884
Fattie

7
@RealNmae色からクリアに移行する場合は、UIColor.startColorとUIColor.startColor.withAlphaComponent(0.0)を2つの色として使用します。
コナー2018年

@Conorこれは実際には正解です-ありがとう、色に関係なく完全に機能します
SomaMan 2018年

60

スウィフトこれは、私のために働きました

UIColor.white.withAlphaComponent(0).cgColor

3
答えに示されているように.cgColorを追加することを忘れないでください!!! 誤ってUIColor.white.withAlphaComponent(0)を使用し、なぜまだ灰色なのか疑問に思って1時間頭をかいていた。
SnoopyProtocol

21

他の色はこのように機能することを指摘する価値があります...上記の2つの答えの組み合わせを使用して....

Objective 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] 
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.