【iOS - Frame 和 Bounds 的區別】

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

Frame => 自已 (View) 相對於父 View 的位置和大小。

Bounds => 自已 (View) 相對於自己的位置和大小,也就是說如果沒有去重設 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 來看的話是向左上移動的。

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.