以编程方式创建具有颜色渐变的UIView


Answers:


694

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


13
+1是所有解决方案中最短的代码量。我刚添加到我现有的视图控制器中,将2引用更改viewself.view,它就像一个魅力:)
Ergin

4
同样相关的是在何处添加此代码。我需要以下帖子才能使其正常工作:stackoverflow.com/a/20059268/1480518
Garrett Disco 2014年

13
这对我很有帮助!在其他任何地方都错过了CGColor部分!谢谢
Gyfis 2015年

48
不要忘记使用“ startPoint”和“ endPoint”来更改渐变方向。从上到下的默认值是(0.5,0)和(0.5,1)。
Valentin Shamardin 2015年

12
当UIView使用AutoLayout时,我还必须调用gradient.frame = view.boundsin viewDidAppear()和in didRotateFromInterfaceOrientation(),否则渐变的大小将无法正确调整。
EricRobertBrewer

70

您可以创建一个自定义类GradientView

斯威夫特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]
    }
}

在情节提要中,将类类型设置为要具有渐变背景的任何视图:

在此处输入图片说明

这可以通过以下方式更好:

  • 无需设置框架 CLayer
  • NSConstraint照常使用UIView
  • 无需创建子层(更少的内存使用)

1
在Swift 3上layerClass,它不再是一个函数,而是一个属性,因此您必须像一个属性一样覆盖它:stackoverflow.com/questions/28786597/…。您还必须实现override init(frame: CGRect),请检查以下答案:stackoverflow.com/questions/27374330/…。谢谢!
LaloLoop

您好@LaloLoop,感谢您的评论!我已经更新了代码。我认为我不必重写init(frame:CGRect)。我测试了更新的代码,它工作正常。
Yuchen Zhong

@Yuchen Zhong在IB中崩溃,但在该应用程序中有效。如果@IBDesignable使用它,为什么没有在IB中呈现它?
亚历山大·沃尔科夫

@AlexanderVolkov可能还有其他问题吗?我们在情节提要中一直在使用它,但似乎没有任何问题。您可以调试情节提要,看看哪一行崩溃了。
Yuchen Zhong

1
最好的解决方案!
巴兰·埃姆雷

40

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

目标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 +

代码:-

 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)

在此处输入图片说明

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

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

在此处输入图片说明

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

希望这对某人有帮助。


36

这是我推荐的方法。

为了提高可重用性,我想创建一个类别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];

您应该将代码放在哪里使用它?什么生命周期方法?viewdidappear使其显得为时已晚。viewdidload和viewdidappear导致其在旋转时不起作用。viewdidlayoutsubviews可以更好地旋转,但最终看起来仍然有些断断续续。
亚当·约翰斯

我亲自输入viewDidLoad
Sam Fischer 2014年

1
当我将其放入时viewDidLoad,如果该应用以横向方向启动则无法正常工作。我的解决方案是使背景层框架比view.frame宽,以补偿其他方向。
亚当·约翰斯

2
viewDidLoad可以工作,您只需要使用[backgroundLayer setAutoresizingMask:UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight]设置AutoResizingMask;
ekscrypto

21

由于我整个应用程序只需要一种渐变类型,因此我创建了UIView的子类,并在初始化时使用固定颜色预配置了渐变层。UIView的初始化程序调用configureGradientLayer方法,该方法配置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类似于初始化程序。我认为这不是很合适。
DawnSong

@DawnSong好点,我将其更改为“ configureGradientLayer”。
blauzahn

12

快速实施:

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)

11

我已经使用Swift的扩展功能以及一个枚举来扩展了可接受的答案。

哦,如果你使用的是故事板像我这样做,请确保调用gradientBackground(from:to:direction:)viewDidLayoutSubviews()或更高版本。

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

10

我通过扩展迅速实现了这一点:

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

斯威夫特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)

Swift3调用必须类似于:myImageView.addGradientWithColor(color:UIColor.blue)
mgyky

8

快速方法

该答案建立在上述答案的基础上,并提供了用于解决在旋转过程中无法正确应用渐变的问题的实现。通过将渐变层更改为正方形来满足此问题,以便在所有方向上旋转都可以生成正确的渐变。该函数签名包括一个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,因为所有控件都是UIView(或子类),并且所有UIView都具有CALayers。

斯威夫特4

扩展实施

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

扩展用例示例:

override func viewDidLoad() {
    super.viewDidLoad()

    self.view.layer.configureGradientBackground(UIColor.purple.cgColor, UIColor.blue.cgColor, UIColor.white.cgColor)
}

5

您正在寻找的是CAGradientLayer。每个UIView图层都有一个图层-您可以在该图层中添加子图层,就像添加子视图一样。一种特定的类型是CAGradientLayer,您可以在其中提供一系列要在其之间渐变的颜色。

一个简单的例子就是这种用于渐变视图的简单包装器:

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

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


4

斯威夫特4:

正确显示IB中的渐变:

@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]
    }
}

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

}

用法

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

3

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

}

然后您可以像这样在初始化后使用gradientLayer ...

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

3

我的解决方案是创建UIView具有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);


2

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)


1
我使用了这种方法,将“ topview”更改为我的视图的IBoutlet的名称。我删除了“ SearchView”行。
jessi

好的计划-也许还要注意,您可以使用渐变或颜色设置中的任何一种。因此,如果使用命名的UI颜色注释掉简单的gradient.colors,则图像是相同的,但是如果注释掉另一种,则颜色梯度将依赖于红色到绿色。用户可以执行任一操作。
jessi

1

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

        }
}

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

现在,我可以在视图上看到一个渐变。


0

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

如何使用

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)
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.