更新:2018.05.24
整理了一下demo:SwiftDemo
UIView是iOS系統(tǒng)中,界面元素的基礎,所有的界面元素都繼承自它窖杀,它的本身是由CoreAnimation來實現(xiàn)的吱窝。
- 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數(shù)據(jù)類型平匈。不是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數(shù)據(jù)類型隙姿。 -
shadowOffset
: 陰影偏移度,代碼中是(10,10)厂捞,即向下向右偏移10输玷,默認值是(0,-3.0)。 -
shadowOpacity
:設置陰影的透明度靡馁,默認值是0.0欲鹏,取值范圍0~1。 -
shadowRadius
: 設置陰影的模糊半徑臭墨,用來實現(xiàn)陰影的模糊效果赔嚎,默認值是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. 因為圓角效果只對視圖的背景顏色和層的邊框起作用侠畔,而不會對視圖中內容起作用,所以系統(tǒng)提供了maskToBounds
屬性损晤,如果將屬性設置為true
软棺,將會沿著圓角邊緣對視圖中的內容進行裁切。
c. cornerRadius
代表的是圓角的半徑尤勋,假如將cornerRadius
的值設置成正方形矩形邊長的一半码党,就會得到一個直徑是邊長的圓。
4. CALayer漸變
CALayer 和 UIView相似的是斥黑,CALayer也可以嵌套多個子CALayer層。從而實現(xiàn)多樣的效果眉厨。
如何實現(xiàn)漸變的效果呢锌奴?
在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.首先我們創(chuàng)建了一個CAGradientLayer
實例gradientLayer
茴恰,然后創(chuàng)建了開始顏色、過度顏色和結束顏色斩熊。然后設置grandientLayer
的屬性往枣。
-
colors
: 放顏色值的數(shù)組,個數(shù)是不限制的粉渠,這里只做了三個分冈,你也可以多放幾個試試。
-startPoint
: 顧名思義霸株,開始位置雕沉,漸變的起點,值是0~1的CGPoint
去件。 -
endPoint
:結束位置坡椒,同上 -
locations
:顏色漸變的行走軌跡,0.3表示中間顏色的漸變線位置尤溜。