Storyboard登錄界面適配

不經(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和ContentView約束

從圖中看到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)行下慌随,如下圖:

沒(méi)有適配

除了在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è)約束研铆,如下圖:

Logo舊約束

圖中紅框處有一個(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根欧,所以新的約束是:

Logo新約束

同理,也可以將ContentView的約束更新成下圖:

ContentView新約束

至此端蛆,適配做完了凤粗,看下在各個(gè)機(jī)型模擬器上的效果:

適配

總結(jié)


多數(shù)情況下以上的內(nèi)容是適用的,但是會(huì)受到很多因素的影響今豆,比如Logo的高度過(guò)高等都會(huì)影響到最后的效果嫌拣。

如有錯(cuò)誤柔袁,請(qǐng)指正。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末亭罪,一起剝皮案震驚了整個(gè)濱河市瘦馍,隨后出現(xiàn)的幾起案子歼秽,更是在濱河造成了極大的恐慌应役,老刑警劉巖,帶你破解...
    沈念sama閱讀 222,378評(píng)論 6 516
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件燥筷,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡肆氓,警方通過(guò)查閱死者的電腦和手機(jī)袍祖,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,970評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門蕉陋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人拨扶,你說(shuō)我怎么就攤上這事』济瘢” “怎么了?”我有些...
    開封第一講書人閱讀 168,983評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵匹颤,是天一觀的道長(zhǎng)仅孩。 經(jīng)常有香客問(wèn)我,道長(zhǎng)印蓖,這世上最難降的妖魔是什么辽慕? 我笑而不...
    開封第一講書人閱讀 59,938評(píng)論 1 299
  • 正文 為了忘掉前任,我火速辦了婚禮赦肃,結(jié)果婚禮上鼻百,老公的妹妹穿的比我還像新娘。我一直安慰自己摆尝,他們只是感情好温艇,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,955評(píng)論 6 398
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著堕汞,像睡著了一般勺爱。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上讯检,一...
    開封第一講書人閱讀 52,549評(píng)論 1 312
  • 那天琐鲁,我揣著相機(jī)與錄音卫旱,去河邊找鬼。 笑死围段,一個(gè)胖子當(dāng)著我的面吹牛顾翼,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播奈泪,決...
    沈念sama閱讀 41,063評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開眼适贸,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了涝桅?” 一聲冷哼從身側(cè)響起拜姿,我...
    開封第一講書人閱讀 39,991評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎冯遂,沒(méi)想到半個(gè)月后蕊肥,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,522評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡蛤肌,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,604評(píng)論 3 342
  • 正文 我和宋清朗相戀三年壁却,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片裸准。...
    茶點(diǎn)故事閱讀 40,742評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡展东,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出狼速,到底是詐尸還是另有隱情琅锻,我是刑警寧澤,帶...
    沈念sama閱讀 36,413評(píng)論 5 351
  • 正文 年R本政府宣布向胡,位于F島的核電站恼蓬,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏僵芹。R本人自食惡果不足惜处硬,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,094評(píng)論 3 335
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望拇派。 院中可真熱鬧荷辕,春花似錦疮方、人聲如沸茧彤。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,572評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至溜歪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間调衰,已是汗流浹背拯腮。 一陣腳步聲響...
    開封第一講書人閱讀 33,671評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工动壤, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人琼懊。 一個(gè)月前我還...
    沈念sama閱讀 49,159評(píng)論 3 378
  • 正文 我出身青樓哼丈,卻偏偏與公主長(zhǎng)得像筛严,于是被迫代替她去往敵國(guó)和親醉旦。 傳聞我的和親對(duì)象是個(gè)殘疾皇子车胡,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,747評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容