置入上下左右隱形空間的 inset

開發 iOS App 時，我們時常看到 UI 元件有個 inset 欄位，而且還分成上下左右四個方向。到底它是什麼神奇玩意呢 ? 簡單的說，inset 擁有置入隱形空間的神奇能力，它能在元件裡插入某個看不到的空間，改變內容的位置。以下我們就以 UIButton 元件為例說明吧。

在 storyboard 加入一個 button，將 Style 設為 Default，背景顏色設成黃色，以便清楚地看到 button 的長方形。

設定 button 的標題和圖片。輸入哥倆好的彼得潘和 peter 圖片。(在 Image欄位設定圖片)

button 元件同時設定標題和圖片時，預設是圖在左，字在右。接下來終於輪到 inset 表演了。且讓我們看看 inset 如何大顯神通，改變 button 的模樣。

設定 button 元件的 inset ，必須先切換到 Size Inspector 頁面。想不到小小的 button 元件，竟有多達 12 個 inset 欄位，分成 Content Insets，Title Insets 和 Image Insets 三種，每種又分成上下左右四個 inset。

我們先把焦點放在 Content Insets，將它的 Top 設成 30 試試。

很明顯的，加了Top 50 後，圖片和文字都向下移動 50 points。可以想像整個圖片和文字是 button 的內容(conent)，當內容上方加了一塊高度 50 的隱形空間後，原本的內容就只能可憐地被排擠到下方。(大家小時候應該都有被同學排擠的經驗吧，可以回想一下，更能體會 inset 的作用。)

經由控制上下左右四個方向的 inset ，我們即可隨心所欲地加上隱形空間，改變內容的位置，甚至負數的 inset 也不是問題。比方剛剛的 Top 如果改成 -50， 將產生完全相反的效果，讓圖片和文字一起往上移動 50 points。

既然有了 Content Insets，為何還需要 Title Insets 和 Image Insets 呢 ? Content Insets 一次搬動圖片和文字，如果只想要移動文字，請找 Title Inset。只想移動圖片，請找 Image Insets。

比方將 Title Insets 的 Left 設為 30，文字往右移動 30 points，圖片不動。

將 Title Insets 的 Left 設為 10，Image Insets 的 Right 設為 10，文字往右移動 10，圖片往左移動 10，因此可以維持圖文合起來置中的感覺。

調整 inset，實現圖在上，字在下的效果。