不經(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)指正。