iOS UIView shadow

最近在寫的專案,使用到比較多的陰影效果,就來列列有關陰影效果的一些內容。

CALayer

陰影相關的實作方式,是以 CALayer 底下的這五個變數來控制

  • shadowColor: CGColor?
  • shadowPath: CGPath?
  • shadowOffset: CGSize
  • shadowRadius: CGFloat
  • shadowOpacity: Float

shadowColor

預設值為不透明的黑色,我們可以透過這個參數來調整陰影的顏色。

shadowPath

預設值為 null,並支援 animated,可以在這邊調整陰影的路徑,

所以當 UIView 在透過 animated 調整大小時,我們可以一併調整 shadowPath 來跟著做變化。

shadowOffset

預設值為 [0, -3],來調整陰影的位移。

shadowRadius

預設值為 3,系統本身會進行發散的動作。

shadowOpacity

預設值為 0,也就是完全透明;

所以如果只是要陰影,並沒有需要客製化的話,

只需要修改 shadowOpacity,畫面上就會有 offset = [0, -3], radius = 3 的不透明黑色陰影出現。

 

cornerRadius

這邊有點需要注意到的是,若要有 shadow 效果的話,下面兩者必須為 false

  • layer.masksToBounds
  • clipsToBounds

因為若將 layer 只關閉在 bounds 的話,則無法呈現陰影的效果;

但偏偏若需要圓角效果的話,則必須更改為 true

而這邊,我的做法是,

先建立一個透明色的 UIView,來做陰影的效果,

再疊加一層 subview 來做圓角的效果,

這樣便可以做出有陰影效果的圓角 UIView 了!