iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 17
0


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


上一篇
淺談AVAudioSession
下一篇
iOS App 實作(14) CAShapeLayer 試玩
系列文
30天Swift入門學習30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言