如何用自動(dòng)布局實(shí)現(xiàn)等寬等高等間距

1. 基礎(chǔ)篇

-目的:用自動(dòng)布局(StoryBoard中)實(shí)現(xiàn)幾個(gè)View等分屏幕
-效果圖:


Snip20151130_3.png

-實(shí)現(xiàn)方法:
a.設(shè)置第一個(gè)view的約束(既灰色view),約束為上,左,下為0,0,0
b.設(shè)置第二個(gè)view的約束(既藍(lán)色view),約束為上,左,下為0,0,0
c.設(shè)置第三個(gè)view的約束(既粉色view),約束為上,左,下為0,0,0
d.設(shè)置第四個(gè)view的約束(既橘色view),約束為上,左,下,右為0,0,0,0
e.選中四個(gè)View,設(shè)定四個(gè)View為等寬,如圖


Snip20151130_4.png

2.進(jìn)階篇

  • 目的:用自動(dòng)布局(StoryBoard中)實(shí)現(xiàn)幾個(gè)控件的等間距分割
  • 效果圖:(簡(jiǎn)版,約束版)(事例為距上方藍(lán)線的約束)


    Snip20151130_6.png
Snip20151130_5.png
  • 實(shí)現(xiàn)方法

小TIPS:這里使用自動(dòng)布局進(jìn)行等間距分割的時(shí)候,要借助輔助的view控件

a. 對(duì)微博icon設(shè)置約束,約束為,上,左,寬,高為18,50,30,30
b. 設(shè)置其他三個(gè)icon與微博icon等寬,等高,等水平
c. 設(shè)置豆瓣icon距離上,右的約束為18,50
d. 拖三個(gè)view到四個(gè)icon中間,如圖


Snip20151130_7.png

e.對(duì)三個(gè)view分別設(shè)定約束(相對(duì)于左側(cè)icon)為水平居中,等高,左右約束為0,0


Snip20151130_8.png

Snip20151130_9.png

f.最后對(duì)三個(gè)view(選中)設(shè)定等寬
g.更新約束看看效果吧

3. iOS9.0更新(StackView)

注:該方法只能適配iOS9.0系統(tǒng)

將StackView拖動(dòng)到StoryBoard中,設(shè)置好相應(yīng)的約束,這個(gè)view就相當(dāng)如一個(gè)容器,將想進(jìn)行等間距的控件放入StackView中,并設(shè)定屬性如圖


Snip20151130_10.png

效果圖:


Snip20151130_11.png
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容