在這一章節(jié)中，你將會學(xué)習(xí)如何為不同尺寸設(shè)備設(shè)計界面，我們會介紹所有的蘋果設(shè)備及其尺寸。在這一章中你將學(xué)會設(shè)計的基本知識，從而可以為應(yīng)用設(shè)計界面。
Screen Sizes（屏幕尺寸）
iOS系統(tǒng)是可以運行在多種設(shè)備多種格式下運行，包括iPhone，iPod Touch，iPad和iPad Mini。表格7-1包含了所有的設(shè)備及其像素尺寸。
表7-1 設(shè)備尺寸
DeviceHeight (px)Width (px)
iPhone480320
iPhone 4 (Retina)960640
iPhone 5 (Retina)1136640
iPhone 6 (Retina)1334750
iPhone 6 Plus (Retina HD)19201080
iPad1024768
iPad w/ Retina20481536
iPad Mini1024768
iPad Mini w/ Retina20481536
Retina Displays（視網(wǎng)膜屏）
Pixels（像素）表示顯示器上可以繪制圖片的基本單位，就像是方格紙上的一個小格子。隨著設(shè)備的不斷演進，屏幕上的像素值越來越多。
Page 187
這就意味著屏幕的像素密度越來越高，每英寸可呈現(xiàn)的圖像細(xì)節(jié)增加。Pixel-per-inch（PPI）像素每英寸為單位來表示影像分辨率的大小。當(dāng)Steve Jobs發(fā)布iPhone 4時，他說人眼是無法注意到300PPI以上的區(qū)別，iPhone 4 有326PPI，接著蘋果使用Retina來表示超過300PPI的設(shè)備，二iPhone 6 Plus有104PPI，用Retina HD表示。
為了幫你管理App上Retina和Retina HD圖片，蘋果公司提供了文件命名關(guān)鍵詞方法：
Image.png
非Retina屏幕設(shè)備的標(biāo)準(zhǔn)尺寸圖片
Image@2x.png
Retina屏幕設(shè)備的2倍尺寸圖片
Image@3x.png
Retina HD屏幕設(shè)備的3倍尺寸圖片
如果你在命名圖片時，使用了@2x和@3x關(guān)鍵詞，Xcode會自動為你匹配相應(yīng)的Retina屏幕和Retina HD屏幕。
Swift需要在iOS7或者更高的系統(tǒng)下使用。iOS 7 只能在iPhone 4 以及更新設(shè)備上運行。因為除了iPhone 4，iPhone 4 以上的設(shè)備都使用了Retina屏幕，所以我們要保證適配Retina屏幕。有些iPad也在運行iOS 7，但是不是所有的運行iOS 7的iPad都有Retina屏幕，iPad Mini和iPad 2都可以運行iOS 7卻不是Retina屏幕。所以1027*768這個尺寸，只有在適配非Retina屏幕iPad時才需要考慮。
Orientation（方向）
有許多設(shè)備運行iOS，每個設(shè)備的屏幕都有四個方向，一個設(shè)備同一時間可以顯示一個方向：
Portrait垂直
這是默認(rèn)的方向，設(shè)備通過這個定位可以讓垂直方向的邊比水平方向的邊要長，Home鍵在設(shè)備的底部。
Portrait Upside Down縱向倒置
在這個定位下，設(shè)備的垂直方向邊比水平方向邊要長，Home鍵在設(shè)備的頂部。
Landscape Left左橫屏
在這個定位下，設(shè)備的水平方向的邊比垂直方向的邊要長，Home鍵在設(shè)備的左側(cè)。
Page 188 | Chapter7 : Devices and Auto Layout
Landscape Right右橫屏
在這個定位下，設(shè)備的水平方向的邊要比垂直方向的邊長，Home鍵在設(shè)備的右側(cè)。
每個應(yīng)用都要明確自己支持的方向。選定支持的方向后，應(yīng)用要調(diào)整不同方向下的布局。默認(rèn)情況下，支持Portrait,Landscape Left和Landscape Right三個方向。
Universal Apps（通用App）
App需要根據(jù)設(shè)備進行適配，蘋果提供了三種格式幫助完成適配。
第一種格式是iPhone App。iPhone App將設(shè)計運行在iPhone和iPod Touch上。然而，iPhone App也可以運行在iPad上，因為iPad比iPhone有更多的像素，所以iPad要把iPhone上的App用縮放的形式展示，就是在iPad上出現(xiàn)一個iPhone尺寸大小的窗口，然后App就在這個窗口中運行，當(dāng)然，也可以全屏展示，拉伸或者放大iPhone App，受到像素的影響，展示效果并不好。
第二個格式是iPad App。iPad App只能運行在iPad或者iPad Mini上，iPad App無法在iPhone或iPad Touch上運行，iPad App是專門針對iPad設(shè)計開發(fā)的，所以不會出現(xiàn)拉伸變形。
最后一個格式是通用型App（universal App）。universal app可以運行在任何尺寸下：iPhone，iPod Touch，iPad，iPad Mini。Universal app對iPhone和iPad各有一個具體的設(shè)計界面。為了幫助開發(fā)者讓他們的設(shè)計效果在所有尺寸下都能實現(xiàn)，蘋果提供了Auto Layout自動布局技術(shù)。
Auto Layout（自動布局）
自動布局可以給屏幕上的控件進行定位和控制尺寸大小。傳統(tǒng)的系統(tǒng)使用固定的坐標(biāo)和尺寸，但是Auto Layout使用規(guī)則（rules）來給控件定位。這些規(guī)則（rules）就叫做約束（constraints）。
約束是有關(guān)尺寸和方位的規(guī)則，例如，Label的左邊距離屏幕左邊有20pts的偏移量。這種基于約束的系統(tǒng)可以讓控件在不同尺寸不同顯示器下自我調(diào)整。
想把一個Label放在iPhone 5的右下角，過去的方式是把Label設(shè)置成：Y-offset值550，X-offset值250，width值50，height值10（見圖7-1）。
圖7-1 Traditional Label in bottom-right corner of screen in Portrait
Universal Apps | Page 189
當(dāng)需要考慮不同尺寸和不同方向下的布局時，這個方法就不行了。如果屏幕轉(zhuǎn)向橫屏，用這個方法設(shè)置的Label無法改變坐標(biāo)值，無法出現(xiàn)在屏幕中了（見圖7-2）。
圖7-2 Traditional Label after Landscape Left rotate
Page 190 | Chapter7 : Devices and Auto Layout
如果是使用Auto Layout來把Label放到右下角，Label不管是在橫屏還是豎屏都會出現(xiàn)（見圖7-3）。
圖7-3 Label in bottom right with Portrait Auto Layout
Auto Layout | Page 191
由于Auto Layout使用約束規(guī)則來約束控件，所以到設(shè)備轉(zhuǎn)向橫屏?xí)r，Label就會自動調(diào)整定位（見圖7-4）。
圖7-4 Label in bottom right with Landscape Auto Layout
Attributes（屬性）
我們可以根據(jù)大量不同的屬性來創(chuàng)建約束。例如，你把Label的右邊距設(shè)置為距離containning view邊緣30pts（見圖7-5）。containing view就是把控件封裝在一起的view（視圖）。除了可以定位到某個控件右邊，還可以定位一個控件的很多屬性。
圖7-5
Page 192 | Chapter7 : Devices and Auto Layout
left（左）、right（右）、top（上）和bottom（下）邊距是比較常見的定位屬性。例如，英語是從左向右讀寫的，然而如果你想展示的語言不是從左向右讀寫的，比如阿拉伯語，那相應(yīng)的間隔就需要翻轉(zhuǎn)過來。除了左邊距和右邊距，蘋果公司還提供了leading和trailing屬性。在從左向右讀寫的語言中，leading和trailing功能和左邊距右邊距一樣，在從右向左讀寫的語言中，左邊距右邊距的概念可以用leading和trailing屬性。
我們還可以基于width（寬）、高（height）、centerX（水平居中）和centerY（垂直居中）來創(chuàng)建約束。寬和高這兩個屬性一般是用來固定或者讓多個控件等比變化，比如你想在屏幕下方一行排列四個按鈕，當(dāng)屏幕變寬時，這四個按鈕就會等比變寬。
cuter和centerY屬性是用來定位一個控件垂直居中或者水平居中。最后baseline屬性只出現(xiàn)在有文字的控件中，指的是一行文字的底部邊界。
Values（值）
每個約束都必須設(shè)定一個值，這個值可以是具體的數(shù)值，也可以是一個范圍，也可以是Standard Value（標(biāo)準(zhǔn)值）。例如，在iPhone上，Standard Value（標(biāo)準(zhǔn)值）可能是20pts，而在iPad上，Standard Value（標(biāo)準(zhǔn)值）可能是25pts。Standard Value（標(biāo)準(zhǔn)值）是由蘋果公司規(guī)定的，會根據(jù)不同的設(shè)備和方向進行變化。約束也可以設(shè)定為一個具體的數(shù)值，例如，距離Label的leading edge30pts偏移量。Auto Layout也可以支持范圍或者不等量的值。例如，把約束設(shè)置為距離leading edge大于等于20pts，隨著視圖變化leading偏移量也會變化。最后，Standard Value（標(biāo)準(zhǔn)值）是默認(rèn)的距離。
Intrinsic Size（固定尺寸）
在某些情況下，我們很有必要允許控件能自己調(diào)整尺寸大小，例如，有一個固定寬度的Label，顯示的一段英文文字“Tap here to enter”，當(dāng)這段話翻譯成德語的“Tippen Sie hier, um geben”，會比英文更長一些，如果Label設(shè)置成固定寬度，那么德語的這段話就會被截掉一節(jié)。
為了避免這種情形發(fā)生，在Label這個控件中常常出現(xiàn)，Auto Layout有了一個Intrinsic Content Size選項，這個選項允許控件基于其內(nèi)容來自動調(diào)整大小。開啟這個功能方法：在界面上選中Label控件，點擊頂部菜單欄Editor，然后點擊Size to Fit Content。
Priority（優(yōu)先級）
在大多數(shù)情況下，一個view會有很多約束，屏幕上的控件會按照約束進行自我調(diào)整。在某些情況下，多個約束彼此矛盾，優(yōu)先級順序決定了我們先使用哪個約束。
Auto Layout | Page 193
Creating Constraints（創(chuàng)建約束）
我們是在Storyboard文件中創(chuàng)建約束。 當(dāng)我們把控件拖到界面上時，這個控件是沒有任何約束的。如果在沒有設(shè)定約束的情況下運行應(yīng)用，Xcode就會按照這個控件的絕對位置來定位這個控件，這意味著即使控件里的內(nèi)容屬性變化了，這個控件也不會移動。所以為了讓控件能夠根據(jù)情況自我調(diào)整，就需要創(chuàng)建約束。每個控件都至少有一個水平和一個垂直的約束。有很多辦法來給你的控件創(chuàng)建約束，下面我們來一一介紹。
The Control-Drag Method（Control拖動法）
創(chuàng)建約束最方便的方法就是Control拖動法，選擇一個控件，然后按住Control鍵，然后拖動鼠標(biāo)拖向另外一個控件，接著彈出一個菜單窗口（見圖7-6），根據(jù)你拖動的方向，彈出框中菜單選項內(nèi)容也會不同。
圖7-6 彈出的約束菜單選項
如果你是向右拖動，就會出現(xiàn)一個Trailing Space Constraint選項。如果你是向左拖動，就會出現(xiàn)一個Leading Space Constraint選項。不管你向左還是向右拖動，都會出現(xiàn)垂直居中對齊（Center Vertically in Container）選項。而向上拖就會出現(xiàn)Top Space Constraint選項，向下拖就會出現(xiàn)Bottom Space Constraint選項。不管你向上還是向下拖動，都會出現(xiàn)水平居中對齊選項（Center Horizontally in Container）選項。
Auto Layout Buttons（自動布局按鈕）
當(dāng)然我們也可以通過Storyboard Editor編輯器右下角的Auto Layout菜單來創(chuàng)建約束（見圖7-7）。Auto Layout菜單有四個按鈕，用來給控件增加自動布局的約束。
圖7-7 Auto Layout菜單
Page 194 | Chapter7 : Devices and Auto Layout
The Align button
從左邊起第一個按鈕就是Align按鈕，這個按鈕是可以創(chuàng)建有關(guān)對齊要求的約束，例如讓某個view居中，或者讓多個相鄰的view邊對齊。
要使用這個按鈕，首先先選定一個控件，點擊最左邊的這個Align按鈕，然后彈出Align選項窗口，顯示可能創(chuàng)建的約束（見圖7-8）。勾選某個選項后在選項后面的輸入框填寫上偏移量，這個文本框同樣也可提供一個下拉菜單，有Canvas（畫布）和Standard Value標(biāo)準(zhǔn)數(shù)值2個選項。Canvas選項會根據(jù)你目前界面上控件當(dāng)前的位置進行計算出偏移量，Standard Value是蘋果公司根據(jù)最佳實踐原則提供的尺寸，能夠根據(jù)不同的設(shè)備進行變化。點擊Add Constraints，就成功添加約束了。
圖7-8 Align選項窗口
The Pin button
第二個按鈕是Pin按鈕。Pin按鈕用來創(chuàng)建有關(guān)兩個控件的距離或者控件寬高的約束。點擊Pin按鈕彈出Pin選項窗口，Pin選項從上到下有幾個不同的部分。
所選控件距離上下左右的偏移量的約束，是由最上面的這部分部分來創(chuàng)建。
Creating Constraints | Page 195
最上面這部分的輸入框中輸入數(shù)值，上下左右四個方向，每個方向都可以創(chuàng)建約束。這個地方有個棘手的問題值得注意，就是在創(chuàng)建約束的時候，你需要勾選輸入框和小方塊之間的紅線，勾選后，紅線會變粗（見圖7-9）。勾選紅線后，彈出框最下面的文案會更新為“Add 1 Constraint”。
圖7-9 Pin選項
從上往下第二部分是用來給控件設(shè)定固定的寬高約束，使用設(shè)定固定寬、高功能時要格外小心，尤其是在Label控件上，Label固定寬有時候會讓Label的文字內(nèi)容被意外截斷。
從上往下第三部分是用來給多個控件設(shè)置等寬、等高、寬高縱橫比，寬高縱橫比約束功能是某個控件尺寸變化后，寬高比不會變化。
Align彈出框和Pin彈出框中都有Update Frames選項，點擊Update Frames選項后，根據(jù)你更新的約束條件，讓控件按照新的約束條件進行位置和尺寸的變化。你可以選擇讓所有的控件都按照新的條件進行調(diào)整，或者是僅限于讓新的約束條件所影響的控件進行調(diào)整。
Pin選項中最后一個選項是Align選項，在創(chuàng)建約束時，這個選項最有幫助我們會經(jīng)常用到。選中2個控件，Align選項會提供基于2個控件的對齊屬性。想讓一組左對齊的Label能夠平均地放在一起，就可以使用這個選項。
Page 196 | Chapter7 : Devices and Auto Layout
The Resolve Auto Layout Issues button
Auto Layout菜單從左往右第三個按鈕是Resolve Auto Layout Issues按鈕。這個按鈕用來幫助我們修復(fù)Auto Layout中出現(xiàn)的問題（issues），它會提供修改建議，重新設(shè)置約束條件。還能基于當(dāng)前界面中各個控件的當(dāng)前位置進行分析生成創(chuàng)建約束。
Issues菜單分成上下兩部分菜單（見圖7-10）。上半部分的設(shè)置只影響到你所選中的控件，下半部分的設(shè)置會影響到所有的控件。Issue菜單中最有幫助的是“Reset to Suggested Constraints”選項。這個選項能夠刪除當(dāng)前所有的約束然后基于當(dāng)前控件的位置創(chuàng)建新的約束。這個選項是一個偉大的起點，允許約束在創(chuàng)建后可以被編輯。
圖7-10 Issues menu Issues菜單
The Resizing Behavior button
最后一個按鈕是Resizing Behavior按鈕，點擊這個按鈕會彈出Resizing Behavior菜單，主要用來控制如何應(yīng)用實現(xiàn)約束條件（見圖7-11）。根據(jù)你選擇控件的數(shù)量，有些功能是不能使用的。例如，equal widths選項能夠讓多個控件具有相同的寬，如果你選中了一個控件后，這個功能就不能使用。
圖7-11 Resizing Behavior 菜單
The Guidelines Method（輔助線方法）
當(dāng)你在界面上來定位一個控件時，會出現(xiàn)垂直居中和水平居中兩條輔助線（見圖7-12）。Xcode提供的輔助線能夠為你自動生成一些約束。
圖7-12 輔助線
Creating Constraints | Page 197
有線，我們要使用輔助線來定位一個控件，接著點擊Resolve Auto Layout按鈕（長得看起來像是兩個翅膀之間有個三角），出現(xiàn)彈出框選項菜單，滑倒頂部選擇“Reset to Sugested Constraints”（見圖7-13）。這個選項會讓Xcode刪除目前的約束然后根據(jù)輔助線定義的位置自動創(chuàng)建新的約束。點開Document Outline，能看到所有的約束條件。
圖7-13 有輔助線的控件
Page 198 | Chapter7 : Devices and Auto Layout
Testing Layout Constraints（檢測Layout約束條件）
當(dāng)你使用Auto Layout來定位一個控件，約束會通過顏色來提供反饋。如果約束的顏色是橘黃色的，表示目前的約束條件還不充分，需要更多的約束才能正確的定位這個控件，如果線是紅色的，那么表示當(dāng)前的約束是錯誤的（見圖7-14）。
圖7-14 橘黃色約束
Testing Layout Constraints | Page 199
點擊Document Outline，會出現(xiàn)黃色三角圖標(biāo)或者紅色圓圈圖標(biāo)，這表示Auto Layout有了問題（Issue）。點擊圖標(biāo)會出現(xiàn)問題清單，列出問題、原因（見圖7-15）。
圖7-15 約束錯誤和約束警告
點擊issue旁邊的圖標(biāo)，會出現(xiàn)Fix-It彈出框（見圖7-16）。彈出框展示建議的解決方法，點擊Fix按鈕會自動修復(fù)問題。一定要調(diào)查一下它給的建議，有時候它的建議并不是在所有的設(shè)備上能達到你想要的效果。
圖7-16 Fix-It約束
Previewing（預(yù)覽）
在多種屏幕尺寸來測試你的界面，這點很重要。為此Xcode提供了一個Previewer（預(yù)覽窗口），展示在多個設(shè)備下具體的效果（見圖7-17）。要打開Previewer，首先要隱藏Inspector，接著點擊Assistant Editor，右邊出現(xiàn)了一個窗口，點擊這個窗口上方的Automatic按鈕，下滑出一個窗口，點擊Preview。右邊的這個窗口展示當(dāng)前界面在設(shè)備上的效果，點擊左下角的加號，可以添加更多的設(shè)備。
圖7-17 Previewer
Page 200 | Chapter7 : Devices and Auto Layout
Exercise: Building More on the Passport App
文／sing_change（簡書作者）
原文鏈接：http://www.jianshu.com/p/b4d0743aea61/comments/942980
著作權(quán)歸作者所有，轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，并標(biāo)注“簡書作者”。
