2014年12月17日 星期三

[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;
//預設值是NONO -> 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;
//陰影層

最後會有這種效果