更新:2018.05.24
整理了一下demo:SwiftDemo
UIView是iOS系统中,界面元素的基础,所有的界面元素都继承自它,它的本身是由CoreAnimation来实现的。
- UIView真正的绘图部分,是由一个叫CALayer(Core Animation Layer)的类来管理的。
- UIView本身更像是一个CALayer的管理器,访问它跟绘图和跟坐标有关的属性,实际上内部都是在访问它所包含的CALayer的相关属性。
1.CALayer边框
通过设置CALayer的borderWidth
和borderColor
属性,来设置视图的边框。
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.gray
let v = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
v.backgroundColor = UIColor.black
v.layer.borderColor = UIColor.red.cgColor
v.layer.borderWidth = 2
view.addSubview(v)
}
a. 上面代码中,定义了一个视图v
,北京颜色为黑色,位置在(100,100)
宽高200。
b. 然后设置视图的边框颜色为红色,边框宽度为2。这里borderColor的值使用的是CGColorRef数据类型。不是UIColor。
2.CALayer阴影
通过CALayer的几个阴影属性来设置阴影效果。
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.gray
let v = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
v.backgroundColor = UIColor.black
view.addSubview(v)
v.layer.shadowColor = UIColor.red.cgColor
v.layer.shadowOffset = CGSize(width: 10, height: 10)
v.layer.shadowOpacity = 0.45
v.layer.shadowRadius = 5.0
}
a. 上面代码中,还是上一个例子的代码。
-
shadowColor
: 阴影颜色。依然是CGColorRef数据类型。 -
shadowOffset
: 阴影偏移度,代码中是(10,10),即向下向右偏移10,默认值是(0,-3.0)。 -
shadowOpacity
:设置阴影的透明度,默认值是0.0,取值范围0~1。 -
shadowRadius
: 设置阴影的模糊半径,用来实现阴影的模糊效果,默认值是3.0。
3.CALayer圆角
通过设置 CALayer的cornerRadius
属性来设置圆角效果
class ThirdViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.gray
let v = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
v.backgroundColor = UIColor.black
view.addSubview(v)
v.layer.masksToBounds = true
v.layer.cornerRadius = 100
}
a. 还是之前的那个例子,添加了layer
的maskToBounds
和cornerRadius
属性。
b. 因为圆角效果只对视图的背景颜色和层的边框起作用,而不会对视图中内容起作用,所以系统提供了maskToBounds
属性,如果将属性设置为true
,将会沿着圆角边缘对视图中的内容进行裁切。
c. cornerRadius
代表的是圆角的半径,假如将cornerRadius
的值设置成正方形矩形边长的一半,就会得到一个直径是边长的圆。
4. CALayer渐变
CALayer 和 UIView相似的是,CALayer也可以嵌套多个子CALayer层。从而实现多样的效果。
如何实现渐变的效果呢?
在layer
中,添加一个CAGradientLayer
渐变层,CAGradientLayer
是用来生成两种或多种颜色平滑的渐变效果的。
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = UIColor.gray
let v = UIView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
v.backgroundColor = UIColor.black
view.addSubview(v)
let gradientLayer = CAGradientLayer()
gradientLayer.frame = v.bounds
let fromColor = UIColor.green.cgColor
let minColor = UIColor.red.cgColor
let toColor = UIColor.blue.cgColor
gradientLayer.colors = [fromColor,minColor,toColor]
gradientLayer.startPoint = CGPoint(x: 0, y: 0)
gradientLayer.endPoint = CGPoint(x: 1, y: 1)
gradientLayer.locations = [0,0.3,1]
v.layer.addSublayer(gradientLayer)
}
a. OK,还是之前的那个例子,直接看下面的定义CAGradientLayer
部分。
b.首先我们创建了一个CAGradientLayer
实例gradientLayer
,然后创建了开始颜色、过度颜色和结束颜色。然后设置grandientLayer
的属性。
-
colors
: 放颜色值的数组,个数是不限制的,这里只做了三个,你也可以多放几个试试。
-startPoint
: 顾名思义,开始位置,渐变的起点,值是0~1的CGPoint
。 -
endPoint
:结束位置,同上 -
locations
:颜色渐变的行走轨迹,0.3表示中间颜色的渐变线位置。