How I AutoLayout Programmatically
Ways to set AutoLayout
設定 AutoLayout 兩種方式：Storyboard／Programmatically
起初在學習 AutoLayout 時，使用 Storyboard 設定條件，易讀性高。當輸入過多或缺少的條件時還會出現紅/黃線警示你，但沒出現紅線也不表示設定的條件沒有問題，還是有機會出現隱藏錯誤。
理解 AutoLayout 原理後，開始嘗試著以程式做 AutoLayout，兩種方式差別只在於一種是用 storyboard 拉條件，一種是寫出設定條件。這篇文章則是記錄我如何以程式做 AutoLayout ，如還不熟 AutoLayout 拉條件原理，建議可以多在 storyboard 上操作練習。
How I do AutoLayout Programmatically
以此為例：設定 UIImageView 畫面顯示與螢幕同大小。
1. AutoResize:
以程式寫出元件條件時，須將該元件的 AutoResize 關閉，否則將會造成衝突。
imageView.translatesAutoresizingMaskIntoConstraints = false2. NSLayoutConstraint:
設定元件條件。
我會將要設定的元件寫在 function 裡面，要修改條件時也方便找尋。
條件設定：
・對齊一邊 leading, trailing, top, bottom
imageView.trailingAnchor.constraint(equalTo: view.trailingAnchor)・水平垂直位置 centerX, centerY
imageView.centerYAnchor.constraint(equalTo: view.centerYAnchor)・設定寬高 width, height
//直接輸入值
imageView.heightAnchor.constraint(equalToConstant: 30)//或是與同值
imageView.heightAnchor.constraint(equalTo: view.widthAnchor)//也可以
imageView.heightAnchor.constraint(equalTo: view.widthAnchor, multiplier: 16/9)
實作 AutoLayout 常遇到的問題
不論是在 storyboard 上或是 programmatically 設定 AutoLayout，時常會遇到下方印出一串表示設定的條件遇到衝突等等的字串，要你自己去檢查，有時可以正常跑起來，有時又跑版… (汗)
- 程式設定條件時，首先檢查是否將 AutoResizing 關閉。
- 是否重複設定了條件。
如下圖，可以發現我們設定上下左右對齊畫面上下左右，但在最後一行又設定了圖片的高等於圖片的寬，因此將會造成衝突。
3. 看懂印出的衝突在說什麼。
「 H: 」表示水平
「 V: 」表示垂直
「 | 」 符號表示描述view之superview邊界
|- [label] 槓槓-表示距離為 8 (default)
|-(0)-[label] 表示距離為 0
H:|-[label(20)]-(0)-[button]-| 兩元件間無距離仍須寫出，非[label][button]
H:|-[label(20)]-| 需有頭有尾，需給元件尺寸，水平即寬，不給則是自動長
H:|-[label(==button)]-| 支援==、>=、<= 符號，表示與某元件等寬
AutoLayout: CollectionView & TableView
最後，為何會特別提出 Table View 和 Collection View 呢？這可是我真真實實踩過的坑啊🥲 寫這篇就是怕自己如果忘記了可以回來看的小寶典呀！基本上 AutoLayout 方式不變，但就是要加上一些條件，否則將又會印出一堆文字。
🌟 Collection View 要設定 UICollectionViewFlowLayout
設定大小 itemSize ，預估大小為零 estimatedItemSize = .zero ， 間距 sectionInset參考彼得潘的這篇文章：「利用 flow layout 的 collection view 製作照片牆」
🌟 Table View 要設定 row 高
可以參考彼得潘的這篇文章：「 如何讓 table view cell 固定高度 」。
