上一篇講了一大堆基礎(chǔ)知識(shí)倍靡，現(xiàn)在就開(kāi)始講一下AutoLayout的實(shí)際應(yīng)用（本專(zhuān)題頁(yè)查找《一稿適配所有iOS設(shè)備——AutoLayout入門(mén)》）猴伶。接下來(lái)我們要用Xcode做一個(gè)典型的登錄頁(yè)面，這個(gè)頁(yè)面會(huì)用到我在上一篇里講過(guò)的三種布局方式塌西，完成以后是一個(gè)真實(shí)的登錄界面他挎，換句話(huà)說(shuō)，這是一個(gè)真實(shí)的iOS App捡需，只是這個(gè)App只有一個(gè)不能登錄的登錄界面办桨。

看完這篇文章后你會(huì)大概了解你的設(shè)計(jì)是如何實(shí)現(xiàn)的，并且能自己制作出簡(jiǎn)單的頁(yè)面來(lái)站辉。順便聲明一下呢撞，本文的討論范圍僅限于iOS開(kāi)發(fā)，并且只討論AutoLayout的布局方式饰剥，想了解更多布局的基礎(chǔ)知識(shí)的可以看我上一篇文章殊霞，未做特殊說(shuō)明的不帶單位的尺寸默認(rèn)單位都為point。

下面正式開(kāi)始汰蓉，這個(gè)就是我們要做的登錄界面绷蹲。

首先你需要有一個(gè)Mac電腦，并且要安裝了Xcode顾孽，你可以直接在Mac App Store 里下載祝钢，這是免費(fèi)的。Xcode 是蘋(píng)果給開(kāi)發(fā)者提供的開(kāi)發(fā)軟件若厚，我們平時(shí)用的iOS App 就是這里開(kāi)發(fā)出來(lái)的拦英，事實(shí)上幾乎所有蘋(píng)果設(shè)備上的軟件都是用Xcode開(kāi)發(fā)的，包括Mac 测秸，Apple Watch上的軟件疤估。Xcode是一個(gè)強(qiáng)大的開(kāi)發(fā)工具灾常，有很多功能，我在這里只是大致介紹一下本文需要用到的功能做裙，更多內(nèi)容可以點(diǎn)擊這里：http://help.apple.com/xcode/mac/8.0/

創(chuàng)建你的第一個(gè)Xcode項(xiàng)目

安裝好后打開(kāi)Xcode 創(chuàng)建你的第一個(gè)項(xiàng)目吧岗憋。

打開(kāi)后選擇 Create a new Xcode project? —> 出現(xiàn)默認(rèn)選中的Single View Application肃晚，直接點(diǎn)next —>? 給你的App取個(gè)名字锚贱，點(diǎn)擊next? —>? 選擇保存地址 就可以了。這就是打開(kāi)后你看到的界面?：

用過(guò)Sketch的人可能會(huì)比較熟悉上面這個(gè)界面的結(jié)構(gòu)关串。

首先看左邊欄拧廊，這個(gè)可以理解為導(dǎo)航欄，在這里我們可以選擇打開(kāi)不同的文件晋修。本文中我們需要用到的是兩個(gè)吧碾，一個(gè)是Main.storyboard ，這個(gè)是讓我們來(lái)布局界面的畫(huà)布墓卦，還有一個(gè)是Assets.xcassets 倦春，這個(gè)是讓我們放素材的地方，我們可以把切圖導(dǎo)入到這里落剪，供后續(xù)使用睁本。

右邊欄大概可以理解為屬性欄，里面的內(nèi)容會(huì)根據(jù)你選中的東西不同而變化忠怖，顯示出相應(yīng)的內(nèi)容呢堰。

首先我們要導(dǎo)出需要的素材。我導(dǎo)出的是@1x 凡泣，@2x枉疼，@3x 三種倍率的，如果你的命名符合規(guī)范的話(huà)（后綴為@1x 鞋拟，@2x骂维，@3x），Xcode能自動(dòng)識(shí)別倍率贺纲。我們也可以導(dǎo)入一張PDF席舍，Xcode會(huì)自己生成不同倍率的圖（具體做法在這里不說(shuō)了，有興趣的可以自己研究下）哮笆。

需要說(shuō)明一下的是我的登錄按鈕切圖并不是一個(gè)長(zhǎng)的按鈕来颤，而只截了一段，因?yàn)檫@個(gè)按鈕長(zhǎng)度會(huì)根據(jù)屏幕寬度調(diào)整稠肘，而不是固定的福铅，接下來(lái)我們會(huì)在Xcode里處理一下，讓這個(gè)切圖在寬度方向能自由伸縮项阴，但又不讓圖片失真變形滑黔。

