在這一章節(jié)中寸痢，你將會學習如何為不同尺寸設(shè)備設(shè)計界面，我們會介紹所有的蘋果設(shè)備及其尺寸审胸。在這一章中你將學會設(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)的圖像細節(jié)增加豆赏。Pixel-per-inch（PPI）像素每英寸為單位來表示影像分辨率的大小。當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è)備的標準尺寸圖片
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垂直
這是默認的方向荚板，設(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)整不同方向下的布局。默認情況下榕暇，支持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就在這個窗口中運行，當然碘裕，也可以全屏展示携取，拉伸或者放大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)使用固定的坐標和尺寸，但是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
當需要考慮不同尺寸和不同方向下的布局時徒蟆，這個方法就不行了。如果屏幕轉(zhuǎn)向橫屏离唬，用這個方法設(shè)置的Label無法改變坐標值后专，無法出現(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)向橫屏時嫂用，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)建約束。寬和高這兩個屬性一般是用來固定或者讓多個控件等比變化莫绣，比如你想在屏幕下方一行排列四個按鈕畴蒲，當屏幕變寬時，這四個按鈕就會等比變寬对室。
cuter和centerY屬性是用來定位一個控件垂直居中或者水平居中模燥。最后baseline屬性只出現(xiàn)在有文字的控件中，指的是一行文字的底部邊界掩宜。
Values（值）
每個約束都必須設(shè)定一個值蔫骂，這個值可以是具體的數(shù)值，也可以是一個范圍牺汤，也可以是Standard Value（標準值）辽旋。例如，在iPhone上檐迟，Standard Value（標準值）可能是20pts补胚，而在iPad上，Standard Value（標準值）可能是25pts追迟。Standard Value（標準值）是由蘋果公司規(guī)定的溶其，會根據(jù)不同的設(shè)備和方向進行變化。約束也可以設(shè)定為一個具體的數(shù)值敦间，例如瓶逃，距離Label的leading edge30pts偏移量。Auto Layout也可以支持范圍或者不等量的值廓块。例如厢绝，把約束設(shè)置為距離leading edge大于等于20pts，隨著視圖變化leading偏移量也會變化带猴。最后代芜，Standard Value（標準值）是默認的距離。
Intrinsic Size（固定尺寸）
在某些情況下浓利，我們很有必要允許控件能自己調(diào)整尺寸大小，例如钞速，有一個固定寬度的Label贷掖，顯示的一段英文文字“Tap here to enter”毫胜，當這段話翻譯成德語的“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)建約束屉符。 當我們把控件拖到界面上時，這個控件是沒有任何約束的锹引。如果在沒有設(shè)定約束的情況下運行應(yīng)用矗钟，Xcode就會按照這個控件的絕對位置來定位這個控件，這意味著即使控件里的內(nèi)容屬性變化了粤蝎，這個控件也不會移動真仲。所以為了讓控件能夠根據(jù)情況自我調(diào)整，就需要創(chuàng)建約束初澎。每個控件都至少有一個水平和一個垂直的約束秸应。有很多辦法來給你的控件創(chuàng)建約束，下面我們來一一介紹碑宴。
The Control-Drag Method（Control拖動法）
創(chuàng)建約束最方便的方法就是Control拖動法软啼，選擇一個控件，然后按住Control鍵延柠，然后拖動鼠標拖向另外一個控件祸挪，接著彈出一個菜單窗口（見圖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（自動布局按鈕）
當然我們也可以通過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標準數(shù)值2個選項中跌。Canvas選項會根據(jù)你目前界面上控件當前的位置進行計算出偏移量，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è)置約束條件寂汇。還能基于當前界面中各個控件的當前位置進行分析生成創(chuàng)建約束。
Issues菜單分成上下兩部分菜單（見圖7-10）捣染。上半部分的設(shè)置只影響到你所選中的控件骄瓣，下半部分的設(shè)置會影響到所有的控件。Issue菜單中最有幫助的是“Reset to Suggested Constraints”選項耍攘。這個選項能夠刪除當前所有的約束然后基于當前控件的位置創(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（輔助線方法）
當你在界面上來定位一個控件時敦腔，會出現(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約束條件）
當你使用Auto Layout來定位一個控件，約束會通過顏色來提供反饋沃缘。如果約束的顏色是橘黃色的躯枢，表示目前的約束條件還不充分，需要更多的約束才能正確的定位這個控件槐臀，如果線是紅色的锄蹂，那么表示當前的約束是錯誤的（見圖7-14）。
圖7-14 橘黃色約束
Testing Layout Constraints | Page 199
點擊Document Outline水慨，會出現(xiàn)黃色三角圖標或者紅色圓圈圖標得糜，這表示Auto Layout有了問題（Issue）。點擊圖標會出現(xiàn)問題清單晰洒，列出問題朝抖、原因（見圖7-15）。
圖7-15 約束錯誤和約束警告
點擊issue旁邊的圖標谍珊，會出現(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况芒。右邊的這個窗口展示當前界面在設(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)祠够，并標注“簡書作者”压汪。
