在這一章節(jié)中，你將會學習如何為不同尺寸設備設計界面尤蒿，我們會介紹所有的蘋果設備及其尺寸。在這一章中你將學會設計的基本知識诵盼，從而可以為應用設計界面土涝。
Screen Sizes（屏幕尺寸）
iOS系統(tǒng)是可以運行在多種設備多種格式下運行验庙，包括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
這就意味著屏幕的像素密度越來越高胸蛛，每英寸可呈現(xiàn)的圖像細節(jié)增加污茵。Pixel-per-inch（PPI）像素每英寸為單位來表示影像分辨率的大小。當Steve Jobs發(fā)布iPhone 4時葬项，他說人眼是無法注意到300PPI以上的區(qū)別泞当，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或者更高的系統(tǒng)下使用嗜历。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需要根據(jù)設備進行適配掖蛤，蘋果提供了三種格式幫助完成適配杀捻。
第一種格式是iPhone App。iPhone App將設計運行在iPhone和iPod Touch上蚓庭。然而致讥，iPhone App也可以運行在iPad上，因為iPad比iPhone有更多的像素彪置，所以iPad要把iPhone上的App用縮放的形式展示拄踪，就是在iPad上出現(xiàn)一個iPhone尺寸大小的窗口，然后App就在這個窗口中運行拳魁，當然惶桐，也可以全屏展示，拉伸或者放大iPhone App，受到像素的影響姚糊，展示效果并不好贿衍。
第二個格式是iPad App。iPad App只能運行在iPad或者iPad Mini上救恨，iPad App無法在iPhone或iPad Touch上運行贸辈，iPad App是專門針對iPad設計開發(fā)的，所以不會出現(xiàn)拉伸變形肠槽。
最后一個格式是通用型App（universal App）擎淤。universal app可以運行在任何尺寸下：iPhone，iPod Touch秸仙，iPad嘴拢，iPad Mini。Universal app對iPhone和iPad各有一個具體的設計界面寂纪。為了幫助開發(fā)者讓他們的設計效果在所有尺寸下都能實現(xiàn)席吴，蘋果提供了Auto Layout自動布局技術。
Auto Layout（自動布局）
自動布局可以給屏幕上的控件進行定位和控制尺寸大小捞蛋。傳統(tǒng)的系統(tǒng)使用固定的坐標和尺寸孝冒，但是Auto Layout使用規(guī)則（rules）來給控件定位。這些規(guī)則（rules）就叫做約束（constraints）拟杉。
約束是有關尺寸和方位的規(guī)則庄涡，例如，Label的左邊距離屏幕左邊有20pts的偏移量搬设。這種基于約束的系統(tǒng)可以讓控件在不同尺寸不同顯示器下自我調整啼染。
想把一個Label放在iPhone 5的右下角，過去的方式是把Label設置成：Y-offset值550焕梅，X-offset值250迹鹅，width值50，height值10（見圖7-1）贞言。
Universal Apps | Page 189
當需要考慮不同尺寸和不同方向下的布局時斜棚，這個方法就不行了。如果屏幕轉向橫屏该窗，用這個方法設置的Label無法改變坐標值弟蚀，無法出現(xiàn)在屏幕中了（見圖7-2）。
Page 190 | Chapter7 : Devices and Auto Layout
如果是使用Auto Layout來把Label放到右下角酗失，Label不管是在橫屏還是豎屏都會出現(xiàn)（見圖7-3）义钉。
Auto Layout | Page 191
由于Auto Layout使用約束規(guī)則來約束控件，所以到設備轉向橫屏時规肴，Label就會自動調整定位（見圖7-4）捶闸。
Attributes（屬性）
我們可以根據(jù)大量不同的屬性來創(chuàng)建約束夜畴。例如，你把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（垂直居中）來創(chuàng)建約束痒玩。寬和高這兩個屬性一般是用來固定或者讓多個控件等比變化淳附，比如你想在屏幕下方一行排列四個按鈕，當屏幕變寬時蠢古，這四個按鈕就會等比變寬奴曙。
cuter和centerY屬性是用來定位一個控件垂直居中或者水平居中。最后baseline屬性只出現(xiàn)在有文字的控件中草讶，指的是一行文字的底部邊界洽糟。
Values（值）
每個約束都必須設定一個值，這個值可以是具體的數(shù)值堕战，也可以是一個范圍坤溃，也可以是Standard Value（標準值）。例如嘱丢，在iPhone上薪介，Standard Value（標準值）可能是20pts，而在iPad上越驻，Standard Value（標準值）可能是25pts汁政。Standard Value（標準值）是由蘋果公司規(guī)定的道偷，會根據(jù)不同的設備和方向進行變化。約束也可以設定為一個具體的數(shù)值烂完，例如试疙，距離Label的leading edge30pts偏移量。Auto Layout也可以支持范圍或者不等量的值抠蚣。例如祝旷，把約束設置為距離leading edge大于等于20pts，隨著視圖變化leading偏移量也會變化嘶窄。最后怀跛，Standard Value（標準值）是默認的距離。
Intrinsic Size（固定尺寸）
在某些情況下柄冲，我們很有必要允許控件能自己調整尺寸大小吻谋，例如，有一個固定寬度的Label现横，顯示的一段英文文字“Tap here to enter”漓拾，當這段話翻譯成德語的“Tippen Sie hier, um geben”，會比英文更長一些戒祠，如果Label設置成固定寬度骇两，那么德語的這段話就會被截掉一節(jié)。
為了避免這種情形發(fā)生姜盈，在Label這個控件中常常出現(xiàn)低千，Auto Layout有了一個Intrinsic Content Size選項，這個選項允許控件基于其內容來自動調整大小馏颂。開啟這個功能方法：在界面上選中Label控件示血，點擊頂部菜單欄Editor，然后點擊Size to Fit Content救拉。
Priority（優(yōu)先級）
在大多數(shù)情況下难审，一個view會有很多約束，屏幕上的控件會按照約束進行自我調整亿絮。在某些情況下剔宪，多個約束彼此矛盾，優(yōu)先級順序決定了我們先使用哪個約束壹无。
Auto Layout | Page 193
Creating Constraints（創(chuàng)建約束）
我們是在Storyboard文件中創(chuàng)建約束葱绒。當我們把控件拖到界面上時，這個控件是沒有任何約束的斗锭。如果在沒有設定約束的情況下運行應用地淀，Xcode就會按照這個控件的絕對位置來定位這個控件，這意味著即使控件里的內容屬性變化了岖是，這個控件也不會移動帮毁。所以為了讓控件能夠根據(jù)情況自我調整实苞，就需要創(chuàng)建約束。每個控件都至少有一個水平和一個垂直的約束烈疚。有很多辦法來給你的控件創(chuàng)建約束黔牵，下面我們來一一介紹。
The Control-Drag Method（Control拖動法）
創(chuàng)建約束最方便的方法就是Control拖動法爷肝，選擇一個控件猾浦，然后按住Control鍵，然后拖動鼠標拖向另外一個控件灯抛，接著彈出一個菜單窗口（見圖7-6）金赦，根據(jù)你拖動的方向，彈出框中菜單選項內容也會不同对嚼。
如果你是向右拖動夹抗，就會出現(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（自動布局按鈕）
當然我們也可以通過Storyboard Editor編輯器右下角的Auto Layout菜單來創(chuàng)建約束（見圖7-7）亥曹。Auto Layout菜單有四個按鈕邓了，用來給控件增加自動布局的約束。
Page 194 | Chapter7 : Devices and Auto Layout
The Align button
從左邊起第一個按鈕就是Align按鈕媳瞪，這個按鈕是可以創(chuàng)建有關對齊要求的約束骗炉，例如讓某個view居中，或者讓多個相鄰的view邊對齊蛇受。
要使用這個按鈕句葵，首先先選定一個控件，點擊最左邊的這個Align按鈕兢仰，然后彈出Align選項窗口乍丈，顯示可能創(chuàng)建的約束（見圖7-8）。勾選某個選項后在選項后面的輸入框填寫上偏移量把将，這個文本框同樣也可提供一個下拉菜單?轻专，有Canvas（畫布）和Standard Value標準數(shù)值2個選項。Canvas選項會根據(jù)你目前界面上控件當前的位置進行計算出偏移量察蹲，Standard Value是蘋果公司根據(jù)最佳實踐原則提供的尺寸请垛，能夠根據(jù)不同的設備進行變化催训。點擊Add Constraints，就成功添加約束了宗收。
The Pin button
第二個按鈕是Pin按鈕漫拭。Pin按鈕用來創(chuàng)建有關兩個控件的距離或者控件寬高的約束。點擊Pin按鈕彈出Pin選項窗口混稽，Pin選項從上到下有幾個不同的部分采驻。
所選控件距離上下左右的偏移量的約束，是由最上面的這部分部分來創(chuàng)建荚坞。
Creating Constraints | Page 195
最上面這部分的輸入框中輸入數(shù)值挑宠，上下左右四個方向，每個方向都可以創(chuàng)建約束颓影。這個地方有個棘手的問題值得注意各淀，就是在創(chuàng)建約束的時候，你需要勾選輸入框和小方塊之間的紅線诡挂，勾選后碎浇，紅線會變粗（見圖7-9）。勾選紅線后璃俗，彈出框最下面的文案會更新為“Add 1 Constraint”奴璃。
從上往下第二部分是用來給控件設定固定的寬高約束，使用設定固定寬城豁、高功能時要格外小心苟穆，尤其是在Label控件上，Label固定寬有時候會讓Label的文字內容被意外截斷唱星。
從上往下第三部分是用來給多個控件設置等寬雳旅、等高、寬高縱橫比间聊，寬高縱橫比約束功能是某個控件尺寸變化后攒盈，寬高比不會變化。
Align彈出框和Pin彈出框中都有Update Frames選項哎榴，點擊Update Frames選項后型豁，根據(jù)你更新的約束條件，讓控件按照新的約束條件進行位置和尺寸的變化尚蝌。你可以選擇讓所有的控件都按照新的條件進行調整迎变，或者是僅限于讓新的約束條件所影響的控件進行調整。
Pin選項中最后一個選項是Align選項飘言，在創(chuàng)建約束時氏豌，這個選項最有幫助我們會經常用到。選中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中出現(xiàn)的問題（issues）相速，它會提供修改建議，重新設置約束條件鲜锚。還能基于當前界面中各個控件的當前位置進行分析生成創(chuàng)建約束突诬。
Issues菜單分成上下兩部分菜單（見圖7-10）。上半部分的設置只影響到你所選中的控件芜繁，下半部分的設置會影響到所有的控件旺隙。Issue菜單中最有幫助的是“Reset to Suggested Constraints”選項。這個選項能夠刪除當前所有的約束然后基于當前控件的位置創(chuàng)建新的約束骏令。這個選項是一個偉大的起點蔬捷，允許約束在創(chuàng)建后可以被編輯。
The Resizing Behavior button
最后一個按鈕是Resizing Behavior按鈕榔袋，點擊這個按鈕會彈出Resizing Behavior菜單周拐，主要用來控制如何應用實現(xiàn)約束條件（見圖7-11）。根據(jù)你選擇控件的數(shù)量凰兑，有些功能是不能使用的妥粟。例如，equal widths選項能夠讓多個控件具有相同的寬吏够，如果你選中了一個控件后勾给，這個功能就不能使用。
The Guidelines Method（輔助線方法）
當你在界面上來定位一個控件時锅知，會出現(xiàn)垂直居中和水平居中兩條輔助線（見圖7-12）播急。Xcode提供的輔助線能夠為你自動生成一些約束。
Creating Constraints | Page 197
有線喉镰，我們要使用輔助線來定位一個控件旅择，接著點擊Resolve Auto Layout按鈕（長得看起來像是兩個翅膀之間有個三角）惭笑，出現(xiàn)彈出框選項菜單侣姆，滑倒頂部選擇“Reset to Sugested Constraints”（見圖7-13）。這個選項會讓Xcode刪除目前的約束然后根據(jù)輔助線定義的位置自動創(chuàng)建新的約束沉噩。點開Document Outline捺宗，能看到所有的約束條件。
Page 198 | Chapter7 : Devices and Auto Layout
Testing Layout Constraints（檢測Layout約束條件）
當你使用Auto Layout來定位一個控件川蒙，約束會通過顏色來提供反饋蚜厉。如果約束的顏色是橘黃色的，表示目前的約束條件還不充分畜眨，需要更多的約束才能正確的定位這個控件昼牛，如果線是紅色的术瓮，那么表示當前的約束是錯誤的（見圖7-14）。
Testing Layout Constraints | Page 199
點擊Document Outline贰健，會出現(xiàn)黃色三角圖標或者紅色圓圈圖標胞四，這表示Auto Layout有了問題（Issue）。點擊圖標會出現(xiàn)問題清單伶椿，列出問題辜伟、原因（見圖7-15）。
點擊issue旁邊的圖標脊另，會出現(xiàn)Fix-It彈出框（見圖7-16）导狡。彈出框展示建議的解決方法，點擊Fix按鈕會自動修復問題偎痛。一定要調查一下它給的建議旱捧，有時候它的建議并不是在所有的設備上能達到你想要的效果。
Previewing（預覽）
在多種屏幕尺寸來測試你的界面看彼，這點很重要廊佩。為此Xcode提供了一個Previewer（預覽窗口），展示在多個設備下具體的效果（見圖7-17）靖榕。要打開Previewer标锄，首先要隱藏Inspector，接著點擊Assistant Editor茁计，右邊出現(xiàn)了一個窗口料皇，點擊這個窗口上方的Automatic按鈕，下滑出一個窗口星压，點擊Preview践剂。右邊的這個窗口展示當前界面在設備上的效果，點擊左下角的加號娜膘，可以添加更多的設備逊脯。
Page 200 | Chapter7 : Devices and Auto Layout