導(dǎo)入切圖

先選中Assets.xcassets 笆包， 將我們導(dǎo)出的切圖拖到里面。

如果你的命名是符合規(guī)范的略荡，那么Xcode已經(jīng)將你的切圖自動(dòng)識(shí)別到對(duì)應(yīng)的倍率框里面去了

然后我們處理一下之前說(shuō)的那個(gè)登陸按鈕庵佣。選擇頂部的菜單中的Editor —> Show Slicing

這時(shí)候你會(huì)發(fā)現(xiàn)你的切圖預(yù)覽變成這樣了：

點(diǎn)擊Start Slicing 接著再點(diǎn)擊 Slice Horizontally 的圖標(biāo)既可以了。想了解細(xì)節(jié)的可以看這里：https://developer.apple.com/library/ios/recipes/xcode_help-image_catalog-1.0/chapters/SlicinganImage.html

Tips：有些由簡(jiǎn)單色塊組成的圖片汛兜，如背景巴粪，按鈕背景等切圖并不需要切出一張完整的圖片。

開(kāi)始布局

處理完素材以后我們就可以正式開(kāi)始了粥谬。在導(dǎo)航欄里選擇Main.storyboard肛根，你會(huì)看到頁(yè)面的中間出現(xiàn)了一個(gè)叫View Controller正方形的畫(huà)布。

看一下登錄界面的頁(yè)面構(gòu)成，我用紅字標(biāo)的是我們等下需要用到的控件，我們可以在iOS的控件庫(kù)里面找到這些控件揽祥，直接將它們拖到我們的畫(huà)布上去蒂胞。

最上面是一個(gè)Navigation Bar? 這是iOS系統(tǒng)的自帶的，并不需要我們自己來(lái)做，我們只需要把Navigation Bar調(diào)出來(lái)就行了。

調(diào)出Navigation bar

首先我們先選中View Controller，選擇頂部菜單欄中的Editor中的Embed in Navigation Controller 褂乍，這樣我們的View Controller上就會(huì)出現(xiàn)Navigation Bar 了。

這時(shí)候我們能看到之前的View Controller 上已經(jīng)出現(xiàn)了一個(gè)Navigation bar 抑月，雙擊中間就能直接輸入標(biāo)題树叽，字體大小都是默認(rèn)的，一般都是使用默認(rèn)字號(hào)谦絮。

接下來(lái)就要放Navgation Bar 上的兩個(gè)按鈕了题诵，同樣，這兩個(gè)也是使用系統(tǒng)默認(rèn)的按鈕层皱，位置和大小都是默認(rèn)的性锭，我們只需要從系統(tǒng)的控件庫(kù)里拖兩個(gè)按鈕放上去就行了。Xcode右下角區(qū)域的就是iOS的控件庫(kù)叫胖，我們平時(shí)用的控件都能在這里找到草冈，你也可以在下面的搜索框中直接輸入你想要的控件進(jìn)行快速查找。這里我們需要的是 Bar Button Item 瓮增，找到后直接拖出來(lái)放到我們的Navigation Bar 上就行了怎棱。

放上去以后同樣是雙擊就可以直接輸入，我們改好按鈕的標(biāo)題绷跑，這時(shí)候發(fā)現(xiàn)默認(rèn)的按鈕是藍(lán)色的拳恋，我們?cè)O(shè)計(jì)中的按鈕是綠色的。iOS的系統(tǒng)控件都會(huì)給我們提供一部分自定義的空間砸捏，我們只需要選中相應(yīng)控件谬运，就會(huì)在右邊欄的Attributes inspector上出現(xiàn)相應(yīng)控件的屬性隙赁，可以看到右邊欄中出現(xiàn)了一個(gè) Tint 的屬性，我們可以在這里修改顏色梆暖。

Tips：建議大家去看一下這個(gè)控件庫(kù)里面的東西伞访，了解各個(gè)控件的用處和它們的屬性，這會(huì)對(duì)你的設(shè)計(jì)有很大的幫助轰驳。

修改背景色

我們可以直接點(diǎn)擊相應(yīng)控件來(lái)選擇厚掷，也可以在畫(huà)布邊上的層級(jí)里選擇，這里能看到所有的控件滑废，如果我們點(diǎn)擊View Controller中間的空白位置蝗肪，就能看到有一個(gè)View被選中了袜爪，這是系統(tǒng)默認(rèn)加上去的蠕趁，可以把它理解為背景。選中這個(gè)View 后我們就能在右側(cè)的屬性欄中修改它的背景顏色了辛馆。我們需要把它的 Background 改為灰色就行俺陋。

給出適配策略

