Erstellen Sie programmgesteuert eine UIView mit Farbverlauf
292
Ich versuche zur Laufzeit eine Ansicht mit einem Farbverlaufshintergrund (einfarbig bis transparent) zu generieren. Gibt es eine Möglichkeit, das zu tun?
Wenn weitere Ansichten hinzugefügt werden UIView(z. B. a UILabel), sollten Sie die Hintergrundfarbe dieser Ansichten so einstellen UIView, [UIColor clearColor]dass die Verlaufsansicht anstelle der Hintergrundfarbe für Unteransichten angezeigt wird. Die Verwendung clearColorhat einen leichten Leistungseinbruch.
+1 für die kürzeste Codemenge aller Lösungen. Habe ich nur noch zu meinem bestehenden View - Controller, geändert , um den 2 Refs zu viewauf self.viewund es funktionierte wie ein Zauber :)
Ergin
4
Ebenfalls relevant ist, wo dieser Code hinzugefügt werden soll. Ich brauchte den folgenden Beitrag, um dies zum Laufen
Garrett Disco
13
Das hat mir sehr geholfen! Verpasste den CGColor-Teil überall sonst! Vielen Dank
Gyfis
48
Vergessen Sie nicht, 'startPoint' und 'endPoint' zu verwenden, um die Verlaufsrichtung zu ändern. Standardwerte sind (0,5, 0) und (0,5,1) - von oben nach unten.
Valentin Shamardin
12
Wenn meine UIView Autolayout verwendet, hatte ich auch anrufen gradient.frame = view.boundsin viewDidAppear()und in didRotateFromInterfaceOrientation()würde die Steigung oder auch nicht richtig dimensioniert sein.
EricRobertBrewer
70
Sie können eine benutzerdefinierte Klasse erstellen GradientView:
Hallo @LaloLoop, danke für den Kommentar! Ich habe den Code aktualisiert. Ich glaube nicht, dass ich überschreiben muss init(frame:CGRect). Ich habe den aktualisierten Code getestet und er funktioniert einwandfrei.
Yuchen Zhong
@ Yuchen Zhong Es stürzt in IB ab, funktioniert aber in der App. Gibt es Gründe, warum es nicht in IB gerendert wird, wenn @IBDesignablees verwendet wird?
Alexander Volkov
@AlexanderVolkov Wahrscheinlich ein anderes Problem? Wir haben es so im Storyboard verwendet und scheinen jedoch kein Problem zu haben. Sie können Ihr Storyboard debuggen und sehen, welche Zeile es zum Absturz bringt.
Yuchen Zhong
1
Beste Lösung !
Baran Emre
40
Versuchen Sie dies, es hat wie ein Zauber für mich funktioniert,
Ziel c
Ich habe die Hintergrundfarbe für den RGB-Verlauf auf UIview eingestellt
Um die Wiederverwendbarkeit zu fördern, würde ich sagen, erstellen Sie eine Kategorie von CAGradientLayerund fügen Sie Ihre gewünschten Verläufe als Klassenmethoden hinzu. Geben Sie sie in der headerDatei wie folgt an :
Wo solltest du den Code platzieren, um ihn zu verwenden? Welche Lebenszyklusmethode? viewdidappear lässt es eine Sekunde zu spät erscheinen. viewdidload und viewdidappear führen dazu, dass es beim Drehen nicht funktioniert. viewdidlayoutsubviews eignet sich besser für die Rotation, sieht aber dennoch etwas abgehackt aus.
Adam Johns
Ich persönlich habe es viewDidLoad
Sam Fischer
1
Als ich es einfügte viewDidLoad, funktionierte es nicht, wenn die App im Querformat gestartet wurde. Meine Lösung bestand darin, den Rahmen der Hintergrundebene breiter als den view.frame zu machen, um andere Ausrichtungen auszugleichen.
Adam Johns
2
viewDidLoad funktioniert, Sie müssen nur die AutoResizingMask mit [backgroundLayer setAutoresizingMask: UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight] festlegen.
ekscrypto
21
Da ich in meiner App nur einen Verlaufstyp benötigte, habe ich eine Unterklasse von UIView erstellt und die Verlaufsebene bei der Initialisierung mit festen Farben vorkonfiguriert. Die Initialisierer von UIView rufen die configureGradientLayer- Methode auf, die den CAGradientLayer konfiguriert:
#import "DDGradientView.h"@implementationDDGradientView// Change the views layer class to CAGradientLayer class+(Class)layerClass
{return[CAGradientLayerclass];}-(instancetype)initWithCoder:(NSCoder*)aDecoder {self=[super initWithCoder:aDecoder];if(self){[self configureGradientLayer];}returnself;}-(instancetype)initWithFrame:(CGRect)frame {self=[super initWithFrame:frame];if(self){[self configureGradientLayer];}returnself;}// Make custom configuration of your gradient here -(void)configureGradientLayer {CAGradientLayer*gLayer =(CAGradientLayer*)self.layer;
gLayer.colors =[NSArray arrayWithObjects:(id)[[UIColor whiteColor]CGColor],(id)[[UIColor lightGrayColor]CGColor],nil];}@end
Swift3 Aufruf muss sein wie: myImageView.addGradientWithColor (Farbe: UIColor.blue)
mgyky
8
Ein schneller Ansatz
Diese Antwort baut auf den obigen Antworten auf und bietet eine Implementierung, um das Problem zu lösen, dass der Gradient während der Drehung nicht richtig angewendet wird. Dieses Problem wird gelöst, indem die Verlaufsschicht in ein Quadrat geändert wird, sodass eine Drehung in alle Richtungen zu einem korrekten Verlauf führt. Die Funktionssignatur enthält ein Swift-Variadic-Argument, mit dem so viele CGColorRefs (CGColor) wie erforderlich übergeben werden können (siehe Beispielverwendung). Außerdem wird ein Beispiel als Swift-Erweiterung bereitgestellt, mit dem ein Verlauf auf jede UIView angewendet werden kann.
Dies bedeutet, dass der Verlaufshintergrund jetzt auf jedes UIControl angewendet werden kann, da alle Steuerelemente UIViews (oder eine Unterklasse) sind und alle UIViews CALayers haben.
Was Sie suchen, ist CAGradientLayer. Jeder UIViewhat eine Ebene - in diese Ebene können Sie Unterebenen hinzufügen, genauso wie Sie Unteransichten hinzufügen können. Ein bestimmter Typ ist der CAGradientLayer, bei dem Sie ihm eine Reihe von Farben zum Abstufen geben.
Ein Beispiel ist dieser einfache Wrapper für eine Verlaufsansicht:
Meine Lösung besteht darin, eine UIViewUnterklasse zu erstellen, auf CAGradientLayerdie als schreibgeschützte Eigenschaft zugegriffen werden kann. Auf diese Weise können Sie Ihren Verlauf nach Ihren Wünschen anpassen und müssen Layoutänderungen nicht selbst vornehmen. Implementierung der Unterklasse:
Ich habe diesen Ansatz verwendet und "Draufsicht" in den Namen meines IBoutlets für meine Ansicht geändert. Ich habe die Zeile "SearchView" gelöscht.
Jessi
Guter Plan - vielleicht beachten Sie auch, dass Sie eine der Einstellungen für gradient.colors verwenden können. Wenn Sie also die einfachen Farbverläufe mit benannten Benutzeroberflächenfarben auskommentieren, ist das Bild dasselbe. Wenn Sie jedoch die andere auskommentieren, hängt der Farbverlauf von Rot zu Grün ab. Benutzer können beides tun.
Jessi
1
In Swift 3.1 habe ich diese Erweiterung zu UIView hinzugefügt
Antworten:
Ziel c:
Schnell:
Info : Verwenden Sie startPoint und endPoint, um die Richtung des Verlaufs zu ändern .
Wenn weitere Ansichten hinzugefügt werden
UIView
(z. B. aUILabel
), sollten Sie die Hintergrundfarbe dieser Ansichten so einstellenUIView
,[UIColor clearColor]
dass die Verlaufsansicht anstelle der Hintergrundfarbe für Unteransichten angezeigt wird. Die VerwendungclearColor
hat einen leichten Leistungseinbruch.quelle
view
aufself.view
und es funktionierte wie ein Zauber :)gradient.frame = view.bounds
inviewDidAppear()
und indidRotateFromInterfaceOrientation()
würde die Steigung oder auch nicht richtig dimensioniert sein.Sie können eine benutzerdefinierte Klasse erstellen
GradientView
:Swift 5
Stellen Sie im Storyboard den Klassentyp auf eine Ansicht ein, für die Sie einen Verlaufshintergrund haben möchten:
Dies ist auf folgende Weise besser:
CLayer
NSConstraint
wie gewohnt auf demUIView
quelle
layerClass
ist das keine Funktion mehr, sondern eine Eigenschaft. Sie müssen es also wie eine Eigenschaft überschreiben : stackoverflow.com/questions/28786597/… . Außerdem müssen Sie implementierenoverride init(frame: CGRect)
, überprüfen Sie diese Antwort: stackoverflow.com/questions/27374330/... . Vielen Dank!init(frame:CGRect)
. Ich habe den aktualisierten Code getestet und er funktioniert einwandfrei.@IBDesignable
es verwendet wird?Versuchen Sie dies, es hat wie ein Zauber für mich funktioniert,
Ziel c
Ich habe die Hintergrundfarbe für den RGB-Verlauf auf UIview eingestellt
AKTUALISIERT: - Swift3 +
Code : -
Sie können den Start- und Endpunkt der Verlaufsfarbe hinzufügen.
Weitere Informationen finden Sie in CAGradientLayer Doc
Hoffe das ist Hilfe für jemanden.
quelle
Dies ist mein empfohlener Ansatz.
Um die Wiederverwendbarkeit zu fördern, würde ich sagen, erstellen Sie eine Kategorie von
CAGradientLayer
und fügen Sie Ihre gewünschten Verläufe als Klassenmethoden hinzu. Geben Sie sie in derheader
Datei wie folgt an :Geben Sie dann in Ihrer Implementierungsdatei jeden Farbverlauf mit der folgenden Syntax an:
Importieren Sie diese Kategorie dann einfach in Ihre
ViewController
oder eine andere erforderliche Kategoriesubclass
und verwenden Sie sie wie folgt:quelle
viewDidLoad
viewDidLoad
, funktionierte es nicht, wenn die App im Querformat gestartet wurde. Meine Lösung bestand darin, den Rahmen der Hintergrundebene breiter als den view.frame zu machen, um andere Ausrichtungen auszugleichen.Da ich in meiner App nur einen Verlaufstyp benötigte, habe ich eine Unterklasse von UIView erstellt und die Verlaufsebene bei der Initialisierung mit festen Farben vorkonfiguriert. Die Initialisierer von UIView rufen die configureGradientLayer- Methode auf, die den CAGradientLayer konfiguriert:
DDGradientView.h:
DDGradientView.m:
quelle
initGradientLayer
ähnelt einem Initialisierer. Ich denke nicht, dass es sehr gut geeignet ist.Schnelle Implementierung:
quelle
Ich habe die akzeptierte Antwort ein wenig erweitert, indem ich die Erweiterungsfunktion von Swift sowie eine Aufzählung verwendet habe.
Oh, und wenn Sie Storyboard wie ich verwenden, rufen Sie
gradientBackground(from:to:direction:)
anviewDidLayoutSubviews()
oder später.Swift 3
quelle
Ich habe dies schnell mit einer Erweiterung implementiert:
Swift 3
Swift 2.2
Nein, ich kann für jede Ansicht wie folgt einen Farbverlauf festlegen:
quelle
Ein schneller Ansatz
Diese Antwort baut auf den obigen Antworten auf und bietet eine Implementierung, um das Problem zu lösen, dass der Gradient während der Drehung nicht richtig angewendet wird. Dieses Problem wird gelöst, indem die Verlaufsschicht in ein Quadrat geändert wird, sodass eine Drehung in alle Richtungen zu einem korrekten Verlauf führt. Die Funktionssignatur enthält ein Swift-Variadic-Argument, mit dem so viele CGColorRefs (CGColor) wie erforderlich übergeben werden können (siehe Beispielverwendung). Außerdem wird ein Beispiel als Swift-Erweiterung bereitgestellt, mit dem ein Verlauf auf jede UIView angewendet werden kann.
Benutzen:
in viewDidLoad ...
Implementierung der Erweiterung
Anwendungsbeispiel für eine Erweiterung:
Dies bedeutet, dass der Verlaufshintergrund jetzt auf jedes UIControl angewendet werden kann, da alle Steuerelemente UIViews (oder eine Unterklasse) sind und alle UIViews CALayers haben.
Swift 4
Implementierung der Erweiterung
Anwendungsbeispiel für eine Erweiterung:
quelle
Was Sie suchen, ist
CAGradientLayer
. JederUIView
hat eine Ebene - in diese Ebene können Sie Unterebenen hinzufügen, genauso wie Sie Unteransichten hinzufügen können. Ein bestimmter Typ ist derCAGradientLayer
, bei dem Sie ihm eine Reihe von Farben zum Abstufen geben.Ein Beispiel ist dieser einfache Wrapper für eine Verlaufsansicht:
http://oleb.net/blog/2010/04/obgradientview-a-simple-uiview-wrapper-for-cagradientlayer/
Beachten Sie, dass Sie das QuartZCore-Framework einschließen müssen, um auf alle Layer-Teile einer UIView zugreifen zu können.
quelle
Swift 4:
Zeigt den Farbverlauf in IB korrekt an:
quelle
VERWENDUNG
quelle
Einfache schnelle Ansicht basierend auf Yuchens Version
Dann können Sie gradientLayer nach der Initialisierung wie folgt verwenden ...
quelle
Meine Lösung besteht darin, eine
UIView
Unterklasse zu erstellen, aufCAGradientLayer
die als schreibgeschützte Eigenschaft zugegriffen werden kann. Auf diese Weise können Sie Ihren Verlauf nach Ihren Wünschen anpassen und müssen Layoutänderungen nicht selbst vornehmen. Implementierung der Unterklasse:Verwendungszweck:
quelle
Es ist eine gute Idee, die oben genannten Lösungen aufzurufen, um die Ebene auf dem zu aktualisieren
um die Ansichten korrekt zu aktualisieren
quelle
SWIFT 3
So fügen Sie Ihrer Ansicht eine Verlaufsebene hinzu
Binden Sie Ihren Sichtausgang
Definiere den CAGradientLayer ()
Hier ist der Code, den Sie in Ihr viewDidLoad schreiben müssen
YOURVIEW.layoutIfNeeded()
gradient.startPoint = CGPoint(x: CGFloat(0), y: CGFloat(1)) gradient.endPoint = CGPoint(x: CGFloat(1), y: CGFloat(0)) gradient.frame = YOURVIEW.bounds gradient.colors = [UIColor.red.cgColor, UIColor.green.cgColor] gradient.colors = [ UIColor(red: 255.0/255.0, green: 56.0/255.0, blue: 224.0/255.0, alpha: 1.0).cgColor,UIColor(red: 86.0/255.0, green: 13.0/255.0, blue: 232.0/255.0, alpha: 1.0).cgColor,UIColor(red: 16.0/255.0, green: 173.0/255.0, blue: 245.0/255.0, alpha: 1.0).cgColor] gradient.locations = [0.0 ,0.6 ,1.0] YOURVIEW.layer.insertSublayer(gradient, at: 0)
quelle
In Swift 3.1 habe ich diese Erweiterung zu UIView hinzugefügt
mit dem rufe ich dann an
quelle
Ich habe dies in meinem Code implementiert.
Jetzt sehe ich einen Farbverlauf in meiner Ansicht.
quelle
So geben Sie UIView eine Verlaufsfarbe (schnell 4.2)
Wie benutzt man
quelle