在InterfaceBuilder中使用AutoLayout

AutoLayout在IB中的使用

iOS平臺這幾年推出了衆多新機型,iPhone4/4S、iPhone5/5C/5C、iPhone6/6S、iPhone6 Plus/6S Plus,iPad mini/iPad Air/iPad Pro,這麼多不一樣的屏幕,擁有着不一樣的分辨率,爲了適配這麼多的設備,蘋果提供了AutoLayout和SizeClasses這兩個強有力的工具。AutoLayout做爲最基礎的部分,對於一個iOS開發者是很是重要的,AutoAutoLayout又是靈活的,對於新手來講掌握是比較難的。

今天小組中一妹子就在AutoLayout上遇到了問題,正好藉此機會說一下AutoLayout在IB中的使用

基礎使用

圖片描述
如今這個界面雖然能顯示,可是在不一樣的機子上倒是一樣的座標,然而不一樣的機型有不一樣的分辨率,比例,這就是咱們用AutoLayout的緣由。
AutoLayout的整體思路就是經過對控件的約束來動態肯定控件的位置和大小。
咱們先來對TextField設置約束,選中這個TextField,IB設置約束有兩種方式,一個是用右下角的四個工具設置。另外一個和咱們關聯代碼與控件的方式相似,按住ctrl鍵,拖
,此次拖的目標不是代碼,而是其餘控件
圖片描述
這個能夠設置和其餘控件的關係,這裏咱們選擇第一個,與容器的leading空間,這樣能保證這一小塊空間不變。
圖片描述
拉完效果是這樣,爲何這條約束是紅色呢?
是由於這個控件仍處於欠約束的狀態,也就是說僅經過已有的約束不能肯定其位置,這時若是打開大綱視圖,左上角會有錯誤。
圖片描述
這是說現有的約束不能肯定在垂直方向的位置
圖片描述
圖片描述
勾選第二個
圖片描述
你會發現這個錯誤變成了警告
這是說經過視圖肯定的位置與經過約束肯定的位置不一樣
上面的是經過約束肯定的位置
如今咱們須要修正這個問題
圖片描述
第一個選項,更新框架
也就是將控件移動到經過其約束推測出的地方
第二個,更新約束,也就是將約束脩改成你的視圖中的位置
咱們選擇第二個
圖片描述
這根藍線已經移動到了咱們但願的位置
可是出現了一個新的警告
黃色虛線的位置就是根據約束,這個textField的位置
這是由於在水平方向,咱們僅設定了距左邊的距離
它根據文本框內容推測出了一個新的寬度
這是咱們不但願的
因此咱們在水平方向加一個新的約束
距右側加號Label的距離
圖片描述
第一個選項
水平距離
這個時候問題不只沒有解決,你會發現警告愈來愈多了
這是由於這個加號也沒有設置約束
它的位置是沒法經過約束推測的
這個時候不要理會那些警告
作完天然就沒了
咱們這時候給加號一個垂直方向約束
設置它與左邊的TextField center Vertically
後面幾個控件也都設置與左邊控件的距離,並保持X軸方向在一條直線上
水平方向存在一個問題
兩個文本框和中間的加號都是用之間的距離肯定的
它的寬度沒有辦法肯定
最後一個結果與右邊框作一個TraillingSpace
這是會有紅色的報錯
這時
咱們想一個辦法來處理
將兩個文本框設置爲equal width
這樣就會變成幾個警告
圖片描述
選第一個更新框架
勾選地下的勾
對全部警告都這樣處理
對於那個按鈕
咱們讓它到畫面最中間去。框架

這時,咱們發現,在橫屏時,上面的幾個控件都消失了,這是由於咱們給左邊第一個文本框設置的y軸位置不對,咱們如今在大綱視圖中刪除這條約束,增長一條距離TopGuideLine的約束
如今咱們的程序就已經能夠在不一樣的設備上完美適配了ide

相關文章
相關標籤/搜索