這些都改好以后，接下來(lái)就是用AutoLayout 布局的時(shí)候了昙篙，先分析一下我們要做的頁(yè)面的布局：

第一個(gè)是最上面的Logo 腊状，這是一張圖片，我希望它一直保持圖片的原始大小苔可，不隨著屏幕縮放缴挖，防止圖片變虛。所以我希望它的大小是固定的焚辅，寬度方向?qū)?yīng)上個(gè)例里的B映屋。

第二個(gè)是輸入框和按鈕區(qū)域，我希望他們的寬度能和屏幕一起縮放同蜻，所以寬度方向?qū)?yīng)A棚点。

第三個(gè)是三個(gè)第三方登錄的按鈕，我要求他們之間的間隙能隨著屏幕的變化而變化湾蔓，充分利用屏幕空間瘫析，也就是寬度方向?qū)?yīng)C。

定位圖片

首先從控件庫(kù)里面拖出一個(gè)Image View 到畫(huà)布上去默责，在左側(cè)的Attributes inspector 上的Image選框中選擇我們之前導(dǎo)入的logo贬循。

接下來(lái)就到了添加約束的時(shí)候了，最常用的是右下角的四個(gè)按鈕桃序，這次會(huì)用到后三個(gè)杖虾。

先介紹一下第一種添加約束的方法：Pin。選中Logo葡缰，點(diǎn)擊Pin按鈕亏掀，會(huì)出現(xiàn)一個(gè)Add New Constraints的Popup（如下圖）忱反，這個(gè)就是我們來(lái)添加約束的地方。上部分用來(lái)定義當(dāng)前選中的視圖和附近的視圖的上下左右的距離滤愕，點(diǎn)擊三角形下拉框可以看它附近的視圖有哪些温算，有多個(gè)的話(huà)和可以自己選擇，默認(rèn)是離它最近的那個(gè)间影。點(diǎn)擊紅色的虛線(xiàn)約束線(xiàn)注竿，變實(shí)線(xiàn)后表明添加了相應(yīng)約束。下面可以設(shè)置寬度和高度魂贬，你也可以讓它固定長(zhǎng)寬比(Aspetc Ratio)巩割，這樣就算單向拉伸時(shí)你的圖片也不會(huì)變形。如果你一起選擇了多個(gè)視圖付燥，你可以讓他們等高或等寬宣谈，還可以進(jìn)行對(duì)齊。

這里先給Logo添加一個(gè)頂部的約束键科，距離頂部的Navigation Bar? 30闻丑，勾選上寬度和高度且分別為：173，59 （如上如所示）勋颖。實(shí)際上Xcode能識(shí)別的圖片的大小嗦嗡，如果不加高度和寬度的約束就顯示圖片原始大小，這里我為了演示加上了圖片原始的高度和寬度饭玲。添加完成后點(diǎn)擊底部 Add 3 Constraints 按鈕后就把這些約束給加上了侥祭。點(diǎn)擊這個(gè)按鈕后我們會(huì)發(fā)現(xiàn)我們的Logo邊上出現(xiàn)了約束線(xiàn)，但是是紅色的茄厘。

當(dāng)約束線(xiàn)是紅色時(shí)矮冬，就表明我們添加的約束還有問(wèn)題〔隙希可以看到欢伏，在上圖左上角有一個(gè)紅色的箭頭，這就報(bào)錯(cuò)亿乳，點(diǎn)擊后能看到具體的報(bào)錯(cuò)信息：

Need constraints for ：X position

這條信息提示我們沒(méi)有給出X方向的位置信息硝拧。我們要求這個(gè)圖是居中的，所以要添加一個(gè)水平方向的居中的約束就可以了葛假。這時(shí)候就要用到第二種添加約束的方法了：點(diǎn)擊Align按鈕也會(huì)出現(xiàn)一個(gè)Popup障陶，我們?cè)谶@里進(jìn)行各種對(duì)齊操作。勾選Horizontally in Container聊训，點(diǎn)擊Add 1 Constraint后就行了抱究。

添加上這個(gè)約束后能發(fā)現(xiàn)紅色的線(xiàn)不見(jiàn)了，變成了黃線(xiàn)带斑，還出現(xiàn)了一個(gè)黃色的虛線(xiàn)框鼓寺。這個(gè)虛線(xiàn)框表示這是Xcode 通過(guò)我們給的約束推斷出來(lái)的位置勋拟。我們需要Update Frame,讓這個(gè)logo跑到它該待的位置。

點(diǎn)擊Resolve AutoLayout Issues 按鈕妈候，在出現(xiàn)的Popup里選擇第一個(gè)Update Frames敢靡。

