Description:
開始認真練習 Swift 後沒多久就放棄 xcode 內的 storyboard 來開發,這意味著在調整畫面上也不能透過視覺話介面來進行調整,必須自己 po 相關的 constraint code。
(圖:storyboard 內設定 constraint 的地方)
接下來就來介紹如何透過 source code 來設定每個 UIView object 的 contstraint。
在所有有繼承自 UIView 的 object 中都會有一個名為 “translatesAutoresizingMaskIntoConstraints”
的 property,這 property 的用途是告訴 iOS 自動建立放置位置的約束條件,而第一步是須明確告訴它不要這樣做,因此需設為false。
let pressBotton: UIButton = {
let botton = UIButton()
botton.translatesAutoresizingMaskIntoConstraints = false
}()
第二步是透過 NSLayoutConstraint 格式來設定特定的 object 四周位置,每個物件四周的名稱如下圖:
NSLayoutConstraint 格式寫法如下:
let newBtnCons: [NSLayoutConstraint] = [btnHeight, btnWidth, xPlacement, yPlacement]
第三步是啟動及關閉 contstraint 的方法:
NSLayoutConstraint.deactivate(SomeUIObject)
NSLayoutConstraint.activate(SomeUIObject)
Highlight function:
此demo是按下畫面中的 press 按鈕後原本滿版的背景顏色會被限制在 press 按鈕四周,剩餘部分則顯示白色。
首先先設定開啟 app 後的初始畫面:
let topConstraint = pressBotton.topAnchor.constraint(equalTo: self.view.topAnchor)
let bottomConstraint = pressBotton.bottomAnchor.constraint(equalTo: self.view.bottomAnchor)
let leftConstraint = pressBotton.leadingAnchor.constraint(equalTo: self.view.leadingAnchor)
let rightConstraint = pressBotton.trailingAnchor.constraint(equalTo: self.view.trailingAnchor)
buttonCons = [topConstraint, bottomConstraint, leftConstraint, rightConstraint]
NSLayoutConstraint.activate(buttonCons)
接下來設定按下 press 按鈕後的畫面,先 deactivate 預設的 Constraint 後在activate欲改變的 constraint
NSLayoutConstraint.deactivate(buttonCons)
//Define new constraint
let btnHeight = pressBotton.heightAnchor.constraint(equalToConstant: 200)
let btnWidth = pressBotton.widthAnchor.constraint(equalToConstant: 200)
let xPlacement = pressBotton.centerXAnchor.constraint(equalTo: self.view.centerXAnchor)
let yPlacement = pressBotton.centerYAnchor.constraint(equalTo: self.view.centerYAnchor)
let newBtnCons: [NSLayoutConstraint] = [btnHeight, btnWidth, xPlacement, yPlacement]
NSLayoutConstraint.activate(newBtnCons)
Reference
Auto Layout Guide
Source code on Github