讓 view 變圓角的 layer.cornerRadius
透過設定 view 的 layer.cornerRadius，我們可以為原本方方正正的 view 增添圓角效果，接下來就讓我們一步步示範說明吧。
圓角設定步驟
1 在 storyboard 的 controller 畫面上加入藍色的 view。
2 點選藍色 view 後，切換到 identity inspector 頁面(左邊數來第四個 icon)，然後找到 User Defined Runtime Attributes 區塊。
3 在 User Defined Runtime Attributes 區塊設定 layer.cornerRadius。
我們可在 User Defined Runtime Attributes 手動輸入元件的額外資訊，比方它的圓角，邊框和陰影等。
點選左下角的 + 新增一筆資料。我們在 Key Path 輸入欄位的名稱 layer.cornerRadius，請注意每個字都要打對，就連大小寫也要一模一樣，打錯的話我們將白打一場，輸入的內容無法生效。
接著設定 Type 欄位，將它改成 Number，因為圓角的內容為數字。
在 Value 欄位輸入圓角的數值 40。
現在已經大功告成了 ! 可是，此時畫面上的藍色 view 依然沒有變圓角呀。
別急，圓角效果要 App 跑起來才能看到。如下圖所示，藍色 view 果然長出圓角了。
製作長條圓角按鈕
layer.cornerRadius 是 view 的屬性，由於 UI 元件都繼承 view，因此所有的 UI 元件都可以實現圓角效果，比方下圖的圓角按鈕。
剛剛的按鈕高度為 100，我們只要將它的 layer.cornerRadius 設為高度的一半，即可實現高度的邊邊整個變圓的效果。
製作圓形的圖片
iOS App 上時常看到圓形的帥氣大頭照，它們也是透過 layer.cornerRadius 實現的。若希望 view 變成圓形，原本的 view 必須是正方形，然後 layer.cornerRadius 設為寬度的一半。
為了讓圖片填滿，不會留白，Cotent Mode 要設成 Aspect Fill。另外 cornerRadius 預設並不會將圓角效果加到圖片上，如果希望圖片也能變圓角，必須額外勾選 Clip to Bounds。
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. However, setting the masksToBounds property to true causes the content to be clipped to the rounded corners.
App 啟動後，彼得潘的大頭照果然完美地變圓了。
ps: 顯示文字的 label 想要變成圓角也要勾選 Clip to Bounds。從程式設定的話，必須將 clipsToBounds 設為 true。
利用 iOS 15 的 UIButton.Configuration 實現 button 的圓角
在 iOS 15 實現 button 的圓角有更簡單的方法，相關說明可參考以下連結。
cornerRadius 畫出圓角的原理
最後，也許有人好奇，cornerRadius 是如何決定圓角的弧度呢 ? 很簡單，我們可用以下的圖片說明。
假設 layer.cornerRadius 是 30，cornerRadius 的中文是角落半徑，因此它將從 view 的四個頂點以 45 度畫出長度 30 的圓形半徑，然後以此為圓心，畫出半徑 30 的圓形，實現我們看到的圓角效果。
了解此原理後，我們也解開了將 cornerRadius 設為正方形寬度的一半即可變成圓形的謎題。因為從正方形的頂點 45 度畫出寬度一半的半徑後，將以正方形的中心為圓心，畫出半徑等於寬度一半的圓形。
那如果 cornerRadius 的數字太大呢 ? 它將不再是可愛的圓，而會變成類似菱形的尖角。比方下圖的 image view 大小為 200 * 200，但我們卻將 cornerRadius 設為 130。想了解為何會變菱形的朋友，可參考左邊從四個頂點畫出半徑 130 圓形的示意圖。
以上就是圓角相關的基本介紹，如果想了解更特別的效果，比方只讓 view 的左上角變圓角，則可參考以下連結的說明。