Update完成后我們看到Logo 已經(jīng)跑到正確的位置去了，這時(shí)候所有的約束線(xiàn)都變成了藍(lán)色苦银。藍(lán)色的約束線(xiàn)就代表Xcode能通過(guò)現(xiàn)在所加的約束可推斷出頁(yè)面的布局啸胧。

定位輸入框和登錄按鈕

接下來(lái)就開(kāi)始定位輸入框，同樣先從控件庫(kù)里面拖出一個(gè)TextField來(lái)幔虏，在placeholder 里輸入提示文字纺念。順便提一句，TextField的屬性里有一個(gè)Keyboard Type 選框想括，在這里我們可以選擇該輸入框?qū)?yīng)的輸入鍵盤(pán)陷谱。如果你的用戶(hù)名都是手機(jī)號(hào)，那么就應(yīng)該在這里選擇數(shù)字鍵盤(pán)主胧。

Tips：在iOS系統(tǒng)里叭首，你可以給每個(gè)輸入框都指定相應(yīng)的鍵盤(pán)习勤。當(dāng)你在設(shè)計(jì)輸入框時(shí)可以說(shuō)明它使用的是哪種鍵盤(pán)踪栋，如只能輸入數(shù)字的輸入框彈出的就因該是數(shù)字鍵盤(pán)。

接下來(lái)同樣是用Pin按鈕來(lái)添加約束图毕。要求它離上面的Logo 為30 夷都，輸入框高度為45，寬度隨著屏幕伸縮予颤，屏幕兩邊各留15的邊距（margin）囤官。需要注意的是這里要取消勾選 Constrain to margins 選項(xiàng)。我們?cè)O(shè)置的margin是15蛤虐，而蘋(píng)果默認(rèn)也會(huì)有一個(gè)margin党饮，當(dāng)這個(gè)選項(xiàng)勾上以后，默認(rèn)的margin也會(huì)算在里面驳庭，我們的margin是自定義的刑顺，不需要使用默認(rèn)的，所以這里要取消勾選饲常。

添加完成后Update一下蹲堂，就能看到預(yù)期的效果了。我們可以用同樣的方式定位好第二個(gè)密碼輸入框贝淤，但是柒竞，這里我們要用另一種方式來(lái)添加約束，也是第三種常用的添加約束的方法播聪。這次我們要以第一個(gè)輸入框?yàn)榛A(chǔ)來(lái)定義第二個(gè)輸入框朽基。讓第二個(gè)輸入框和第一個(gè)一樣高布隔，同時(shí)首尾對(duì)齊。這樣做的好處就是如果我們下次要修改稼虎，如修改高度执泰，那么我們只要改第一個(gè)，第二個(gè)也會(huì)跟著變化渡蜻，而不需要再一個(gè)個(gè)去改术吝。

具體的操作方法是先選中你要定位的視圖，按住Control鍵后拖動(dòng)到另一個(gè)視圖上后釋放茸苇，會(huì)出現(xiàn)一個(gè)菜單排苍，在菜單里可以選擇它們之間的關(guān)系，按住Shift 后可以多選学密，選好后按Return 確認(rèn)淘衙。

我們?cè)趶棾龅牟藛卫镞x擇讓它們首尾對(duì)齊（Leading , Trailing），等高(Equal Heights)腻暮，還有加上垂直方向上距離彤守，Vertical Spacing 就是將當(dāng)前的垂直方向的距離作為默認(rèn)的數(shù)值，我們可以雙擊這個(gè)約束線(xiàn)來(lái)修改數(shù)值大小哭靖，這里我們將大小改為10 具垫。

完成以后我們從控件庫(kù)里拖出一個(gè)Button ，在A(yíng)ttributes inspector里將標(biāo)題改為“忘記密碼”试幽，顏色改為灰色筝蚕。用上面的方法讓它與輸入框的 Trailling(尾部) 對(duì)齊，同時(shí)離上一個(gè)輸入框距離也為10 铺坞，放好修改密碼的按鈕起宽。

再拖出一個(gè)Button，用來(lái)做登錄按鈕济榨，將Background改為之前導(dǎo)入的按鈕切圖坯沪。用我之前說(shuō)過(guò)的方式添加好約束。這里按鈕的高度為45擒滑，離密碼輸入框的距離為60腐晾。

本文作者：董浩龍（點(diǎn)融黑幫），來(lái)自點(diǎn)融設(shè)計(jì)中心（DDC）橘忱，是一名交互設(shè)計(jì)師赴魁，現(xiàn)在主要在做動(dòng)效和原型，有空會(huì)學(xué)習(xí)一下代碼钝诚，了解頁(yè)面實(shí)現(xiàn)的原理颖御。