Jeśli dodano do niego jakiekolwiek inne widoki UIView(takie jak a UILabel), możesz rozważyć ustawienie koloru tła tych elementów UIView, aby [UIColor clearColor]widok gradientu był wyświetlany zamiast koloru tła dla widoków podrzędnych. Korzystanie clearColorma niewielki spadek wydajności.
+1 za najkrótszą ilość kodu spośród wszystkich rozwiązań. Właśnie dodałem do mojego istniejącego kontrolera widoku, zmieniłem 2 odnośniki viewna self.viewi działało to jak urok :)
To mi bardzo pomogło! Brakowało części CGColor wszędzie indziej! Dzięki
Gyfis
48
Nie zapomnij użyć „startPoint” i „endPoint”, aby zmienić kierunek gradientu. Wartości domyślne to (0,5, 0) i (0,5,1) - od góry do dołu.
Valentin Shamardin,
12
Kiedy mój UIView korzysta autoLayout, miałem również zadzwonić gradient.frame = view.boundsw viewDidAppear()aw didRotateFromInterfaceOrientation()albo gradient nie będzie odpowiedniej wielkości.
Witaj @LaloLoop, dzięki za komentarz! Zaktualizowałem kod. Nie sądzę jednak, że muszę to zmienić init(frame:CGRect). Przetestowałem zaktualizowany kod i działa dobrze.
Yuchen Zhong,
@Yuchen Zhong Awaria w IB, ale działa w aplikacji. Jakieś powody, dla których nie jest renderowany w IB, jeśli @IBDesignablejest używany?
Alexander Volkov
@AlexanderVolkov Prawdopodobnie jakiś inny problem? Używaliśmy go w taki sposób w scenorysie i nie wydaje się, aby miał to jakiś problem. Możesz debugować scenorys i zobaczyć, która linia go zawiesza.
Aby promować wielokrotne użycie, powiedziałbym, że należy utworzyć kategorię CAGradientLayeri dodać pożądane gradienty jako metody klasowe. Określ je w headerpliku w następujący sposób:
gdzie należy umieścić kod, aby go użyć? jaka metoda cyklu życia? viewdidappear sprawia, że pojawia się o sekundę za późno. viewdidload i viewdidappear powodują, że nie działa podczas obracania. viewdidlayoutsubviews działa lepiej dla rotacji, ale nadal wygląda na nieco niespokojną.
Adam Johns
Osobiście to włożyłemviewDidLoad
Sam Fischer,
1
Po włożeniu viewDidLoadnie działało, jeśli aplikacja została uruchomiona w orientacji poziomej. Moim rozwiązaniem było poszerzenie ramki warstwy tła niż ramki view.frame, aby skompensować inne orientacje.
Adam Johns
2
viewDidLoad działa, wystarczy ustawić AutoResizingMask za pomocą [backgroundLayer setAutoresizingMask: UIViewAutoresizingFLEXWidth | UIViewAutoresizingF FlexibleHeight];
ekscrypto
21
Ponieważ potrzebowałem tylko jednego rodzaju gradientu w mojej aplikacji, stworzyłem podklasę UIView i wstępnie skonfigurowałem warstwę gradientu przy inicjalizacji za pomocą stałych kolorów. Inicjatory UIView wywołują metodę configureGradientLayer , która konfiguruje CAGradientLayer:
#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
Wywołanie Swift3 musi wyglądać następująco: myImageView.addGradientWithColor (kolor: UIColor.blue)
mgyky,
8
Szybkie podejście
Ta odpowiedź opiera się na powyższych odpowiedziach i zapewnia implementację rozwiązania problemu niewłaściwego zastosowania gradientu podczas obrotu. Spełnia ten problem, zmieniając warstwę gradientu na kwadrat, dzięki czemu obrót we wszystkich kierunkach daje prawidłowy gradient. Podpis funkcji zawiera argument wariacyjny Swift, który pozwala przekazać tyle CGColorRef (CGColor), ile potrzeba (patrz przykładowe użycie). Podano również przykład rozszerzenia Swift, dzięki czemu można zastosować gradient do dowolnego UIView.
Co oznacza, że tło gradientowe można teraz zastosować do dowolnego UIControl, ponieważ wszystkie kontrolki są UIViews (lub podklasą), a wszystkie UIViews mają CALayers.
To czego szukasz CAGradientLayer. Każda UIViewma warstwę - do tej warstwy można dodawać podwarstwy, tak jak można dodawać widoki podrzędne. Jednym konkretnym typem jest to CAGradientLayer, w którym dajesz mu tablicę kolorów do stopniowania.
Jednym z przykładów jest to proste opakowanie dla widoku gradientu:
Moim rozwiązaniem jest utworzenie UIViewpodklasy z CAGradientLayerdostępną właściwością tylko do odczytu. Umożliwi to dostosowanie gradientu tak, jak chcesz i nie musisz samodzielnie obsługiwać zmian układu. Implementacja podklasy:
Zastosowałem to podejście, zmieniając „widok z góry” na nazwę mojego IBoutletu dla mojego widoku. Usunąłem wiersz „SearchView”.
jessi
Dobry plan - być może należy również pamiętać, że można użyć dowolnego z ustawień gradientu. Kolorów. Jeśli więc skomentujesz prosty gradient.colors przy użyciu nazwanych kolorów interfejsu użytkownika, obraz będzie taki sam, ale jeśli skomentujesz inny, gradient koloru będzie wtedy polegał na kolorze czerwonym do zielonego. Użytkownicy mogą zrobić jedno z nich.
Odpowiedzi:
Cel C:
Szybki:
Informacje : użyj startPoint i endPoint, aby zmienić kierunek gradientu .
Jeśli dodano do niego jakiekolwiek inne widoki
UIView
(takie jak aUILabel
), możesz rozważyć ustawienie koloru tła tych elementówUIView
, aby[UIColor clearColor]
widok gradientu był wyświetlany zamiast koloru tła dla widoków podrzędnych. KorzystanieclearColor
ma niewielki spadek wydajności.źródło
view
naself.view
i działało to jak urok :)gradient.frame = view.bounds
wviewDidAppear()
awdidRotateFromInterfaceOrientation()
albo gradient nie będzie odpowiedniej wielkości.Możesz utworzyć niestandardową klasę
GradientView
:Szybki 5
W scenorysie ustaw typ klasy na dowolny widok, który ma mieć tło gradientowe:
Jest to lepsze na następujące sposoby:
CLayer
NSConstraint
jak zwykle naUIView
źródło
layerClass
nie jest już funkcją, jest właściwością, więc musisz ją zastąpić jak właściwość: stackoverflow.com/questions/28786597/… . Również trzeba wdrożyćoverride init(frame: CGRect)
, sprawdź tę odpowiedź: stackoverflow.com/questions/27374330/... . Dzięki!init(frame:CGRect)
. Przetestowałem zaktualizowany kod i działa dobrze.@IBDesignable
jest używany?Spróbuj To działało jak urok dla mnie,
Cel C
Mam ustawiony RGB gradientu kolor tła do UIView
AKTUALIZACJA: - Swift3 +
Kod : -
Możesz dodać punkt początkowy i końcowy koloru gradientu.
Aby uzyskać więcej szczegółowych informacji, patrz CAGradientLayer Doc
Mam nadzieję, że to jest pomoc dla kogoś.
źródło
To jest moje zalecane podejście.
Aby promować wielokrotne użycie, powiedziałbym, że należy utworzyć kategorię
CAGradientLayer
i dodać pożądane gradienty jako metody klasowe. Określ je wheader
pliku w następujący sposób:Następnie w pliku implementacji określ każdy gradient za pomocą następującej składni:
Następnie po prostu zaimportuj tę kategorię do swojej
ViewController
lub innej wymaganejsubclass
i użyj jej w następujący sposób:źródło
viewDidLoad
viewDidLoad
nie działało, jeśli aplikacja została uruchomiona w orientacji poziomej. Moim rozwiązaniem było poszerzenie ramki warstwy tła niż ramki view.frame, aby skompensować inne orientacje.Ponieważ potrzebowałem tylko jednego rodzaju gradientu w mojej aplikacji, stworzyłem podklasę UIView i wstępnie skonfigurowałem warstwę gradientu przy inicjalizacji za pomocą stałych kolorów. Inicjatory UIView wywołują metodę configureGradientLayer , która konfiguruje CAGradientLayer:
DDGradientView.h:
DDGradientView.m:
źródło
initGradientLayer
jest podobna do inicjalizatora. Nie wydaje mi się, żeby to było odpowiednie.Szybkie wdrożenie:
źródło
Rozszerzyłem nieco przyjętą odpowiedź, używając funkcji rozszerzenia Swift oraz wyliczenia.
No i jeśli używasz Storyboard jak to zrobić, upewnij się, aby zadzwonić
gradientBackground(from:to:direction:)
wviewDidLayoutSubviews()
lub później.Szybki 3
źródło
Zaimplementowałem to szybko z rozszerzeniem:
Szybki 3
Swift 2.2
Nie, mogę ustawić gradient dla każdego widoku w ten sposób:
źródło
Szybkie podejście
Ta odpowiedź opiera się na powyższych odpowiedziach i zapewnia implementację rozwiązania problemu niewłaściwego zastosowania gradientu podczas obrotu. Spełnia ten problem, zmieniając warstwę gradientu na kwadrat, dzięki czemu obrót we wszystkich kierunkach daje prawidłowy gradient. Podpis funkcji zawiera argument wariacyjny Swift, który pozwala przekazać tyle CGColorRef (CGColor), ile potrzeba (patrz przykładowe użycie). Podano również przykład rozszerzenia Swift, dzięki czemu można zastosować gradient do dowolnego UIView.
Używać:
in viewDidLoad ...
Implementacja rozszerzenia
Przykład zastosowania rozszerzenia:
Co oznacza, że tło gradientowe można teraz zastosować do dowolnego UIControl, ponieważ wszystkie kontrolki są UIViews (lub podklasą), a wszystkie UIViews mają CALayers.
Szybki 4
Implementacja rozszerzenia
Przykład zastosowania rozszerzenia:
źródło
To czego szukasz
CAGradientLayer
. KażdaUIView
ma warstwę - do tej warstwy można dodawać podwarstwy, tak jak można dodawać widoki podrzędne. Jednym konkretnym typem jest toCAGradientLayer
, w którym dajesz mu tablicę kolorów do stopniowania.Jednym z przykładów jest to proste opakowanie dla widoku gradientu:
http://oleb.net/blog/2010/04/obgradientview-a-simple-uiview-wrapper-for-cagradientlayer/
Zauważ, że musisz dołączyć ramę QuartZCore, aby uzyskać dostęp do wszystkich części warstw UIView.
źródło
Swift 4:
Prawidłowo pokazuje gradient w IB:
źródło
STOSOWANIE
źródło
Prosty szybki widok oparty na wersji Yuchen
Następnie możesz użyć gradientLayer po inicjalizacji w ten sposób ...
źródło
Moim rozwiązaniem jest utworzenie
UIView
podklasy zCAGradientLayer
dostępną właściwością tylko do odczytu. Umożliwi to dostosowanie gradientu tak, jak chcesz i nie musisz samodzielnie obsługiwać zmian układu. Implementacja podklasy:Stosowanie:
źródło
Dobrze jest zadzwonić do powyższych rozwiązań, aby zaktualizować warstwę w Internecie
aby poprawnie zaktualizować widoki
źródło
SWIFT 3
Aby dodać warstwę gradientu do swojego widoku
Zwiąż swój punkt widokowy
Zdefiniuj CAGradientLayer ()
Oto kod, który musisz napisać w viewDidLoad
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)
źródło
W Swift 3.1 dodałem to rozszerzenie do UIView
z którym wtedy dzwonię
źródło
Zaimplementowałem to w moim kodzie.
Teraz widzę gradient w moim widoku.
źródło
Aby nadać kolor gradientu UIView (szybki 4.2)
Jak używać
źródło