“`html

簡要

在本篇文章中，我們將探討如何使用 CALayer 來實現圓角、圓形、陰影以及圖片裁切等效果。這些技術對於提升 iOS 應用的 UI/UX 設計至關重要，非常適合用於按鈕、圖片或任何需要圓形效果的元件。

示範使用 CALayer 的效果

基礎設置

首先，我們在你的 ViewController 中新增一個 UIView，並為其設置顏色和大小。以下是創建和添加視圖的基本代碼：

override func viewDidLoad() {
    super.viewDidLoad()
    self.view.addSubview(self.topView)
}

lazy var topView: UIView = {
    let topView = UIView()
    topView.frame = CGRect(x: self.view.center.x - 75, y: self.view.center.y - 75, width: 150, height: 150)
    topView.backgroundColor = UIColor(red: 0.5, green: 0.5, blue: 0.8, alpha: 1.0)
    return topView
}()

Demo
初步視圖設置示範

圓角設置

使用 cornerRadius 可以調整視圖的角落圓滑度，數值越高，圓角越明顯。以下是設置圓角的代碼：

topView.layer.cornerRadius = 20

Demo
圓角效果示範

這種設置不僅能應用於 UIView，還可以廣泛運用到 UIButton 或其他 UI 元件，讓介面更加美觀。

圓形設置

若要將視圖設置為圓形，只需將 cornerRadius 設定為視圖高度的一半：

topView.layer.cornerRadius = topView.frame.height / 2

Demo
圓形效果示範

這樣的設置可以用於個人頭像或圓形按鈕等多種場合。

邊框設置

想要在圓形邊緣添加邊框，可以使用以下代碼：

topView.layer.borderWidth = 10
topView.layer.borderColor = UIColor.black.withAlphaComponent(0.5).cgColor

Demo
圓形邊框效果示範

陰影與光暈效果

要為視圖添加陰影效果，需要設置四個屬性：

– shadowOffset：偏移量
– shadowOpacity：透明度
– shadowRadius：模糊半徑
– shadowColor：顏色

以下是示範代碼：

topView.layer.shadowOffset = CGSize(width: 0, height: 0)
topView.layer.shadowOpacity = 0.8
topView.layer.shadowRadius = 8
topView.layer.shadowColor = UIColor.black.cgColor

Demo
陰影效果示範

圖片裁切

在使用 UIImageView 時，設置圓角和陰影後，圖片可能會超出邊界。為了解決這個問題，可以使用以下代碼：

topView.clipsToBounds = true

或使用 masksToBounds 來自動裁切超出邊界的部分：

topView.layer.masksToBounds = true

Demo
圖片裁切效果示範

完成

Q&A（常見問題解答）

Q1: 如何在 UIView 中添加陰影效果？
A: 使用 layer.shadowOffset、layer.shadowOpacity、layer.shadowRadius 和 layer.shadowColor 來設置陰影效果。

Q2: 圓形視圖的高度和寬度應該怎麼設置？
A: 圓形視圖的高度和寬度應該相等，並且 cornerRadius 設置為高度的一半。

Q3: 如何在 UIImageView 中使用圓角和陰影？
A: 設置 masksToBounds 為 true，以確保圖片不會超出圓角邊界。

實用工具
“`
—

Categorized in:

swift