[iOS開發]螢幕適配三:Xcode7使用Autolayout拖拽布局基礎(2)

來源:互聯網
上載者:User

[iOS開發]螢幕適配三:Xcode7使用Autolayout拖拽布局基礎(2)

參照iOS7Autolayout布局基礎二現在在Xcode7中來實現一下它的最終的。

如下:

 

建立一個Stroyboard拖出來一個Viewcontroller檔案,並建立相應的Controller管理類進行綁定:

實現步驟一:通過觀察可以發現,最終要實現的效果的介面實際上是有四個相同的view構成的。根據物件導向的思想先實現一個然後複製出來其他三個就可以了。先實現第一個view。在介面中先拖出來一個view長寬為整個控制器的一般(做個顏色標註一下突出與背景的區別)。

實現步驟二:在上面這個view上放上一個Imageview和label並設定約束。Imageview的上、左、右的約束值各為二十,label距離Imageview的距離為8,左、右的約束值為0內容置中顯示,距底部的距離為20。

ok整體的思路理清楚了以後,開始實現:

1、Imageview的上、左、右的約束值各為二十,單獨選中ImageView設定它的上、左、右的約束值

2、label距離Imageview的距離為8,左、右的約束值為0內容置中顯示,距底部的距離為20,單獨選中label設定它的左右和底部的約束:

3、label距離Imageview的距離為8,

這時候呢單個view的布局約束是完成了,但是由於這個view自身沒有約束所以現在的所有的約束條件都是紅色的,做完了總要驗證一下有沒有問題才行啊 ,所以先給整個view做個正確的約束,驗證完整了再把這些無用的約束刪除了。

選中整個父view,約束條件如下:

嘿嘿 這下沒有紅線了,只有黃線了就是沒有錯誤只有警告了,先alt+command+= update frames一下,再驗證一下看看是不是自己想要的約束。

實現步驟四:刪除無用的父view約束,將布局好的view複製粘貼出來三個,放在對應的位置(改個背景顏色避免搞錯了)。

實現步驟五:先設定四個父view將他們設定為等寬等高,view1的上、左為零,view2的上、左、右為零,view3的上、左、底為零,view4的上、左、右、底為零。

整體思路有了直接來實現就可以了。

1、四個父view等寬等高,command+d或者command+c然後command+v都可以複製出一個新的父view

每複製一個父view出來就設定一下和第一個建立出來的view的等高等寬(注意不要等把所有的父view全拖出來了再去設定等高等寬,這時候的視圖元素比較多一旦搞錯了再回來找就比較麻煩,還不如每複製一個就設定一次更省事一些)複製出來四個以後最好對不同的view設定不同的顏色方便下一步的設定。

2、view1的上、左為零,view2的上、左、右為零,view3的上、左、底為零,view4的上、左、右、底為零對對應的父view設定上下左右的約束,實現效果如下

所有的約束到此結束是不是非常簡單呢?好了填幾張圖片執行一下看看效果。

願能給有緣人答疑解惑。

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.