iOS和macOS使用CAGradientLayer类在QuartzCore中内置了对渐变的支持,无需自定义绘图-rectdraw:
。
线性(轴向)渐变
要创建从一种颜色到另一种(或几种)颜色的线性渐变,type
必须将图层的颜色设置为kCAGradientLayerAxial
(.axial
)。颜色必须是CGColor的颜色,而不是UIColors。如果您忘记了这一点,则将完全忽略颜色对象。默认情况下,起点是(X:0.5, Y:0.0)
水平方向的一半,垂直方向是顶部,终点是视图的底部中间。
在示例图像左侧创建示例渐变的代码为:
// Objective C
// Set type (this is also the default value)
gradientLayer.type = kCAGradientLayerAxial;
// Set the colors (these need to be CGColor's, not UIColor's)
gradientLayer.colors =
@[
(id)[UIColor colorWithRed: 48.0/255.0 green: 35.0/255.0 blue: 174.0/255.0 alpha: 1.0].CGColor,
(id)[UIColor colorWithRed: 200.0/255.0 green: 109.0/255.0 blue: 215.0/255.0 alpha: 1.0].CGColor
];
// Set the start and end points (x:0 left - x:1 right) (y:0 top - y:1 bottom)
gradientLayer.startPoint = CGPointZero;
gradientLayer.endPoint = CGPointMake(1, 1);
// Swift
// Set type (this is also the default value)
gradientLayer.type = CAGradientLayerType.axial
// Set the colors (these need to be CGColor's, not UIColor's)
gradientLayer.colors =
[
UIColor(red: 48.0/255.0, green: 35.0/255.0, blue: 174.0/255.0, alpha: 1.0).cgColor,
UIColor(red: 200.0/255.0, green: 109.0/255.0, blue: 215.0/255.0, alpha: 1.0).cgColor
]
// Set the start and end points (x:0 left - x:1 right) (y:0 top - y:1 bottom)
gradientLayer.startPoint = CGPoint.zero
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
径向渐变
要从一个点创建一个径向渐变,type
必须将图层的渐变设置为kCAGradientLayerRadial
(.radial
)。
起点和终点很重要,因为它们endPoint
是x
并y
定义第二种颜色的终点。
startPoint
中心为a 时,endPoint
x
从水平中心到视图的外边缘将水平绘制0或1。0.25或0.75的
an endPoint
Y
只会绘制渐变高度为视图高度的一半。
在中间示例图像中创建示例渐变的代码为:
// Objective C
// Set type to radial
gradientLayer.type = kCAGradientLayerRadial;
// Set the colors
gradientLayer.colors =
@[
(id)[UIColor colorWithRed: 0.0/255.0 green: 101.0/255.0 blue: 255.0/255.0 alpha: 1.0].CGColor,
(id)[UIColor colorWithRed: 0.0/255.0 green: 40.0/255.0 blue: 101.0/255.0 alpha: 1.0].CGColor
];
// Start point of first color in the middle of the view
gradientLayer.startPoint = CGPointMake(0.5, 0.5);
// End points to the edges of the view
gradientLayer.endPoint = CGPointMake(0, 1);
// Swift
// Set type to radial
gradientLayer.type = CAGradientLayerType.radial
// Set the colors
gradientLayer.colors =
[
UIColor(red: 0.0/255.0, green: 101.0/255.0, blue: 255.0/255.0, alpha: 1.0).cgColor,
UIColor(red: 0.0/255.0, green: 40.0/255.0, blue: 101.0/255.0, alpha: 1.0).cgColor
]
// Start point of first color in the middle of the view
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.5)
// End points to the edges of the view
gradientLayer.endPoint = CGPoint(x: 0, y: 1)
Angluar(Conic)渐变
线性和径向渐变永远是iOS SDK(分别为iOS 3.0和3.2和macOS 10.6)角度的一部分,或者称为CoreAnimation称为圆锥曲线的圆锥形,而渐变仅在iOS 12.0(macOS 10.14)中添加。
的startPoint
是所述梯度绘制围绕的点。
这endPoint
是起点/终点线瞄准的点。
在示例图像右侧创建示例渐变的代码为:
// Objective C
gradientLayer.type = kCAGradientLayerConic;
gradientLayer.colors =
@[
(id)[UIColor colorWithRed: 245.0/255.0 green: 81.0/255.0 blue: 95.0/255.0 alpha: 1.0].CGColor,
(id)[UIColor colorWithRed: 159.0/255.0 green: 4.0/255.0 blue: 27.0/255.0 alpha: 1.0].CGColor
];
gradientLayer.startPoint = CGPointMake(0.5, 0.5);
gradientLayer.endPoint = CGPointMake(1, 0.5);
// Swift
gradientLayer.type = CAGradientLayerType.conic
gradientLayer.colors =
[
UIColor(red: 245.0/255.0, green: 81.0/255.0, blue: 95.0/255.0, alpha: 1.0).cgColor,
UIColor(red: 159.0/255.0, green: 4.0/255.0, blue: 27.0/255.0, alpha: 1.0).cgColor
]
gradientLayer.startPoint = CGPoint(x: 0.5, y: 0.5)
gradientLayer.endPoint = CGPoint(x: 1, y: 0.5)
UIView包装器
由于在UIKit中使用隐式动画和单独的布局来处理图层有些烦人,因此我几乎总是通过将其包装在自定义UIView子类中来使用它。
实际上,您可以UIView
通过覆盖+(Class)layerClass
类方法并返回任何CALayer子类来更改a的基础类型。
目标C子类。重新定义layer属性意味着view.layer
将愉快地返回正确的layer类,并@dynamic layer;
告诉它不要为该减速自动合成任何东西。
// KHGradientView.h
@import UIKit;
@import QuartzCore;
@interface KHGradientView : UIView
@property(nonatomic, readonly, strong) CAGradientLayer *layer;
@end
// KHGradientView.m
#import "KHGradientView.h"
@implementation KHGradientView
@dynamic layer;
+(Class)layerClass{
return [CAGradientLayer class];
}
@end
斯威夫特子类
import UIKit
class KHGradientView: UIView {
override open class var layerClass: AnyClass {
return CAGradientLayer.classForCoder()
}
var gradientLayer : CAGradientLayer {
return self.layer as! CAGradientLayer
}
}
它极少,但在其余的代码库中使事情变得容易得多。