[Objective-C] CALayer基本用法

UI元件的基礎是UIView，而CALayer是負責繪製UIView上面的圖示，因此可以透過更改CALayer的屬性可以達到一些特殊的效果。

範例程式下載

效果圖

左上角的圖片是存入到UIImageView *p1之中，我們設定layer裡面的屬性來達到陰影的效果

self.p1.layer.shadowColor = [UIColor blackColor].CGColor;

//設定陰影顏色

self.p1.layer.shadowOffset = CGSizeMake(10, 10);

//設定陰影偏差值 (X,Y) ; X正值為右 負值為左 ; Y正直為下 負值為上

self.p1.layer.shadowRadius = 3;

//設定陰影半徑

self.p1.layer.shadowOpacity = 0.8;

//設定陰影透明度

中間的圖片是存入到UIImageView *p2之中，一樣設定layer來讓他變圓

//設定圓角半徑，設定cornerRadius來更改

self.p2.layer.cornerRadius = self.p2.frame.size.width / 2;

//圓角半徑,預設為零 ; 如果更改就會畫角 ; 要改成圓的話，設定該View寬/2即可。

         

    

self.p2.layer.cornerRadius = self.p2.frame.size.width / 3;

self.p2.layer.cornerRadius = self.p2.frame.size.width / 4;

//各種圓角半徑可自己測看看

    

耳朵的範圍超出UIimageView範圍了，也許我們不想要這樣，那麼可以將此屬性更改

self.p2.clipsToBounds = YES;
//預設值是NO，NO -> View上的東西會超出View的範圍 ; YES則否

同時有圓角及陰影效果的話就將他加在一起，UIImageView *p3是第三張圖片

//同時加入圓角及陰影效果

self.p3.layer.cornerRadius = self.p3.frame.size.width / 2;

//圓角

self.p3.layer.shadowColor = [UIColor blackColor].CGColor;

//陰影顏色

self.p3.layer.shadowOffset = CGSizeMake(10, 10);

//設定陰影偏差值 (X,Y) ; X正值為右 負值為左 ; Y正直為下 負值為上

self.p3.layer.shadowRadius = 3;

//設定陰影半徑

self.p3.layer.shadowOpacity = 0.8;

//設定陰影透明度

尾巴的部分跑出去了，如果不想要跑出去，你也許會跟上面一樣加入

self.p3.clipsToBounds = YES;

但是卻不能達到你要的效果。

我的做法是，用一個View設定他為透明，並設定他的layer有陰影效果，在上面放入一個圓形效果的UIImageView，並設定不能跑出UIImageView的範圍。


UIView *p4S      ->負責做陰影效果

UIImageView *p4  ->做成圓形且不能超出範圍

self.p4S.backgroundColor = [UIColor clearColor];

//將p4S這個UIView背景色設為透明

//加入陰影效果

self.p4S.layer.shadowColor = [UIColor blackColor].CGColor;

self.p4S.layer.shadowOffset = CGSizeMake(10, 10);

self.p4S.layer.shadowRadius = 3;

self.p4S.layer.shadowOpacity = 0.8;

//加入陰影效果

//設定圓角效果

self.p4.layer.cornerRadius = self.p4.frame.size.width / 2;

//並且不能超出View的頁面

self.p4.clipsToBounds = YES;

那最後試著用上面的技巧，用一個大的陰影層，擺入一堆圖片

UIView *p5S -> 陰影層 並設定背景為透明

//陰影層

self.p5S.backgroundColor = [UIColor clearColor];

self.p5S.layer.shadowColor = [UIColor blackColor].CGColor;

self.p5S.layer.shadowOffset = CGSizeMake(-10, -10);

self.p5S.layer.shadowRadius = 3;

self.p5S.layer.shadowOpacity = 0.8;

//陰影層

最後會有這種效果