1.UIView概述
UIView是UIKit框架里面最基礎(chǔ)的視圖類,UIView類定義了一個(gè)矩形的區(qū)域,并管理該矩形區(qū)域內(nèi)的所有屏幕顯示坛吁。
1.UIView視圖類
UIView類定義了視圖的基本行為,但并不定義其視覺(jué)表現(xiàn),而是UIKit通過(guò)其子類來(lái)為文本框,按鍵及工具條這樣的標(biāo)準(zhǔn)界面元素定義具體的外觀和行為
.UIView視圖類如圖
這個(gè)視圖層次可以分為如下幾個(gè)大類
項(xiàng)目 | 說(shuō)明 |
---|---|
NSObject根類 | NSObject是一個(gè)根類,幾乎所有的類都是從它派生出來(lái)根類擁有所有類都有的方法,如alloc和init |
UIResponsder響應(yīng)者 | UIResponsder可以讓繼承它的類響應(yīng)移動(dòng)設(shè)備的觸摸事件,由于可能有多個(gè)對(duì)象響應(yīng)同一個(gè)事件,iOS將事件沿著響應(yīng)鏈向上傳遞 |
UIWindow窗口類 | UIWindow 提供了一個(gè)用于管理和顯示視圖的窗口尖滚。窗口提供一個(gè)描畫(huà)內(nèi)容的表面,是所有其他視圖的根容器。每個(gè)應(yīng)用程序通常都只有一個(gè)窗口 |
UIView視圖類 | UIView視圖是所有控件的父類,控件用于響應(yīng)用戶的交互,而UIView則負(fù)責(zé)內(nèi)容的顯示和布局 |
UIControl控件類 | UIControl 類幾乎是所有交互控件的父類,如按鈕,滑塊,文本框等殷费。所以UIControl 類負(fù)責(zé)根據(jù)觸摸事件觸發(fā)響應(yīng)的動(dòng)作 |
警告視圖和動(dòng)作表單 | 警告視圖和動(dòng)作表單都可以用于提示用戶。它們向用戶顯示一條消息和一個(gè)或多個(gè)可選的按鍵,用戶通過(guò)這些選項(xiàng)來(lái)響應(yīng)消息 |
1.UIView的外觀屬性
UIView類的外觀屬性常用的主要有背景顏色,切邊,同名度,顯示和隱藏
//創(chuàng)建UIView視圖
let view=UIView(frame:CGRect(x:10,y:30,width:300,height:200))
view.backgroundColor=UIColor.red//背景顏色
view.clipsToBounds=true//切邊
view.alpha=0.4//透明度
view.isHidden=false//是否顯示隱藏
self.view.addSubview(view)
2.UIView的幾何屬性
iOS系統(tǒng)包含兩個(gè)坐標(biāo)系,其中UIkit坐標(biāo)系是X軸正方向向右,Y軸方向向下,而標(biāo)準(zhǔn)Quartz2D繪圖坐標(biāo)系為X軸方向向右,Y軸正方向向上
下面解釋一些相關(guān)的概念:
- UIView的frame(origin,size)屬性:定義了一個(gè)矩形,描述一個(gè)UIView的大小和在父坐標(biāo)的位置
- UIView的bounds(origin,size)屬性:同樣定義了一個(gè)矩形,描述一個(gè)UIView的大小和自身坐標(biāo)原點(diǎn)的位置评肆。bounds. origin屬性默認(rèn)值時(shí)(0,0)拌牲,而bounds.size和frame.size是一致的
- UIView的center屬性:用于確定一個(gè)視圖的中心位置,參照其父視圖的坐標(biāo)系統(tǒng)。在對(duì)視圖進(jìn)行放大,縮小或者旋轉(zhuǎn),該屬性的值不會(huì)改變
3.UIView的嵌套和層次關(guān)系
UIView視圖層次管理方法列表
方法名稱 | 方法說(shuō)明 |
---|---|
insertSubview(view,at:) | 在指定的位置插入視圖 |
insertSubview(UIView, aboveSubview: UIView) | 將視圖添加到指定視圖的上方 |
insertSubview(UIView, belowSubview: UIView) | 將視圖添加到指定視圖的下方 |
bringSubview(toFront: view1) | 將指定的子視圖移動(dòng)到最前面 |
bringSubview(toFront: view1) | 將指定的子視圖移動(dòng)到最后面 |
exchangeSubview(at: 0, withSubviewAt: 1) | 交換兩個(gè)指定位置的子視圖在父類的位置 |
removeFromSuperview() | 將子視圖從父類中移除 |
具體代碼
//創(chuàng)建UIView視圖
let view=UIView(frame:CGRect(x:10,y:30,width:300,height:200))
view.backgroundColor=UIColor.red//背景顏色
view.clipsToBounds=true//切邊
view.alpha=0.4//透明度
view.isHidden=false//是否顯示隱藏
self.view.addSubview(view)
let view1=UIView(frame:CGRect(x:110,y:30,width:100,height:200))
view1.backgroundColor=UIColor.green
self.view.addSubview(view1)
let tap=UITapGestureRecognizer(target:self,action:#selector(onetap))
view1.addGestureRecognizer(tap)
// self.view.insertSubview(view1, at: 1)//將視圖插入指定的位置
// self.view.insertSubview(view1, aboveSubview: view)//將視圖插入某個(gè)視圖的上方
// self.view.insertSubview(view1, belowSubview: view)//將視圖插入某個(gè)視圖的下方
// self.view.bringSubview(toFront: view1)//將指定的子視圖移動(dòng)到最前面
// self.view.bringSubview(toFront: view1)//將指定的子視圖移動(dòng)到最后面
self.view.exchangeSubview(at: 0, withSubviewAt: 1)//交換兩個(gè)指定位置的子視圖在父類的位置
// view1.removeFromSuperview()//將子視圖從父類中移除
4.UIView的交互屬性
聽(tīng)過(guò)設(shè)置UIView的isUserInteractionEnabled,可以激活用戶的交互特性撮珠。
代碼
//創(chuàng)建UIView視圖
let view=UIView(frame:CGRect(x:10,y:30,width:300,height:200))
view.backgroundColor=UIColor.red//背景顏色
view.clipsToBounds=true//切邊
view.alpha=0.4//透明度
view.isHidden=false//是否顯示隱藏
let tap=UITapGestureRecognizer(target:self,action:#selector(onetap))
view.addGestureRecognizer(tap)
self.view.addSubview(view)
@objc func onetap() {
print("呵呵")
}
4.自定義UIView 視圖
import UIKit
class CustomView: UIView {
override init(frame: CGRect) {
super.init(frame: frame)
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override func draw(_ rect: CGRect) {
let ctx=UIGraphicsGetCurrentContext()
ctx?.clear(self.frame)
ctx?.setFillColor(UIColor.red.cgColor)
ctx?.fillEllipse(in: CGRect(x:0,y:0,width:self.frame.width,height:self.frame.height))
}
}
CAlayer層
UIView是iOS系統(tǒng)中界面元素的基礎(chǔ),所有的界面元素都繼承自它,它本身完全是CoreAnimation來(lái)實(shí)現(xiàn)的,而UIView真正的繪圖部分,是由一個(gè)叫CALayer的管理器金矛,訪問(wèn)它的跟繪圖和跟坐標(biāo)有關(guān)的屬性芯急。例如:frame,bounds等,實(shí)際上內(nèi)部都是在訪問(wèn)它所包含的CALayer的相關(guān)屬性
1. CAlayer邊框
let view3=UIView(frame:CGRect(x:100,y:300,width:200,height:200))
view3.backgroundColor=UIColor.green
view3.layer.borderColor=UIColor.red.cgColor//邊框顏色
view3.layer.borderWidth=3//邊框?qū)挾? view3.layer.cornerRadius=10//邊框弧度
self.view.addSubview(view3)
1. CAlayer陰影
view3.layer.shadowColor=UIColor.blue.cgColor
view3.layer.shadowOffset=CGSize(width:10,height:10)//設(shè)置陰影的位置
view3.layer.shadowOpacity=1//設(shè)置陰影的透明度
view3.layer.shadowRadius=3//設(shè)置半徑弧度
1. CAlayer漸變
CALayer和UIView相似地方是,CALayer層也可以嵌套多個(gè)子CALayer層,從而實(shí)現(xiàn)多種多樣的效果
//漸變
let view4=UIView(frame:CGRect(x:40,y:300,width:200,height:200))
self.view.addSubview(view4)
let GradientLayer=CAGradientLayer()//創(chuàng)建漸變圖層
GradientLayer.frame=view4.frame
let yellowColor=UIColor.yellow.cgColor
let blueColor=UIColor.blue.cgColor
let grayColor=UIColor.gray.cgColor
GradientLayer.colors=[yellowColor,blueColor,grayColor]//添加漸變的顏色
GradientLayer.startPoint=CGPoint(x:0,y:0)//漸變的開(kāi)始位置
GradientLayer.endPoint=CGPoint(x:1,y:1)//漸變的結(jié)束位置
GradientLayer.locations=[0.3,0.41,0.5]//設(shè)置漸變層的各顏色點(diǎn)在顏色線中的分布情況驶俊,在locatios屬性值數(shù)組中的0.3表示漸變線中間的blueColor,在漸變層的30%的位置
view4.layer.addSublayer(GradientLayer)