將 view 變成任意形狀的三種方法
iOS 的 App 畫面因為有著各式各樣的元件而變得美麗，然而不管是 view，label，image view 還是 button，它們預設都是長方形的形狀。
有沒有方法讓它們變成其它形狀呢 ? 當然可以呀，只要你能在白紙上畫出的形狀，就可以用 Swift 畫出，甚至是鬼畫符也可以。
將 view 變成任意形狀的方法不只一種，各有它們適合的情境。接下來我們將介紹三種不同的方法。這三種方法的第一步都是一樣的，都是利用 UIBezierPath 當畫筆，用它將形狀的路徑描繪出來。主要的差別則在之後的步驟。
方法 1 : addSublayer
方法2 : 利用 mask
利用 CAShapeLayer 將 UIBezierPath 畫的路徑變成形狀的 layer，然後再搭配 mask，讓 view 只顯示 UIBezierPath 畫的區塊。此方法較適合我們想切割長方形的 view，讓它只顯示特定區域的時候。
詳細的步驟可參考以下連結。
方法3: 自訂 UI 元件類別，定義它的 function draw
透過自訂 UI 元件類別，覆寫 UIView 的 function draw 改變 View 呈現的樣子。到時候 App 顯示此類別的物件時，都會變成 draw 裡客製的模樣。
class DemoView: UIView {
override func draw(_ rect: CGRect) {
let path = UIBezierPath()
var point = CGPoint(x: 10, y: 10)
path.move(to: point)
point = CGPoint(x: 90, y: 10)
path.addLine(to: point)
point = CGPoint(x: 90, y: 90)
path.addLine(to: point)
path.close()
path.fill()
}
}
let squareView = DemoView(frame: CGRect(x: 0, y: 0, width: 100, height: 100))
squareView.backgroundColor = UIColor.red在 function draw 裡我們利用 UIBezierPath 繪製形狀，然後呼叫 function fill 填滿顏色。
結果:
值得注意的，產生的 DemoView 必須有大小才會觸發 function draw 來繪製，畢竟大小為 0 的元件根本看不到，觸發 draw 繪製也是浪費時間呀。
填滿的顏色
在呼叫 fill 前用 UIColor 的 setFill() 設定填滿的顏色，比方利用 UIColor(red: 0, green: 0, blue: 1, alpha: 1).setFill() 設為藍色。
override func draw(_ rect: CGRect) {
let path = UIBezierPath()
var point = CGPoint(x: 10, y: 10)
path.move(to: point)
point = CGPoint(x: 90, y: 10)
path.addLine(to: point)
point = CGPoint(x: 90, y: 90)
path.addLine(to: point)
path.close()
UIColor(red: 0, green: 0, blue: 1, alpha: 1).setFill()
path.fill()
}結果
邊框
利用 UIColor(red: 0, green: 0, blue: 1, alpha: 1).setStroke() 將線條設為藍色，然後再用 path.stroke() 畫線。
override func draw(_ rect: CGRect) {
let path = UIBezierPath()
var point = CGPoint(x: 10, y: 10)
path.move(to: point)
point = CGPoint(x: 90, y: 10)
path.addLine(to: point)
point = CGPoint(x: 90, y: 90)
path.addLine(to: point)
path.close()
UIColor(red: 0, green: 0, blue: 1, alpha: 1).setStroke()
path.stroke()
}
透過 lineWidth 調整線的粗細。
path.lineWidth = 10
UIColor.blue.setStroke()
path.stroke()
