翻譯@Auto Layout Guide(自動(dòng)布局指南)
- 原文:Auto Layout Guide
- 作者:Apple
- 更新:Yannmm@Github.com
Getting Started(新手上路)
Auto Layout Without Constraints(無約束的自動(dòng)布局)
(譯者:這里"無約束"指的是不需手動(dòng)定義約束 ??)
借助堆疊視圖(Stack View),無需手動(dòng)定義約束,我們也能感受自動(dòng)布局的強(qiáng)大。堆疊視圖適用于盛裝行列排布的界面元素,其有若干屬性可供設(shè)置。
- axis:(僅適用于UIStackView)定義內(nèi)容的排布方向,水平或垂直。
- orientation:(僅適用于NSStackView)定義內(nèi)容的排布方向,水平或垂直。
- distribution:定義既定方向上內(nèi)容的分布方式。
- alignment:定義與既定方向垂直的方向上內(nèi)容的對(duì)齊方式。
- spacing:定義兩個(gè)相鄰內(nèi)容之間的間距。
堆疊視圖的使用方法很簡(jiǎn)單:在界面編輯器(Interface Builder)中拖拽一個(gè)水平或垂直排布的堆疊視圖到畫布上,并放入內(nèi)容。
如果一個(gè)內(nèi)容有固有尺寸(intrinsic content size),在堆疊視圖中它會(huì)保持這個(gè)尺寸;如果沒有,界面編輯器會(huì)為其提供一個(gè)默認(rèn)尺寸。縮放后者,界面編輯器會(huì)自動(dòng)為其添加尺寸約束。
通過屬性(Attributes)面板,修改堆疊視圖的屬性,微調(diào)布局。例如,下例中,間距為8pt,分布方式為均勻填充。
堆疊視圖在布局內(nèi)容時(shí),還會(huì)考慮內(nèi)容視圖的內(nèi)縮(content-hugging)和外擴(kuò)(compression-resistance)優(yōu)先級(jí),在尺寸(Size)面板中進(jìn)行修改它們。
注意
為內(nèi)容視圖添加約束,可以進(jìn)一步調(diào)整布局;然而,要注意避免沖突:一般來說,在某個(gè)方向上,如果視圖的尺寸等同于固有尺寸,就可以添加約束。更多約束沖突的相關(guān)信息,詳見Unsatisfiable Layouts(無法滿足的約束)。
此外,堆疊視圖中還可以互相嵌套,構(gòu)建更為復(fù)雜的布局。
總而言之,如果可能,盡量使用堆疊視圖進(jìn)行布局。如若不能,再手動(dòng)創(chuàng)建約束。
更多堆疊視圖的相關(guān)信息,詳見UIStackView Class Reference或NSStack View Class Reference。
注意
雖然巧妙使用堆疊視圖可以創(chuàng)建復(fù)雜界面,但仍無法完全回避手動(dòng)創(chuàng)建約束。至少,我們需要通過約束定義堆疊視圖本身的位置。