webentwicklung-frage-antwort-db.com.de

UIView transparenter Farbverlauf

Gibt es unter Verwendung eines beliebigen UIView unter iOS eine Möglichkeit, mithilfe von Core Graphics (CAGradientLayer) einen "Vordergrund-transparenten" Farbverlauf darauf anzuwenden?

Ich kann keinen Standard-CAGradientLayer verwenden, da der Hintergrund komplexer ist als ein UIColor. Ich kann eine PNG-Datei auch nicht überlagern, da sich der Hintergrund ändert, wenn meine Unteransicht entlang der übergeordneten vertikalen Bildlaufleiste gescrollt wird (siehe Abbildung).

Ich habe ein nicht-elegantes Fallback: Ich habe meinen Uiview-Clip mit seinen Unteransichten und verschiebe einen vorgerenderten Verlaufs-Png des Hintergrunds, während der übergeordnete Bildlauf gescrollt wird.

transparent uiview gradient problem

34
jpsim

Dies war eine peinlich einfache Lösung: Verwenden Sie einen CAGradientLayer als die Maske meiner Unteransicht.

CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.frame = _fileTypeScrollView.bounds;
gradientLayer.colors = [NSArray arrayWithObjects:(id)[UIColor whiteColor].CGColor, (id)[UIColor clearColor].CGColor, nil];
gradientLayer.startPoint = CGPointMake(0.8f, 1.0f);
gradientLayer.endPoint = CGPointMake(1.0f, 1.0f);
_fileTypeScrollView.layer.mask = gradientLayer;

Danke an Cocoanetics für die richtige Richtung!

94
jpsim

So mache ich es. 

Schritt 1 Definieren Sie eine benutzerdefinierte Verlaufsansicht (Swift 4):

import UIKit

class GradientView: UIView {
    override open class var layerClass: AnyClass {
        return CAGradientLayer.classForCoder()
    }

    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        let gradientLayer = self.layer as! CAGradientLayer
        gradientLayer.colors = [
            UIColor.white.cgColor,
            UIColor.init(white: 1, alpha: 0).cgColor
        ]
        backgroundColor = UIColor.clear
    }
}

Schritt 2 - Ziehen Sie eine UIView in Ihr Storyboard, und legen Sie sie ab. Legen Sie als benutzerdefinierte Klasse GradientView fest.

 enter image description here

Als Beispiel sieht die obige Verlaufsansicht so aus: 


https://github.com/yzhong52/GradientViewDemo

4
Yuchen Zhong

Gradient Example

Ich bin gerade auf das gleiche Thema gestoßen und habe schließlich meine eigene Klasse geschrieben. Es scheint ein schwerer Overkill zu sein, aber es war die einzige Möglichkeit, Gradienten mit Transparenz zu erstellen. Sie können mein writeup und Codebeispiel hier sehen

Im Grunde geht es um eine benutzerdefinierte UIView, die zwei Bilder erstellt. Eine ist eine Volltonfarbe, die andere ist ein Farbverlauf, der als Bildmaske verwendet wird. Von dort aus habe ich das resultierende Bild auf den uiview.layer.content angewendet.

Ich hoffe es hilft. Joe

2
Joe Andolina

Ich hasse es, es zu sagen, aber ich glaube, Sie befinden sich im CUSTOM UIView-Land. Ich denke, ich würde versuchen, dies in einem benutzerdefinierten UIView zu implementieren, der die drawRect-Routine übersteigt.

Mit dieser Option können Sie diese Ansicht haben, auf der aktuellen Bildlaufansicht platzieren und Ihre Verlaufsansicht (wenn Sie möchten) alle Berührungsereignisse "übergeben" (d. H. Erste Antwort ablehnen).

0
trumpetlicks

Ich habe die akzeptierte Antwort (OPs) oben verwendet und stieß auf die gleiche Ausgabe, die in einem nach oben gerichteten Kommentar - erwähnt wird. Wenn die Ansicht durchläuft, ist alles, was außerhalb des Bildschirms gestartet wurde, jetzt transparent und wird von der Maske abgedeckt.

Die Lösung bestand darin, die Verlaufsebene als Maske superview und nicht als Maske scroll view hinzuzufügen. In meinem Fall verwende ich eine Textansicht, die in einer Ansicht namens contentView enthalten ist.

Ich habe eine dritte Farbe hinzugefügt und locations anstelle von startPoint und endPoint verwendet, sodass die Elemente unten der Textansicht weiterhin sichtbar sind.

let gradientLayer = CAGradientLayer()
gradientLayer.frame = self.contentView!.bounds
gradientLayer.colors = [UIColor.white.cgColor, UIColor.clear.cgColor, UIColor.white.cgColor]

// choose position for gradient, aligned to bottom of text view
let bottomOffset = (self.textView!.frame.size.height + self.textView!.frame.Origin.y + 5)/self.contentView!.bounds.size.height
let topOffset = bottomOffset - 0.1
let bottomCoordinate = NSNumber(value: Double(bottomOffset))
let topCoordinate = NSNumber(value: Double(topOffset))
gradientLayer.locations = [topCoordinate, bottomCoordinate, bottomCoordinate]

self.contentView!.layer.mask = gradientLayer

Zuvor war der Text, der außerhalb des Bildschirms gestartet wurde, dauerhaft unsichtbar. Bei meinen Änderungen funktioniert das Scrollen wie erwartet und die Schaltfläche "Schließen" wird von der Maske nicht verdeckt.

 screenshot

0
jab