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