自動(dòng)布局會(huì)根據(jù)在你的視圖(view)層級(jí)中所有視圖的約束(constraints),動(dòng)態(tài)的計(jì)算視圖的尺寸與位置.例如,你可以為一個(gè)按鈕(button)設(shè)置約束,使其相對(duì)于一個(gè)圖片視圖(Image view)水平居中,然后,此按鈕的上部邊緣一直與圖片的下部邊緣保持8點(diǎn)(points)的距離.如果圖片視圖的尺寸或位置改變了,按鈕的位置會(huì)相對(duì)自動(dòng)調(diào)整.
此種基于約束(constraint-based)的設(shè)計(jì)方法允許你創(chuàng)建一個(gè)可以同時(shí)響應(yīng)內(nèi)部與外部變化用戶界面.
1.外部改變
外部改變發(fā)生于你的上級(jí)視圖的尺寸與形狀發(fā)生改變的時(shí)候.每次改變發(fā)生的時(shí)候,你必須更新你的視圖層級(jí)來(lái)充分使用可用的空間.以下為通常會(huì)引起外部改變的因素:
· 用戶改變窗口尺寸(OS X).
· 用戶進(jìn)入或退出iPad上的分屏視圖(Split View)(iOS).
· 設(shè)備旋轉(zhuǎn)(iOS).
· 通話條和錄音條的出現(xiàn)消失(iOS).
· 你想要支持不同的尺寸類(size classes).
· 你想要支持不同的屏幕尺寸.
這些改變大部分是在運(yùn)行(runtime)的時(shí)候發(fā)生的,并且需要來(lái)自你的應(yīng)用(app)的動(dòng)態(tài)響應(yīng).其他的改變,例如支持不同的屏幕尺寸,相當(dāng)于應(yīng)用適應(yīng)不同的環(huán)境.即使應(yīng)用在運(yùn)行的時(shí)候一直不會(huì)改變屏幕尺寸,也要?jiǎng)?chuàng)建一個(gè)可以讓你的應(yīng)用可以同時(shí)運(yùn)行在iPhone 4S,iPhone6 Plus,或者甚至iPad上的界面.自動(dòng)布局同樣是一個(gè)為iPad的Slide over與分屏視圖提供支持的關(guān)鍵組件.
2.內(nèi)部改變
內(nèi)部改變發(fā)生于用戶界面中的視圖尺寸或控制發(fā)生改變的時(shí)候.
以下為通常會(huì)引起內(nèi)部改變的因素:
· 應(yīng)用的內(nèi)容改變.
· 應(yīng)用支持國(guó)際化(internationalization).
· 應(yīng)用支持動(dòng)態(tài)類型(iOS)
當(dāng)你的應(yīng)用的內(nèi)容改變的時(shí)候,新內(nèi)容相對(duì)于舊的會(huì)需要一個(gè)不同的布局.這種情況發(fā)生于應(yīng)用需要展示文本(text)或圖片的時(shí)候.例如,一個(gè)新聞?lì)悜?yīng)用需要根據(jù)單獨(dú)的新聞文章的尺寸調(diào)整其布局.類似的,一個(gè)圖片拼貼應(yīng)用必須要處理圖片尺寸與比例.
國(guó)際化是使你的應(yīng)用可以適應(yīng)不同語(yǔ)言地區(qū)與文化的過(guò)程.一個(gè)國(guó)際化的應(yīng)用必須考慮到這些差異,并且正確展示其所支持的語(yǔ)言與地區(qū).
國(guó)際化對(duì)于布局主要有三種影響.第一,當(dāng)你將你的用戶界面翻譯成不同的語(yǔ)言時(shí),標(biāo)簽(labels)需要不同大小的空間.例如,德語(yǔ)通常需要比英語(yǔ)更多的空間,日語(yǔ)通常需要更少.
第二,即使語(yǔ)言沒(méi)有改變,不同地區(qū)用于展示日期與數(shù)字的格式不同.盡管這些改變通常比不同語(yǔ)言的改變更小,但是用戶界面依然需要適用于這些在尺寸上輕微變化.
第三,改變語(yǔ)言不僅會(huì)影響文本的尺寸,也會(huì)影響布局的組織.不同的語(yǔ)言會(huì)使用不同的布局方向.例如,英語(yǔ)采用從左到右的布局方向,而阿拉伯語(yǔ)和希伯來(lái)語(yǔ)采用從右到左的布局方向.通常情況下,用戶界面的元素順序應(yīng)該符合布局方向.如果在英文環(huán)境下一個(gè)按鈕在視圖的右下角,那么在阿拉伯環(huán)境下應(yīng)該在左下角.
最后,如果你的iOS與應(yīng)用支持動(dòng)態(tài)類型,用戶可以改變你應(yīng)用中字體大小.這種操作會(huì)同時(shí)改變用戶界面文字類元素(elements)的高度和寬度.如果在你的應(yīng)用運(yùn)行期間改變了字體大小,字體與布局要同時(shí)進(jìn)行調(diào)整以適應(yīng)這種改變.
3.自動(dòng)布局vs.基于邊界(Frame-Based)的布局
用戶界面的主要布局方式有三種.你可以通過(guò)程序(programmatically)布局用戶界面,你可以使用自動(dòng)尺寸罩(autoresizing masks)自動(dòng)響應(yīng)外部改變,或者你可以使用自動(dòng)布局.
傳統(tǒng)上,應(yīng)用會(huì)以程序的方式設(shè)定在視圖層級(jí)中的每個(gè)視圖的邊框,然后展示出其用戶界面.邊界在上級(jí)視圖的坐標(biāo)系中定義視圖的原點(diǎn)高度,寬度.
為了展示出用戶界面,你必須為你視圖層級(jí)中的每個(gè)視圖計(jì)算出尺寸與位置.然后,如果改變發(fā)生,你必須要為所有受影響的視圖重新計(jì)算邊界.
在很多情況下,程序定義試圖邊界很強(qiáng)大很靈活.當(dāng)改變發(fā)生,你可以做出任何改變.然而,因?yàn)槟惚仨氉约汗芾硭械母淖?布局一個(gè)簡(jiǎn)單的用戶界面需要大量的工作去設(shè)計(jì),debug,維護(hù).創(chuàng)建一個(gè)使用的用戶界面的難度,會(huì)以指數(shù)級(jí)的方式增加.
你可以使用自動(dòng)尺寸罩幫助減輕一些工作量.一個(gè)自動(dòng)尺寸罩定義了當(dāng)上級(jí)視圖改變時(shí)一個(gè)視圖的邊界如何改變.這種方法簡(jiǎn)化了創(chuàng)建需要適應(yīng)外部變化的布局.
然而,自動(dòng)尺寸罩能夠支持的布局較少.對(duì)于復(fù)雜的用戶界面,你通常需要用你的程序上的改變?cè)黾幼詣?dòng)尺寸罩.此外自動(dòng)尺寸罩只適用于外部改變.他們不支持內(nèi)部改變.
盡管自動(dòng)尺寸罩僅僅是一種程序布局上的迭代提升(iterative improvement),自動(dòng)布局代表了一種全新的范式.你需要考慮視圖的關(guān)系,而不是邊界.
自動(dòng)布局使用一系列約束定義你的用戶界面.約束通常代表了兩個(gè)視圖之間的關(guān)系.然后自動(dòng)布局基于這些約束計(jì)算每個(gè)視圖的尺寸與位置.然后使得布局自動(dòng)響應(yīng)內(nèi)外部的改變.
設(shè)計(jì)一系列約束來(lái)創(chuàng)建具體行為的邏輯,與程序化的或面向?qū)ο蟮拇a邏輯非常不同.幸運(yùn)的是,應(yīng)用自動(dòng)布局,與應(yīng)用任何其他編程任務(wù)沒(méi)有不同.有兩個(gè)基本的步驟:第一理解在基于約束的布局的背后的邏輯,然后你需要學(xué)習(xí)API.在你學(xué)習(xí)其他程序任務(wù)時(shí),已經(jīng)成功實(shí)現(xiàn)了這些步驟.自動(dòng)布局也不例外.
本指導(dǎo)的余下部分可以讓你易于掌握自動(dòng)布局."無(wú)約束自動(dòng)布局"一章描述的是一種高度抽象的方法用于簡(jiǎn)化創(chuàng)建自動(dòng)布局支持的用戶界面."約束解剖"一章為理解與應(yīng)用自動(dòng)布局提供了背景理論."在用戶界面中使用約束"一章描述了設(shè)計(jì)自動(dòng)布局的工具,"程序創(chuàng)建約束"和"自動(dòng)布局菜譜"描述了API的細(xì)節(jié).最后,"自動(dòng)布局菜單"展示了很多不同復(fù)雜度的自動(dòng)布局的事例.你可以學(xué)習(xí),并且應(yīng)用在自己的項(xiàng)目中,"Debugging自動(dòng)布局"為修復(fù)出現(xiàn)的問(wèn)題提供建議.
