天天看點

iOS開發UI篇—CALayer簡介

一、簡單介紹

在ios中,你能看得見摸得着的東西基本上都是uiview,比如一個按鈕、一個文本标簽、一個文本輸入框、一個圖示等等,這些都是uiview。

其實uiview之是以能顯示在螢幕上,完全是因為它内部的一個圖層,在建立uiview對象時,uiview内部會自動建立一個圖層(即calayer對象),通過uiview的layer屬性可以通路這個層

@property(nonatomic,readonly,retain) calayer *layer;

當uiview需要顯示到螢幕上時,會調用drawrect:方法進行繪圖,并且會将所有内容繪制在自己的圖層上,繪圖完畢後,系統會将圖層拷貝到螢幕上,于是就完成了uiview的顯示

換句話說,uiview本身不具備顯示的功能,擁有顯示功能的是它内部的圖層。

二、簡單使用

  uiview之是以能夠顯示,完全是因為内部的calayer對象。是以,通過操作這個calayer對象,可以很友善地調整uiview的一些界面屬性,比如:陰影、圓角大小、邊框寬度和顔色等。

  建立一個項目,在storyboard中添加一個view.

iOS開發UI篇—CALayer簡介

  1.通過layer設定邊框的寬度和顔色

iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介

2.通過layer設定邊框為圓角

iOS開發UI篇—CALayer簡介

3.在layer上添加一張圖檔

iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介

說明:contents是id類型,可以接受内容,上面的執行個體讓layer顯示一張圖檔,仔細觀察可以發現四個圓角的部分露了一個角出來。

産生的原因說明:

iOS開發UI篇—CALayer簡介

customview上的根layer

iOS開發UI篇—CALayer簡介

uiimage的圖層

iOS開發UI篇—CALayer簡介

添加後

iOS開發UI篇—CALayer簡介

那是因為設定的image不是展示在主圖層上的,而是顯示在子圖層上的。可以通過設定一個範圍,設定超出主圖層的部分把它給剪切掉。

有以下兩種方法,建議使用layer中的方法(第二種)self.customview.layer.maskstobounds=yes;

iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介

注意:layer中不能直接接受ui架構中的東西

  4.設定陰影

  設定陰影,不光需要設定陰影顔色,還應該設定陰影的偏移位和透明度。

  因為如果不設定偏移位的話,那麼陰影和layer完全重疊,且預設透明度為0(即完全透明)。

iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介

補充說明:如果設定了超過主圖層的部分減掉,則設定陰影不會有顯示效果。

iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介

把剪切超出主圖層部分的代碼注釋掉之後的顯示效果

iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介

5.隻要繼承自uiview的都有layer屬性,下面以圖檔為例進行說明。

在storyboard中新添加一張圖檔。

iOS開發UI篇—CALayer簡介

簡單設定示例

iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介

設定bounds屬性,在設定時需要去除掉storyboard中的自動布局屬性。

iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介

設定圖檔的形變屬性(transform)

iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介

檢視蘋果的官方文檔,下面的屬性都可以通過kvc進行設定。

iOS開發UI篇—CALayer簡介

旋轉一個弧度

iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介
iOS開發UI篇—CALayer簡介

補充:三維坐标系

iOS開發UI篇—CALayer簡介

繼續閱讀