3、UI開發之核心基礎——約束（入門）

先學個新技能：添加圖片控件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開發者們不可多得的利器。

既然是利器，天然有必要多花些時間琢磨其利性，不然極可能未傷妖魔，反得自傷。

下面兩節咱們將深刻探討「約束」。

 

 

上一節           回目錄          下一節