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

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

Answer 1

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有轻微的性能影响。

Answer 2

这是我推荐的方法。

为了提高可重用性，我会说创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]; 

Answer 3

由于我只需要在我的应用程序中使用一种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 

Answer 4

你可以创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用内存）

Answer 5

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

目标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文档

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

Answer 6

快速实施：

 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) 

Answer 7

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

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) 

Answer 8

我使用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) } } 

Answer 9

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

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

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

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

Answer 10

快速的方法

这个答案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。

Answer 11

我的解决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); 

Answer 12

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

 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] 

Answer 13

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)

Answer 14

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

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

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

Answer 15

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

Answer 16

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

Answer 17

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

 viewDidLayoutSubviews 

以正确地更新视图