AutoLayout Programmatically表示

一直很想寫清楚的一個單元，layout的各種寫法。

storyboard一直是最快設計方法，也是易讀性很高的表示，但總是會遇上一些問題storyboard沒辦法解決。

1. 事件觸發出現什麼？移除什麼？
2. 事件觸發元件移動。
3. 想要共用畫面，某些畫面才需要某元件。

。AutoResize:

只要由程式產生的元件，皆需把該元件AutoResize 關閉，否則會造成衝突

補充：如果storyboard上的元件需取消重新配置autoLayout，也需要關掉此屬性哦～

view.translatesAutoresizingMaskIntoConstraints = false

。設計公式：

「 a的屬性 = b的屬性 * 倍數 +常數 」

(FirstItem) Relation (SecondItem＊ Multiplier) ＋Constant

ex. SafeArea.Trailing = Label.Trailing * 1 + 50

。NSLayoutConstraint：

拉 layout 對齊某一邊 leading、trailing、top、bottom

拉 x、y置中位置

設定width、height值

單筆生效: isActive = true

多筆生效: 放入陣列中

。Anchor：

拉 layout 對齊某一邊 leading、trailing、top、bottom

拉 x、y置中位置

設定width、height值

生效方式都是以isActive = true處理

。Visual Format Language :

可視化格式語言表示法(VFL)

。象形文字解說：
「 H: 」表示水平
「 V: 」表示垂直
「 | 」 符號表示描述view之superview邊界
|- [label]  槓槓-表示距離為 8 (default)
|-(0)-[label]  表示距離為 0
H:|-[label(20)]-(0)-[button]-| 兩元件間無距離仍須寫出，非[label][button]
H:|-[label(20)]-| 需有頭有尾，需給元件尺寸，水平即寬，不給則是自動長
H:|-[label(==button)]-| 支援==、>=、<= 符號，表示與某元件等寬

。詳細可至官方文件查閱：https://developer.apple.com/library/archive/documentation/UserExperience/Conceptual/AutolayoutPG/VisualFormatLanguage.html

最重要還是需要讓程式識別你的元件是誰，故需要宣告一組key：value丟入

let views = [“label”: titleLabel, “button”: myButton]

把字串及key：value丟入views欄位中

let buttonHorizontalConstraints = 
NSLayoutConstraint.constraints
(withVisualFormat: “H:|-20-[label(44)]-0-[button]-20-|”,
 options: [], 
 metrics: nil, 
 views: views)

再執行生效

self.view.addConstraints(buttonHorizontalConstraints)

不足的地方再以NSLayoutConstraint去設定！

。調整NSLayoutConstraint：

let widthConstrain = imageView.widthAnchor.constraint(equalToConstant: 17)
widthConstrain.constant = 20

。取消NSLayoutConstraint：

若需要取消，則是把整條NSLayoutConstraint拿出來 false後，才能添加新的Constraint，否則會有衝突的。

imageView.widthAnchor.constraint(equalToConstant: 17).isActive = false

以上是 AutoLayout programmatically，寫久了就會覺得其實不難，

難的是怎麼找到缺少的layout or 過多的layout問題ＸＤ

畢竟它不會有紅線出現提示你，只會在下面debug模式一次吐給你。

而且storyboard沒有紅線也不代表沒有問題，頂多告訴你可以順利compile，還是可能隱含錯誤呢。

可以幫我點個讚，或是分享一杯咖啡支持我。