不經(jīng)作者同意，禁止轉(zhuǎn)載
前言
登錄界面非常常見躏碳，這篇文章就來(lái)講講如何在各種機(jī)型中做到完美適配。（寫文章時(shí)散怖，正值2016法國(guó)歐洲杯唐断，所以項(xiàng)目中加入了歐洲杯的元素。）
效果圖
很多時(shí)候在工作中杭抠，UI的同事現(xiàn)在都只會(huì)以一種機(jī)型做效果圖脸甘，比如以iPhone6s的屏幕尺寸為標(biāo)準(zhǔn)。效果圖：
本文中Storybord的size也是以iPhone6s的大小為基準(zhǔn)偏灿。
代碼說(shuō)明
效果圖很簡(jiǎn)單丹诀，包括了背景圖，歐洲杯Logo翁垂，賬戶密碼文本輸入框和登錄注冊(cè)按鈕等铆遭。除了背景圖，我將效果圖上的元素分成了兩部分：Logo和ContentView沿猜，如下圖：
Logo和ContentView的約束見下圖（ContentView中控件的約束不做過(guò)多陳述枚荣，對(duì)最后的適配不產(chǎn)生影響）：
從圖中看到Logo有一個(gè)到Superview頂部的約束90，再加上水平居中的約束從而確定了Logo的位置啼肩。ContentView有一個(gè)到Superview頂部的約束330橄妆，再加上Leading和Trailing約束也就確定了ContentView的位置衙伶，至此在iPhone6s上很好的實(shí)現(xiàn)了效果圖的效果。
現(xiàn)在問(wèn)題來(lái)了害碾，在iPhone6s上實(shí)現(xiàn)了適配矢劲，在其他機(jī)型上的效果如何呢？在其他機(jī)型的模擬器上運(yùn)行下慌随，如下圖：
除了在iPhone4s上慘不忍睹之外芬沉，其他機(jī)型的效果還說(shuō)的過(guò)去。所以有人認(rèn)為只要在iPhone4s上做下特別處理就OK了阁猜，但我認(rèn)為這并沒(méi)有做到很好的適配丸逸。
適配
首先要特別注意下上面提到的兩個(gè)值90和330，這兩個(gè)值確定了Logo和ContentViewde在iPhone6s屏幕上的坐標(biāo)Y值剃袍，但是不同的屏幕大小這兩個(gè)值應(yīng)該是有不同的值椭员，不能設(shè)置固定值，只能以比例計(jì)算笛园。兩個(gè)比例值為 90 / 667 = 0.135 和 330 / 667 = 0.495隘击，如何使用這兩個(gè)比例值是本文中最重要的部分。雙擊打開Logo的Top space to這個(gè)約束研铆，如下圖：
圖中紅框處有一個(gè)計(jì)算式埋同，Logo.top = top + 90，完整的算式應(yīng)該是
Logo.top = Multiplier * top + Constant
Multiplier在圖中值為1棵红，top值為0凶赁，Constant值為90。既然top == 0逆甜，那么其實(shí)Multiplier值為多少已經(jīng)沒(méi)有意義了虱肄，那如何做適配呢？
我們可以反過(guò)來(lái)想交煞，剛才的約束是到SuperView頂部的距離咏窿，那我也可以設(shè)置到SuperView底部的距離，那么計(jì)算式應(yīng)該變成
Logo.top = Multiplier × bottom + Constant
bottom值為屏幕的高度素征，因?yàn)槲业墓こ淌且詉Phone6s屏幕大小做標(biāo)準(zhǔn)的集嵌，所以在這里bottom == 667。將剛才算出的比例代入得出：Logo.top = 0.135 × bottom + 0御毅，Constant值應(yīng)該設(shè)為0根欧，所以新的約束是：
同理，也可以將ContentView的約束更新成下圖：
至此端蛆，適配做完了凤粗，看下在各個(gè)機(jī)型模擬器上的效果：
總結(jié)
多數(shù)情況下以上的內(nèi)容是適用的，但是會(huì)受到很多因素的影響今豆，比如Logo的高度過(guò)高等都會(huì)影響到最后的效果嫌拣。
如有錯(cuò)誤柔袁，請(qǐng)指正。
