Swift(十一)CALayer

更新:2018.05.24

整理了一下demo:SwiftDemo


UIView是iOS系統(tǒng)中,界面元素的基礎,所有的界面元素都繼承自它窖杀,它的本身是由CoreAnimation來實現(xiàn)的吱窝。

  • UIView真正的繪圖部分,是由一個叫CALayer(Core Animation Layer)的類來管理的夷野。
  • UIView本身更像是一個CALayer的管理器,訪問它跟繪圖和跟坐標有關的屬性荣倾,實際上內部都是在訪問它所包含的CALayer的相關屬性悯搔。

1.CALayer邊框

通過設置CALayer的borderWidthborderColor屬性,來設置視圖的邊框舌仍。

    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. 還是之前的那個例子,添加了layermaskToBoundscornerRadius屬性尤误。
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表示中間顏色的漸變線位置尤溜。
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
  • 序言:七十年代末倔叼,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子宫莱,更是在濱河造成了極大的恐慌缀雳,老刑警劉巖,帶你破解...
    沈念sama閱讀 212,816評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件梢睛,死亡現(xiàn)場離奇詭異肥印,居然都是意外死亡识椰,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,729評論 3 385
  • 文/潘曉璐 我一進店門深碱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來腹鹉,“玉大人,你說我怎么就攤上這事敷硅」χ洌” “怎么了?”我有些...
    開封第一講書人閱讀 158,300評論 0 348
  • 文/不壞的土叔 我叫張陵绞蹦,是天一觀的道長力奋。 經常有香客問我,道長幽七,這世上最難降的妖魔是什么景殷? 我笑而不...
    開封第一講書人閱讀 56,780評論 1 285
  • 正文 為了忘掉前任,我火速辦了婚禮澡屡,結果婚禮上猿挚,老公的妹妹穿的比我還像新娘。我一直安慰自己驶鹉,他們只是感情好绩蜻,可當我...
    茶點故事閱讀 65,890評論 6 385
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著室埋,像睡著了一般办绝。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上姚淆,一...
    開封第一講書人閱讀 50,084評論 1 291
  • 那天八秃,我揣著相機與錄音,去河邊找鬼肉盹。 笑死昔驱,一個胖子當著我的面吹牛,可吹牛的內容都是我干的上忍。 我是一名探鬼主播骤肛,決...
    沈念sama閱讀 39,151評論 3 410
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼窍蓝!你這毒婦竟也來了腋颠?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 37,912評論 0 268
  • 序言:老撾萬榮一對情侶失蹤吓笙,失蹤者是張志新(化名)和其女友劉穎淑玫,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經...
    沈念sama閱讀 44,355評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡絮蒿,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 36,666評論 2 327
  • 正文 我和宋清朗相戀三年尊搬,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片土涝。...
    茶點故事閱讀 38,809評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡佛寿,死狀恐怖,靈堂內的尸體忽然破棺而出但壮,到底是詐尸還是另有隱情冀泻,我是刑警寧澤,帶...
    沈念sama閱讀 34,504評論 4 334
  • 正文 年R本政府宣布蜡饵,位于F島的核電站弹渔,受9級特大地震影響,放射性物質發(fā)生泄漏溯祸。R本人自食惡果不足惜肢专,卻給世界環(huán)境...
    茶點故事閱讀 40,150評論 3 317
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望您没。 院中可真熱鬧,春花似錦胆绊、人聲如沸氨鹏。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,882評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽仆抵。三九已至,卻和暖如春种冬,著一層夾襖步出監(jiān)牢的瞬間镣丑,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,121評論 1 267
  • 我被黑心中介騙來泰國打工娱两, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留莺匠,地道東北人。 一個月前我還...
    沈念sama閱讀 46,628評論 2 362
  • 正文 我出身青樓十兢,卻偏偏與公主長得像趣竣,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子旱物,可洞房花燭夜當晚...
    茶點故事閱讀 43,724評論 2 351

推薦閱讀更多精彩內容

  • 在iOS中隨處都可以看到絢麗的動畫效果遥缕,實現(xiàn)這些動畫的過程并不復雜,今天將帶大家一窺iOS動畫全貌宵呛。在這里你可以看...
    F麥子閱讀 5,104評論 5 13
  • 在iOS中隨處都可以看到絢麗的動畫效果单匣,實現(xiàn)這些動畫的過程并不復雜,今天將帶大家一窺ios動畫全貌。在這里你可以看...
    每天刷兩次牙閱讀 8,471評論 6 30
  • 轉載:http://www.reibang.com/p/32fcadd12108 每個UIView有一個伙伴稱為l...
    F麥子閱讀 6,170評論 0 13
  • 原文出處:http://blog.csdn.net/zhz459880251/article/details/50...
    F麥子閱讀 1,732評論 0 5
  • >復雜的組織都是專門化的 >Catharine R. Stimpson 到目前為止户秤,我們已經探討過`CALayer...
    夜空下最亮的亮點閱讀 1,004評論 0 2