Saya mencoba untuk menghasilkan tampilan dengan latar belakang warna gradien (warna solid ke transparan) saat runtime. Apakah ada cara untuk melakukan itu?
Saya mencoba untuk menghasilkan tampilan dengan latar belakang warna gradien (warna solid ke transparan) saat runtime. Apakah ada cara untuk melakukan itu?
Jawaban:
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 320, 50)];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.colors = @[(id)[UIColor whiteColor].CGColor, (id)[UIColor blackColor].CGColor];
[view.layer insertSublayer:gradient atIndex:0];
let view = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 50))
let gradient = CAGradientLayer()
gradient.frame = view.bounds
gradient.colors = [UIColor.white.cgColor, UIColor.black.cgColor]
view.layer.insertSublayer(gradient, at: 0)
Info : gunakan startPoint dan endPoint untuk mengubah arah gradien .
Jika ada tampilan lain yang ditambahkan ke ini UIView
(seperti a UILabel
), Anda mungkin ingin mempertimbangkan pengaturan warna latar belakang UIView
untuk [UIColor clearColor]
sehingga tampilan gradien disajikan bukan warna latar belakang untuk sub tampilan. Menggunakan clearColor
memiliki sedikit performa yang melanda.
view
ke self.view
dan itu bekerja seperti pesona :)
gradient.frame = view.bounds
di viewDidAppear()
dan di didRotateFromInterfaceOrientation()
atau gradien tidak akan berukuran benar.
Anda dapat membuat kelas khusus GradientView
:
Cepat 5
class GradientView: UIView {
override open class var layerClass: AnyClass {
return CAGradientLayer.classForCoder()
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
let gradientLayer = layer as! CAGradientLayer
gradientLayer.colors = [UIColor.white.cgColor, UIColor.black.cgColor]
}
}
Di storyboard, setel tipe kelas ke tampilan apa pun yang Anda inginkan memiliki latar belakang gradien:
Ini lebih baik dengan cara berikut:
CLayer
NSConstraint
seperti biasa diUIView
layerClass
itu tidak lagi berfungsi, itu adalah properti sehingga Anda harus menimpanya seperti properti: stackoverflow.com/questions/28786597/… . Anda juga harus menerapkan override init(frame: CGRect)
, periksa jawaban ini: stackoverflow.com/questions/27374330/… . Terima kasih!
init(frame:CGRect)
. Saya menguji kode yang diperbarui dan berfungsi dengan baik.
@IBDesignable
digunakan?
Coba ini berhasil seperti pesona bagi saya,
Tujuan C
Saya telah mengatur warna latar belakang gradien RGB ke UIview
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0,0,320,35)];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view.bounds;
gradient.startPoint = CGPointZero;
gradient.endPoint = CGPointMake(1, 1);
gradient.colors = [NSArray arrayWithObjects:(id)[[UIColor colorWithRed:34.0/255.0 green:211/255.0 blue:198/255.0 alpha:1.0] CGColor],(id)[[UIColor colorWithRed:145/255.0 green:72.0/255.0 blue:203/255.0 alpha:1.0] CGColor], nil];
[view.layer addSublayer:gradient];
DIPERBARUI: - Swift3 +
Kode : -
var gradientView = UIView(frame: CGRect(x: 0, y: 0, width: 320, height: 35))
let gradientLayer:CAGradientLayer = CAGradientLayer()
gradientLayer.frame.size = self.gradientView.frame.size
gradientLayer.colors =
[UIColor.white.cgColor,UIColor.red.withAlphaComponent(1).cgColor]
//Use diffrent colors
gradientView.layer.addSublayer(gradientLayer)
Anda dapat menambahkan titik awal dan akhir warna gradien.
gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0)
Untuk keterangan lebih lanjut, lihat CAGradientLayer Doc
Semoga ini bisa membantu seseorang.
Ini adalah pendekatan yang saya rekomendasikan.
Untuk mempromosikan usabilitas, saya katakan buat kategori CAGradientLayer
dan tambahkan gradien yang Anda inginkan sebagai metode kelas. Tentukan mereka dalam header
file seperti ini:
#import <QuartzCore/QuartzCore.h>
@interface CAGradientLayer (SJSGradients)
+ (CAGradientLayer *)redGradientLayer;
+ (CAGradientLayer *)blueGradientLayer;
+ (CAGradientLayer *)turquoiseGradientLayer;
+ (CAGradientLayer *)flavescentGradientLayer;
+ (CAGradientLayer *)whiteGradientLayer;
+ (CAGradientLayer *)chocolateGradientLayer;
+ (CAGradientLayer *)tangerineGradientLayer;
+ (CAGradientLayer *)pastelBlueGradientLayer;
+ (CAGradientLayer *)yellowGradientLayer;
+ (CAGradientLayer *)purpleGradientLayer;
+ (CAGradientLayer *)greenGradientLayer;
@end
Kemudian di file implementasi Anda, tentukan setiap gradien dengan sintaks ini:
+ (CAGradientLayer *)flavescentGradientLayer
{
UIColor *topColor = [UIColor colorWithRed:1 green:0.92 blue:0.56 alpha:1];
UIColor *bottomColor = [UIColor colorWithRed:0.18 green:0.18 blue:0.18 alpha:1];
NSArray *gradientColors = [NSArray arrayWithObjects:(id)topColor.CGColor, (id)bottomColor.CGColor, nil];
NSArray *gradientLocations = [NSArray arrayWithObjects:[NSNumber numberWithInt:0.0],[NSNumber numberWithInt:1.0], nil];
CAGradientLayer *gradientLayer = [CAGradientLayer layer];
gradientLayer.colors = gradientColors;
gradientLayer.locations = gradientLocations;
return gradientLayer;
}
Kemudian cukup impor kategori ini di Anda ViewController
atau yang lain yang diperlukan subclass
, dan gunakan seperti ini:
CAGradientLayer *backgroundLayer = [CAGradientLayer purpleGradientLayer];
backgroundLayer.frame = self.view.frame;
[self.view.layer insertSublayer:backgroundLayer atIndex:0];
viewDidLoad
viewDidLoad
, itu tidak berfungsi jika aplikasi diluncurkan dalam orientasi lanskap. Solusi saya adalah membuat bingkai lapisan latar belakang lebih luas dari bingkai view.fr untuk mengimbangi orientasi lainnya.
Karena saya hanya memerlukan satu jenis gradien di seluruh aplikasi saya, saya membuat subkelas UIView dan mengkonfigurasikan sebelumnya lapisan gradien pada inisialisasi dengan warna-warna tetap. Inisialisasi dari UIView memanggil metode configureGradientLayer , yang mengkonfigurasi CAGradientLayer:
DDGradientView.h:
#import <UIKit/UIKit.h>
@interface DDGradientView : UIView {
}
@end
DDGradientView.m:
#import "DDGradientView.h"
@implementation DDGradientView
// Change the views layer class to CAGradientLayer class
+ (Class)layerClass
{
return [CAGradientLayer class];
}
- (instancetype)initWithCoder:(NSCoder *)aDecoder {
self = [super initWithCoder:aDecoder];
if(self) {
[self configureGradientLayer];
}
return self;
}
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if(self) {
[self configureGradientLayer];
}
return self;
}
// 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
initGradientLayer
mirip dengan penginisialisasi. Saya tidak berpikir itu sangat cocok.
Implementasi Cepat:
var gradientLayerView: UIView = UIView(frame: CGRectMake(0, 0, view.bounds.width, 50))
var gradient: CAGradientLayer = CAGradientLayer()
gradient.frame = gradientLayerView.bounds
gradient.colors = [UIColor.grayColor().CGColor, UIColor.clearColor().CGColor]
gradientLayerView.layer.insertSublayer(gradient, atIndex: 0)
self.view.layer.insertSublayer(gradientLayerView.layer, atIndex: 0)
Saya telah memperluas jawaban yang diterima sedikit menggunakan fungsi ekstensi Swift dan juga enum.
Oh dan jika Anda menggunakan Storyboard seperti yang saya lakukan, pastikan untuk menelepon gradientBackground(from:to:direction:)
di viewDidLayoutSubviews()
atau lambat.
Cepat 3
enum GradientDirection {
case leftToRight
case rightToLeft
case topToBottom
case bottomToTop
}
extension UIView {
func gradientBackground(from color1: UIColor, to color2: UIColor, direction: GradientDirection) {
let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = [color1.cgColor, color2.cgColor]
switch direction {
case .leftToRight:
gradient.startPoint = CGPoint(x: 0.0, y: 0.5)
gradient.endPoint = CGPoint(x: 1.0, y: 0.5)
case .rightToLeft:
gradient.startPoint = CGPoint(x: 1.0, y: 0.5)
gradient.endPoint = CGPoint(x: 0.0, y: 0.5)
case .bottomToTop:
gradient.startPoint = CGPoint(x: 0.5, y: 1.0)
gradient.endPoint = CGPoint(x: 0.5, y: 0.0)
default:
break
}
self.layer.insertSublayer(gradient, at: 0)
}
}
Saya telah menerapkan ini dengan cepat dengan ekstensi:
Cepat 3
extension UIView {
func addGradientWithColor(color: UIColor) {
let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = [UIColor.clear.cgColor, color.cgColor]
self.layer.insertSublayer(gradient, at: 0)
}
}
Cepat 2.2
extension UIView {
func addGradientWithColor(color: UIColor) {
let gradient = CAGradientLayer()
gradient.frame = self.bounds
gradient.colors = [UIColor.clearColor().CGColor, color.CGColor]
self.layer.insertSublayer(gradient, atIndex: 0)
}
}
Tidak, saya dapat mengatur gradien pada setiap tampilan seperti ini:
myImageView.addGradientWithColor(UIColor.blue)
Pendekatan Swift
Jawaban ini dibangun di atas jawaban di atas dan menyediakan implementasi untuk menangani masalah gradien yang tidak diterapkan dengan benar selama rotasi. Ini memenuhi masalah ini dengan mengubah lapisan gradien menjadi kuadrat sehingga rotasi di semua arah menghasilkan gradien yang benar. Tanda tangan fungsi menyertakan argumen variadik Swift yang memungkinkan seseorang untuk mengirimkan sebanyak mungkin CGColorRef (CGColor) sesuai kebutuhan (lihat contoh penggunaan). Juga disediakan adalah contoh sebagai ekstensi Swift sehingga orang dapat menerapkan gradien ke UIView apa pun.
func configureGradientBackground(colors:CGColorRef...){
let gradient: CAGradientLayer = CAGradientLayer()
let maxWidth = max(self.view.bounds.size.height,self.view.bounds.size.width)
let squareFrame = CGRect(origin: self.view.bounds.origin, size: CGSizeMake(maxWidth, maxWidth))
gradient.frame = squareFrame
gradient.colors = colors
view.layer.insertSublayer(gradient, atIndex: 0)
}
Menggunakan:
di viewDidLoad ...
override func viewDidLoad() {
super.viewDidLoad()
configureGradientBackground(UIColor.redColor().CGColor, UIColor.whiteColor().CGColor)
}
Implementasi ekstensi
extension CALayer {
func configureGradientBackground(colors:CGColorRef...){
let gradient = CAGradientLayer()
let maxWidth = max(self.bounds.size.height,self.bounds.size.width)
let squareFrame = CGRect(origin: self.bounds.origin, size: CGSizeMake(maxWidth, maxWidth))
gradient.frame = squareFrame
gradient.colors = colors
self.insertSublayer(gradient, atIndex: 0)
}
}
Contoh ekstensi kasus penggunaan:
override func viewDidLoad() {
super.viewDidLoad()
self.view.layer.configureGradientBackground(UIColor.purpleColor().CGColor, UIColor.blueColor().CGColor, UIColor.whiteColor().CGColor)
}
Yang berarti latar belakang gradien sekarang dapat diterapkan ke kontrol UIC karena semua kontrol adalah UIViews (atau subkelas) dan semua UIViews memiliki CALayers.
Cepat 4
Implementasi ekstensi
extension CALayer {
public func configureGradientBackground(_ colors:CGColor...){
let gradient = CAGradientLayer()
let maxWidth = max(self.bounds.size.height,self.bounds.size.width)
let squareFrame = CGRect(origin: self.bounds.origin, size: CGSize(width: maxWidth, height: maxWidth))
gradient.frame = squareFrame
gradient.colors = colors
self.insertSublayer(gradient, at: 0)
}
}
Contoh ekstensi kasus penggunaan:
override func viewDidLoad() {
super.viewDidLoad()
self.view.layer.configureGradientBackground(UIColor.purple.cgColor, UIColor.blue.cgColor, UIColor.white.cgColor)
}
Apa yang Anda cari adalah CAGradientLayer
. Setiap UIView
memiliki lapisan - ke dalam lapisan itu Anda dapat menambahkan sublayers, sama seperti Anda dapat menambahkan subview. Salah satu jenis spesifik adalah CAGradientLayer
, di mana Anda memberinya array warna untuk gradiasi di antara.
Salah satu contoh adalah pembungkus sederhana ini untuk tampilan gradien:
http://oleb.net/blog/2010/04/obgradientview-a-simple-uiview-wrapper-for-cagradientlayer/
Perhatikan bahwa Anda perlu memasukkan kerangka QuartZCore untuk mengakses semua bagian lapisan dari UIView.
Swift 4:
Memperlihatkan gradien dalam IB dengan benar:
@IBDesignable public class GradientView: UIView {
override open class var layerClass: AnyClass {
return CAGradientLayer.classForCoder()
}
required public init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
configureGradientLayer()
}
public override init(frame: CGRect) {
super.init(frame: frame)
configureGradientLayer()
}
func configureGradientLayer() {
let gradientLayer = layer as! CAGradientLayer
gradientLayer.colors = [UIColor(hex: 0x003399).cgColor, UIColor(hex: 0x00297b).cgColor]
}
}
extension UIView {
func applyGradient(isVertical: Bool, colorArray: [UIColor]) {
if let sublayers = layer.sublayers {
sublayers.filter({ $0 is CAGradientLayer }).forEach({ $0.removeFromSuperlayer() })
}
let gradientLayer = CAGradientLayer()
gradientLayer.colors = colorArray.map({ $0.cgColor })
if isVertical {
//top to bottom
gradientLayer.locations = [0.0, 1.0]
} else {
//left to right
gradientLayer.startPoint = CGPoint(x: 0.0, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1.0, y: 0.5)
}
backgroundColor = .clear
gradientLayer.frame = bounds
layer.insertSublayer(gradientLayer, at: 0)
}
}
PEMAKAIAN
someView.applyGradient(isVertical: true, colorArray: [.green, .blue])
Tampilan cepat sederhana berdasarkan versi Yuchen
class GradientView: UIView {
override class func layerClass() -> AnyClass { return CAGradientLayer.self }
lazy var gradientLayer: CAGradientLayer = {
return self.layer as! CAGradientLayer
}()
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
}
Maka Anda dapat menggunakan gradientLayer setelah inisialisasi seperti ini ...
someView.gradientLayer.colors = [UIColor.whiteColor().CGColor, UIColor.blackColor().CGColor]
Solusi saya adalah membuat UIView
subclass dengan CAGradientLayer
diakses sebagai properti readonly. Ini akan memungkinkan Anda untuk menyesuaikan gradien Anda seperti yang Anda inginkan dan Anda tidak perlu menangani perubahan tata letak sendiri. Implementasi subkelas:
@interface GradientView : UIView
@property (nonatomic, readonly) CAGradientLayer *gradientLayer;
@end
@implementation GradientView
+ (Class)layerClass
{
return [CAGradientLayer class];
}
- (CAGradientLayer *)gradientLayer
{
return (CAGradientLayer *)self.layer;
}
@end
Pemakaian:
self.iconBackground = [GradientView new];
[self.background addSubview:self.iconBackground];
self.iconBackground.gradientLayer.colors = @[(id)[UIColor blackColor].CGColor, (id)[UIColor whiteColor].CGColor];
self.iconBackground.gradientLayer.startPoint = CGPointMake(1.0f, 1.0f);
self.iconBackground.gradientLayer.endPoint = CGPointMake(0.0f, 0.0f);
Adalah ide yang bagus untuk memanggil solusi di atas untuk memperbarui lapisan pada
viewDidLayoutSubviews
untuk mendapatkan tampilan diperbarui dengan benar
SWIFT 3
Untuk menambahkan lapisan gradien pada tampilan Anda
Ikat outlet tampilan Anda
@IBOutlet var YOURVIEW : UIView!
Tentukan CAGradientLayer ()
var gradient = CAGradientLayer()
Berikut adalah kode yang harus Anda tulis di viewDidLoad Anda
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)
Di Swift 3.1 saya telah menambahkan ekstensi ini ke UIView
import Foundation
import UIKit
import CoreGraphics
extension UIView {
func gradientOfView(withColours: UIColor...) {
var cgColours = [CGColor]()
for colour in withColours {
cgColours.append(colour.cgColor)
}
let grad = CAGradientLayer()
grad.frame = self.bounds
grad.colors = cgColours
self.layer.insertSublayer(grad, at: 0)
}
}
yang kemudian saya panggil
class OverviewVC: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
self.view.gradientOfView(withColours: UIColor.red,UIColor.green, UIColor.blue)
}
}
Saya telah menerapkan ini dalam kode saya.
UIView *view1 = [[UIView alloc] initWithFrame:CGRectMake(0.0f, 0.0f, self.view.frame.size.width, 31.0f)];
view1.backgroundColor = [UIColor clearColor];
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = view1.bounds;
UIColor *topColor = [UIColor colorWithRed:132.0/255.0 green:222.0/255.0 blue:109.0/255.0 alpha:1.0];
UIColor *bottomColor = [UIColor colorWithRed:31.0/255.0 green:150.0/255.0 blue:99.0/255.0 alpha:1.0];
gradient.colors = [NSArray arrayWithObjects:(id)[topColor CGColor], (id)[bottomColor CGColor], nil];
[view1.layer insertSublayer:gradient atIndex:0];
Sekarang saya bisa melihat gradien pada pandangan saya.
Untuk memberikan warna gradien ke UIView (swift 4.2)
func makeGradientLayer(`for` object : UIView, startPoint : CGPoint, endPoint : CGPoint, gradientColors : [Any]) -> CAGradientLayer {
let gradient: CAGradientLayer = CAGradientLayer()
gradient.colors = gradientColors
gradient.locations = [0.0 , 1.0]
gradient.startPoint = startPoint
gradient.endPoint = endPoint
gradient.frame = CGRect(x: 0, y: 0, w: object.frame.size.width, h: object.frame.size.height)
return gradient
}
Cara Penggunaan
let start : CGPoint = CGPoint(x: 0.0, y: 1.0)
let end : CGPoint = CGPoint(x: 1.0, y: 1.0)
let gradient: CAGradientLayer = makeGradientLayer(for: cell, startPoint: start, endPoint: end, gradientColors: [
UIColor(red:0.92, green:0.07, blue:0.4, alpha:1).cgColor,
UIColor(red:0.93, green:0.11, blue:0.14, alpha:1).cgColor
])
self.vwTemp.layer.insertSublayer(gradient, at: 0)