以编程方式创build一个带有颜色渐变的UIView

我试图在运行时生成具有渐变颜色背景(纯色透明)的视图。 有没有办法呢?

Objective-C的:

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) 

信息使用startPoint和endPoint来改变渐变的方向 。

如果有任何其他视图添加到此UIView (如UILabel ),您可能需要考虑将这些UIView的背景颜色设置为[UIColor clearColor]以便显示渐变视图而不是子视图的背景颜色。 使用clearColor有轻微的性能影响。

这是我推荐的方法。

为了提高可重用性,我会说创build一个CAGradientLayer的类别,并添加所需的梯度作为类的方法。 像这样在header文件中指定它们:

 #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 

然后在你的实现文件中,用下面的语法指定每个渐变:

 + (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; } 

然后,只需在ViewController或任何其他必需的subclass类中导入这个类别,并像这样使用它:

 CAGradientLayer *backgroundLayer = [CAGradientLayer purpleGradientLayer]; backgroundLayer.frame = self.view.frame; [self.view.layer insertSublayer:backgroundLayer atIndex:0]; 

由于我只需要在我的应用程序中使用一种types的渐变,我创build了UIView的一个子类,并使用固定的颜色初始化了渐变图层。 UIView的初始化器调用configureGradientLayer – 方法,它configurationCAGradientLayer:

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 

你可以创build一个自定义类GradientView

Swift 3

 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.black.cgColor] } } 

Swift 2.2

 import UIKit class GradientView: UIView { override class func layerClass() -> AnyClass { return CAGradientLayer.self } required init?(coder aDecoder: NSCoder) { super.init(coder: aDecoder) let gradientLayer = self.layer as! CAGradientLayer gradientLayer.colors = [UIColor.whiteColor().CGColor, UIColor.blackColor().CGColor] } } 

在故事板中,将类types设置为您想要渐变背景的任何视图:

在这里输入图像描述

这在以下方面更好:

  • 不需要设置CLayer框架
  • UIView上照常使用NSConstraint
  • 不需要创build子图层(less用内存)

试试这对我来说就像一个魅力,

目标C

我已经将RGB渐变背景颜色设置为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]; 

在这里输入图像描述

更新: – Swift3

代码: –

 let gradientLayer:CAGradientLayer = CAGradientLayer() gradientLayer.frame.size = self.gradientView.frame.size gradientLayer.colors = [UIColor.white.cgColor,UIColor.red.withAlphaComponent(1).cgColor] //Use diffrent colors self.gradientView.layer.addSublayer(gradientLayer) 

在这里输入图像描述

您可以添加渐变颜色的起点和终点。

  gradientLayer.startPoint = CGPoint(x: 0.0, y: 1.0) gradientLayer.endPoint = CGPoint(x: 1.0, y: 1.0) 

在这里输入图像描述

有关更多详细信息,请参阅CAGradientLayer文档

希望这是对某个人的帮助。

快速实施:

 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) 

我已经迅速实施了这个扩展:

Swift 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) } } 

Swift 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) } } 

不,我可以像这样在每个视图上设置渐变:

 myImageView.addGradientWithColor(UIColor.blue) 

我使用Swift的扩展function以及枚举扩展了接受的答案。

哦,如果你像我一样使用Storyboard,请确保在viewDidLayoutSubviews()或更高版本中调用gradientBackground(from:to:direction:)

Swift 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) } } 

您正在寻找的是CAGradientLayer 。 每个UIView都有一个图层,在这个图层中可以添加子图层,就像添加子视图一样。 一个特定的types是CAGradientLayer ,在那里你给它一个颜色数组来放置之间。

一个例子是这个简单的包装的梯度视图:

http://oleb.net/blog/2010/04/obgradientview-a-simple-uiview-wrapper-for-cagradientlayer/

请注意,您需要包含QuartzCore框架才能访问UIView的所有图层部分。

快速的方法

这个答案build立在上面的答案上,并提供了处理梯度在旋转过程中没有正确应用的问题的实现。 它通过将渐变图层更改为正方形来满足此问题,以便所有方向上的旋转都会产生正确的渐变。 函数签名包含一个Swift可变参数,允许一个CGColorRef(CGColor)根据需要传入(参见示例用法)。 还提供了一个示例作为Swift扩展,以便可以将梯度应用于任何UIView。

  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) } 

使用:

在viewDidLoad中…

  override func viewDidLoad() { super.viewDidLoad() configureGradientBackground(UIColor.redColor().CGColor, UIColor.whiteColor().CGColor) } 

扩展实现

 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) } } 

扩展用例示例:

  override func viewDidLoad() { super.viewDidLoad() self.view.layer.configureGradientBackground(UIColor.purpleColor().CGColor, UIColor.blueColor().CGColor, UIColor.whiteColor().CGColor) } 

这意味着渐变背景现在可以应用于任何UIControl,因为所有的控件都是UIViews(或者子类),所有的UIViews都有CALayers。

我的解决scheme是创buildUIView子类与CAGradientLayer作为只读属性访问。 这将允许您自定义您的渐变如何,你不需要自己处理布局的变化。 子类实现:

 @interface GradientView : UIView @property (nonatomic, readonly) CAGradientLayer *gradientLayer; @end @implementation GradientView + (Class)layerClass { return [CAGradientLayer class]; } - (CAGradientLayer *)gradientLayer { return (CAGradientLayer *)self.layer; } @end 

用法:

 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); 

基于雨辰版本的简单快捷视图

 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) } } 

那么你可以在初始化后使用gradientLayer像这样…

 someView.gradientLayer.colors = [UIColor.whiteColor().CGColor, UIColor.blackColor().CGColor] 

SWIFT 3

在您的视图上添加渐变层

  • 绑定你的观点

     @IBOutlet var YOURVIEW : UIView! 
  • 定义CAGradientLayer()

     var gradient = CAGradientLayer() 
  • 这是您必须在您的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)

我已经在我的代码中实现了这一点。

 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]; 

现在我可以看到我的视图上的渐变。

 extension UIView { func applyGradient(isTopBottom: Bool, colorArray: [UIColor]) { if let sublayers = layer.sublayers { let _ = sublayers.filter({ $0 is CAGradientLayer }).map({ $0.removeFromSuperlayer() }) } let gradientLayer = CAGradientLayer() gradientLayer.colors = colorArray.map({ $0.cgColor }) if isTopBottom { gradientLayer.locations = [0.0, 1.0] } else { //leftRight 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) } } 

用法

 someView.applyGradient(isTopBottom: true, colorArray: [.green, .blue]) 

在Swift 3.1中,我已经将这个扩展添加到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) } } 

然后我打电话给

  class OverviewVC: UIViewController { override func viewDidLoad() { super.viewDidLoad() self.view.gradientOfView(withColours: UIColor.red,UIColor.green, UIColor.blue) } } 

上面的解决scheme是更新图层的一个好主意

 viewDidLayoutSubviews 

以正确地更新视图