讓圖片同時有圓角和陰影 — 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

cornerRadius | Apple Developer Documentation

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 做圓角，詳細的程式碼可參考以下連結

Views with Rounded Corners and Shadows