Frame 和 Bounds 的區別

剛好今天面試的時侯有被問到，原本還不太理解它，現在既然理解了就來分享給大家知道囉。首先先針對這兩個名詞來各自來說明一下：

Frame => 相對於 Super View 的位置和大小。

Bounds => 相對於自己的位置和大小，也就是說如果沒有去重設 Bounds 的話，座標永遠都是(0, 0)。

或許光看字面上還不是很理解，法蘭克寫了幾行程碼式和畫了一張圖來幫助大家理解：

// 生成一個綠色背景的View並加入到Super View裡
let greenView: UIView = UIView()
greenView.backgroundColor = UIColor.green
greenView.frame = CGRect(x: 100, y: 100, width: 200, height: 200)
self.view.addSubview(greenView)
// 印出Green View的Frame和Bounds
print(“Green View Frame: \(greenView.frame)”) // 印出Frame
print(“Green View Bounds: \(greenView.bounds)”) // 印出Bounds

執行結果如下：

來看看圖解說明：

接下來法蘭克會在 Green View 上再 Add 一個 Red View，並且試著改變 Green View 的 Bounds 座標為(-20, -20)。

多生成一個紅色背景的 View 並加入到 Green View 裡

// 生成一個紅色背景的View並加入到Green View裡
let redView: UIView = UIView()
redView.backgroundColor = UIColor.red
redView.frame = CGRect(x: 0, y: 0, width: 100, height: 100)
greenView.addSubview(redView)
print("Red View Frame: \(redView.frame)")
print("Red View Bounds: \(redView.bounds)")

執行結果如下：

Console 沒意外的話會印出：

接著加入以下程式碼來改變 Green View 的 Bounds。到這邊大家可以先試著想想看會有什麼結果發生，先不要急著往下看喔~

greenView.bounds = CGRect(x: -20, y: -20, width: 200, height: 200)
print(“Green View Bounds: \(greenView.bounds)”)

執行後會看到如下結果：

來說明一下為何會往左上移動 ，我們可以這樣理解，Green View 將自已的原點改為 (-20, -20)，也就是相對於 Super View 來看的話是向左上移動的。