Constraint Layout & Size Class
前言
在Storyboard中設置Constraint進行畫面自動佈局，已是非常稀鬆平常的事了。
在大部分的情況下，設置單一種Constraint Layout已足夠應付自動佈局，但當畫面可以轉向（手機、平板橫放）或是裝置種類不同時（手機 vs 平板），單一種Constraint Layout可能會有跑版的問題發生。
本文將著重在手機裝置轉向的部分，如何利用Size Class來設置多種Constraint Layout。
內文
-前置範例
假設有一個商品頁面，主要呈現的內容為：分類大標、商品圖片、商品內容。
大致的排版為：固定大標高度、商品敘述站畫面比一半、商品圖片距上下視圖8pt，讓圖片自適應高度來讓畫面排版一致。
設置Constraint Layout後畫面如下圖：
接著在模擬器執行（由左而右分別為iPhone SE, iPhone 8, iPhone 11 Pro Max）：
如上圖所示，在裝置直立的狀況下，此組Constraint Layout可以讓整個畫面在不同大小的裝置上，保持相似的畫面排版。
乍看之下沒什麼問題，但假如將裝置橫放呢？
這樣的畫面約束是否還能保持良好的使用體驗與感官效果？
讓我們看看橫放手機會發生什麼事：
(由上而下分別為iPhone SE, iPhone 8, iPhone 11 Pro Max)
由上幾張圖可以看到，當畫面橫放的時候，商品的圖片變得非常的小。
因為商品敘述的視圖高度佔了畫面的一半，分類大標又是固定高，所以圖片會依照上下間距來調整本身高度，而導致圖片變小。
除了圖片變得太小影響美觀之外，商品敘述的詳細內容(TextView)也會跟著被限縮，讓顯示的範圍過窄不易查看且不利捲動，進而造成使用者體驗不佳的情況。
-Device Size Classes
在處理橫放手機的畫面問題之前，先來大致了解一下Device Size Classes。
於Apple 官方的Human Interface Guidelines中Visual Design主題下有一章節：Adaptivity and Layout。
在其中的Device Size Classes段落定義了各個行動裝置的大小分類，官網截圖如下：
由此圖中可歸類寬高搭配共有四種：
1. Regular width, Regular Height（較大的寬, 較大的高）
2. Regular width, Compact Height（較大的寬, 較小的高）
3. Compact width, Regular Height（較小的寬, 較大的高）
4. Compact width, Compact Height（較小的寬, 較小的高）
可以看到手機裝置的Size Class，在直立的情況下都是Compact width, Regular Height。
而橫放情況下，因為新機種的螢幕變大，所以除了Compact width, Compact Height 以外，還有Regular width, Compact Height的情況。
雖然橫放手機的Size Class組合並不一致，但可以發現，不論何種手機機型，橫放時的高度分類都會是：「Compact Height」。
那麼接下來就可以利用這個特性，來定義一組專門給橫放手機使用的Constraint Layout了！
- Constraint Layout with Size Class
在XCode Interface Builder中拉畫面時，可由下方的區塊查看當前裝置機型與Size Class的訊息，如下兩張圖中紅框所示：
可以看到在直立的情況下，iPhone 11 Pro Max的Size Class為(wC, hR)，橫放的情況下為(wR, hC)。
預設視圖約束條件，是支援所有Size Class的，我們可以點擊某個約束，來查看他的啟用狀態：
點擊商品圖片上方間距的約束條件後，於右方工具畫面可以看到installed是開啟的，且並沒有註明Size Class。
這樣表示這個Constraint目前是啟用狀態，且不限Size Class。
如果我們希望目前整體畫面的約束條件，只給手機直立狀態時才啟用的話，該怎麼做呢？
首先，把要設定的約束條件給全部選起來，接著在剛剛右方工具畫面installed開關的旁邊，點一下”＋”號，然後將條件設定成Width Compact, Height Regular，然後按下Add Variantion，如圖所示：
接著就可以看到原本installed開關的下方，多了一個(wC, hR)的啟用條件，接著將原本的installed開關關閉，讓這些約束條件只在(wC, hR)的狀態下才啟用。
如設定成功，將手機橫放時，左方畫面大綱中的約束條件顏色會變暗淡，表示未啟用：
左方紅框中，上方顏色較鮮豔的約束條件表示正常運作，下方顏色較暗淡的約束條件表示未啟用。
原因是右方紅框設定的啟用條件不符合當前裝置狀態。
（上面商品敘述區塊約束條件保留，是因為我想要商品敘述視圖內的排版想要保持一致）
接下來就可以針對橫放裝置去設定Constraint Layout了！
不過在此之前，還有一個小技巧可以幫助我們去做設定。
畢竟在剛剛的例子中，如果每次設定都要先拉好、再選取、再設定條件，將會是很麻煩的一件事。
首先，在下方畫面的最右邊，有一個「Vary for Traits」的按鈕，點擊之後會有Width, Height 兩個選項，在這裡我們選擇Height，如圖所示：
選擇之後，左方會出現許多橫擺的手機裝置，這些裝置是表示符合當前Size Class條件的裝置。
因為目前我們將手機橫擺(wR, hC)且勾選了Height，所以表示我們篩選的條件為：「Size Class符合hC的裝置」。
接下來我們所做的畫面設定，就會是針對這些符合條件的裝置狀態去做設定，就不用像之前一樣，拉完畫面約束之後，再一個一個選起來設定條件了！
如下圖，設定Constraint之後，會自動啟用符合條件：
不過要注意的一點是，當畫面設定完成後，要記得點擊「Done Varing」，來關閉所設置的條件。
避免下次再拉畫面的時候使用到錯誤的啟用條件。
設置完手機橫放的Constraint Layout後，來看看在XCode Interface Builder中的畫面：
如上圖，我們將大標、商品圖片放在畫面的左半側，商品敘述放在畫面的右半側。
如此一來，商品的圖片不但變得比較清楚，商品詳細敘述的查看及捲動範圍也變得比較大了！
最後在模擬器上執行，看看成果如何：
(由上而下分別為iPhone SE, iPhone 8, iPhone 11 Pro Max)
結語
畫面的視覺效果，總是使用者在接觸App時的第一印象，如果畫面發生跑板或不易使用的情況，往往會降低使用者的使用意願。
為了避免這樣的情況，針對不同裝置大小、狀態去做自適應排版是必須的。
若畫面是比較整體、一致性的，利用Size Class以及Constraint Layout的搭配，可以有效達到多裝置、多狀態的自適應效果！
參考連結＆附註
參考資料：
https://medium.com/zendesk-engineering/ios-how-to-add-adaptive-constraints-to-support-a-universal-app-273663475b12
https://mobikul.com/use-size-classes-vary-traits/
https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/adaptivity-and-layout/
封面圖＆Size Class圖片來源：
範例專案商品圖片＆商品資料來源：
心型Icon來源：
https://www.flaticon.com/free-icon/like_148836?term=like&page=1&position=2
