不捲動畫面 X軸 / Y 軸 auto layout 條件全部設定的問題
設定 auto layout 時，我們最常設定的條件莫過於元件間的間距。不過若是完全照抄設計圖設定每一個間距和大小，有時反而會發生問題。
若能在設定條件前先思考以下兩個問題，往往能避免常見的 auto layout 問題。
- 畫面是否可捲動。
- 畫面在不同尺寸裝置時的模樣。
當畫面不能在某一軸捲動時，請記得別將那一軸的條件全部設定。以下我們用 Kellinton 大大在 Figma 網站上的 Ice Cream App 畫面為例說明。
如下圖所示，畫面不能上下捲動，尺寸是 375 * 812。
我們先按住 option 鍵，從 Figma 網站查看 Y 軸上元件間的間距。
圖片跟畫面的上邊界相距 176。
圖片跟按鈕相距 93。
按鈕和畫面的底部相距 137。
圖片的高度是 350。
按鈕的高度是 56。
將 storyboard 的裝置機型設為跟設計圖尺寸 375 * 812 一樣的 iPhone 13 mini，然後加入相關的 auto layout 條件。下圖紅色框框的 5 個條件對應到剛剛我們在 Figma 設計圖看到的 Y 軸條件。
剛剛的畫面看起來一切正常，然後一旦改變裝置尺寸，比方改成 iPhone 15 Pro Max，條件馬上變成有問題的紅色。
錯誤提到 Conflicting Constraints，下方顯示的正是 Y 軸的 5 個條件。這 5 個條件加起來必須等於 iPhone 的高度，137 + 93 + 350 + 56 + 176 等於 iPhone 13 mini 的 812，因此在 13 mini 是正常的。但換成 15 Pro Max 後，iPhone 的高度是 932，數字對不起來，因此產生紅色錯誤。
此問題主要是因為我們將 Y 軸的條件全部設定，只要移除 Y 軸上的一個條件，即可解決問題。
- 解法 1: 移除按鈕跟畫面底部的間距 137。
按鈕跟畫面底部的間距依據 iPhone 尺寸動態調整，當 iPhone 高度愈大時，間距也會愈大。
- 方法 2: 移除按鈕的高度條件。
按鈕的高度依據 iPhone 尺寸動態調整，當 iPhone 高度愈大時， 按鈕的高度也會愈大。
