利用 UIView 的 addSubview 將 view 加到另一個 view 上
Published in
4 min readMar 10, 2019
從程式製作 App 畫面時，我們時常使用 addSubview。不過接下來先讓我們以比較直覺易懂的 storyboard 說明，然後再來研究程式的做法。
如下圖所示，紅色 view 身上裝著綠色 view 和藍色 view，因此綠色 view 和藍色 view 是紅色 view 的 subview，紅色 view 是綠色 view 和藍色 view 的 superview。
從左邊的樹狀圖，我們還發現藍色 view 長在綠色 view 下面，表示藍色 view 較晚才加入。就像疊疊樂一樣，後面加入的將壓在前面的東西上，因此藍色 view 蓋到一部分的綠色 view。
剛剛 storyboard 的畫面，如果用程式實作，需要使用 UIView 的 function addSubview ，程式如下:
import UIKit
var rect = CGRect(x: 0, y: 0, width: 200, height: 200)
let redView = UIView(frame: rect)
redView.backgroundColor = UIColor(red: 1, green: 0, blue: 0, alpha: 1)
rect = CGRect(x: 10, y: 10, width: 100, height: 100)
let greenView = UIView(frame: rect)
greenView.backgroundColor = UIColor(red: 0, green: 1, blue: 0, alpha: 1)
redView.addSubview(greenView)
rect = CGRect(x: 80, y: 80, width: 100, height: 100)
let blueView = UIView(frame: rect)
blueView.backgroundColor = UIColor(red: 0, green: 0, blue: 1, alpha: 1)
redView.addSubview(blueView)說明
redView.addSubview(greenView)將 greenView 加到 redView 上，greenView 成為 redView 的 subview。redView.addSubview(greenView) 的意思其實很好懂，可以直接把它英翻中，翻成紅色 view 加了一個 subview ，subview 的名字叫綠色 view。
redView.addSubview(blueView)我們先執行 redView.addSubview(greenView)，然後才執行 redView.addSubview(blueView)， 因此 blueView 較晚加入，它將蓋住可憐的 greenView。
若從 playground 測試，記得在最後一行輸入 redView，然後點選右邊圓形的 Quick Look 或方形的 Show Result，即可看到裝著綠色 & 藍色 view 的紅色 view。
redView
