先學個新技能：添加圖片控件Image View
iOS的圖片控件是ImageView，ImageView通過提前載入用戶指定的圖片資源來顯示相應的圖片。
所以圖片控件的關鍵信息有3個：
1. ImageView
2. 圖片資源
3. ImageView加載圖片資源。
1. 添加ImageView
選中Main.storyboard，然后左鍵長按將ImageView拖入storyboard。
為了方便接下來說明問題，我們調整ImageView的大小使其緊靠屏幕左上右3邊。
2.添加圖片資源
選中Asserts.xcassets，然后點擊“+”和“New Image Set”
這時我們可以看到多出1個“Image”，選中后單擊可以重命名，我們不妨將其改為“firstimage”
將我們提前准備好的圖片拖入“2x”的框框中
3. ImageView加載圖片資源
在storyboard中選中Image View，然后點擊漏斗形狀的“控件屬性”，在Image的下拉框中選中我們剛剛添加的“firstimage”
圖片控件已經准備完畢，接下來我們來看看成果吧。
在屏幕的最上方，選擇一個和我們的storyboard一樣型號的模擬器（此處為iPhone 8），然后點擊左上角的播放按鈕運行。
一個例子道問題
如果我們將上面的程序分別在iPhone5和iPhone8 Plus模擬器上運行，是不是會產生一樣的結果嗎？
答案是否定的，3個不同設備的運行效果如下：
同樣一份代碼分別運行在iphone5，iphone8和iphone8 plus上，我們看到了3種不同的結果，顯然這不是我們想要的。
於是我們不禁要問這樣2個問題：
1. 究竟是為什么會出現這樣不一致的結果呢？
2. 我們要怎么做才能在不同的設備上適配，以達到我們想要的同樣的效果呢？
解惑
如下圖所示，我以iphone8為我的storyboard編輯設備，然后拖拽了1個ImageView上去，使其左右兩邊對齊屏幕邊框。
人眼所及，圖片的位置和大小一目了然，但是機器是怎么存儲這個信息的呢？當我們將ImageView拖拽上去的時候，機器會記錄2個數據：
一是該圖片左上角的坐標，二是該圖片所對應的長和寬，當程序運行時，圖片就會根據這2項數據繪制圖片。
程序運行在iphone8上自然沒有問題，那如果運行在iPhone5，iPhone8plus等等呢？
iPhone5屏幕太窄，不足以顯示整個圖片，而iPhone8plus又太寬，會產生多余的留白。
傳道
到此，我們不禁要想：“如果iOS能自動幫我們拉伸圖片就好了。”
iOS確實會自動適應圖片大小，但是得由我們來告訴它：
A. 圖片上邊框緊靠屏幕上邊框；
B. 圖片左邊框緊靠屏幕左邊框；
C. 圖片右邊框緊靠屏幕右邊框；
“這樣應該可以了吧”
還不行哦，當我們自己設定圖片的擺置時，iOS就不會為我們做任何默認的設置，也沒有前面所說的“記錄圖片左上角坐標和其長寬”。以上3點不足以確定圖片的高度，所以我們還要再加一條。
D. 圖片高300個像素；
如此設定圖片，則不管在哪款iphone上都可以正常顯示我們的圖片的了。
在storyboard中選中圖片，然后按下圖所示設定左上右的邊框間隔為0（注意最上面的紅框中的小紅線必須為實線），高度為300像素。
好了，現在無論在哪一款iPhone上，圖片都不會有截斷或過多留白了。
約束
確定UI元素的位置和大小的方式就是我所要說的“約束”，也就是iOS UI開發的核心。無論是系統默認的“起始點+長寬”還是我們自定義的“圖片間隔+高度”都是“約束”。
Xcode提供了多種約束操作供開發者選擇，合理運用這些約束，既可以加快UI開發又可以提高UI的靈活性，絕對是iOS開發者們不可多得的利器。
既然是利器，自然有必要多花些時間琢磨其利性，否則很可能未傷妖魔，反得自傷。
下面兩節我們將深入探討“約束”。