讓圖片同時有圓角和陰影 — SwiftUI & UIKit
以下分別介紹 SwiftUI & UIKit 的做法。
SwiftUI
struct ContentView: View {
var body: some View {
Image("book")
.resizable()
.scaledToFit()
.frame(width: 300)
.clipShape(.rect(cornerRadius: 30))
.shadow(color: .black, radius: 10)
}
}
UIKit
UIKit 的做法會比 SwiftUI 麻煩。想要圖片有圓角不難,只要設定 clipsToBounds 和 cornerRadius。
imageView.clipsToBounds = true
imageView.layer.cornerRadius = 30
想要圖片有陰影也不難,只要設定 shadow 的相關屬性,比方將 shadowOpacity 設為 0.5。
imageView.layer.shadowOpacity = 0.5
但是當我們想要同時有圓角和陰影,加入以下三行程式後,卻會發現圓角依然出現,但陰影不見了,因為 clipsToBounds 劍術太犀利了,不只會切出圓角,還會連陰影一起切除。
imageView.clipsToBounds = true
imageView.layer.cornerRadius = 30
imageView.layer.shadowOpacity = 0.5
ps: 不過只有圖片的圓角會遇到這樣的問題,因為 cornerRadius 的說明裡提到 By default, the corner radius does not apply to the image in the layer’s contents property; it applies only to the background color and border of the layer.
,所以我們才要設定 clipsToBounds。如果是一般的 view 要變圓角,並不需要將 clipsToBounds 設為 true。
所以要怎麼實現圖片同時有圓角和陰影呢 ? 其實是做得到的,以下介紹兩種方法,分別用兩個 view 和一個 view 實現。
方法一
以另一個 view 裝著要顯示的 view,比方以下例子,我們用 containerView 裝著 imageView,shadow 加在 containerView 上。(ps: containerView 是一個 view)
containerView.layer.shadowOpacity = 0.5
containerView.layer.cornerRadius = 30
imageView.clipsToBounds = true
imageView.layer.cornerRadius = 30
方法二
直接用原本的 image view 實現,在 image view 原本的 layer 做陰影,然後再新加入一個 layer 做圓角,詳細的程式碼可參考以下連結