Swift視圖UIView

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視圖類如圖

timg.jpg

這個(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)
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末娶耍,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子饼酿,更是在濱河造成了極大的恐慌榕酒,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件故俐,死亡現(xiàn)場(chǎng)離奇詭異想鹰,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)药版,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén)辑舷,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人槽片,你說(shuō)我怎么就攤上這事何缓≈。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵碌廓,是天一觀的道長(zhǎng)传轰。 經(jīng)常有香客問(wèn)我,道長(zhǎng)谷婆,這世上最難降的妖魔是什么慨蛙? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮波材,結(jié)果婚禮上股淡,老公的妹妹穿的比我還像新娘。我一直安慰自己廷区,他們只是感情好唯灵,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著隙轻,像睡著了一般埠帕。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上玖绿,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天敛瓷,我揣著相機(jī)與錄音,去河邊找鬼斑匪。 笑死呐籽,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的蚀瘸。 我是一名探鬼主播狡蝶,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼贮勃!你這毒婦竟也來(lái)了贪惹?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤寂嘉,失蹤者是張志新(化名)和其女友劉穎奏瞬,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體泉孩,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡硼端,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了寓搬。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片显蝌。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出曼尊,到底是詐尸還是另有隱情酬诀,我是刑警寧澤,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布骆撇,位于F島的核電站瞒御,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏神郊。R本人自食惡果不足惜肴裙,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望涌乳。 院中可真熱鬧蜻懦,春花似錦、人聲如沸夕晓。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)蒸辆。三九已至征炼,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間躬贡,已是汗流浹背谆奥。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留拂玻,地道東北人酸些。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像檐蚜,于是被迫代替她去往敵國(guó)和親魄懂。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容