前言:
最近在做專案的時候遇到了一個需求,需求內容就是更換Luanchscreen的圖片。然鵝好久沒做這塊的我還理想的想使用LuanchImage來解決適配問題,結果Apple成功的噁心到我了,感冒發燒頭暈想急著請假回家的我這時候內心是無比狂躁的,庫克問候你全家!LuanchImage設定項那兒去了???
當時的心情啊,我也不知道該說什麼了!
在經歷了沒有選項後我開始使用谷歌大法,搜尋著我心儀的“小可愛❤”,結果現實再次打擊了我。看看搜到的結果:
褲子都脫了,你給我看這個???
都尼瑪什麼玩意兒,能適配麼!除了第一個連結有一丟丟相關性外,其餘的全是辣雞!你沒聽錯全是辣雞!!!
快速瀏覽了第一個搜尋項,哎喲微博的耶!一溜煙的看完,大概就是說你用一張設計圖,然後設定圖片模式為Aspect Fill,OK你要得適配就出爐啦!(WTF完全不滿足我的需求,我想要的是要麼使用Lunchscreen進行多裝置適配啊,通過提供lunchimage那種套圖來,或者其他方式而不是這個。谷歌再次被我鄙視?)!
官方簡介
官方簡介:Luanchscreen (可能是我?處於混沌中我是沒找到有什麼很好地說明,說白了對我而言沒什麼卵用這個東西!)
適配
Luanchscreen.storyboard 複雜元素螢幕適配
吐槽了這麼多,接著進入正題,先看看需要的實現的頁面:
元素拆分
要實現這個啟動頁首先需要將頁面內元素進行拆分。
第一部分是背景:
第二部分是背景中的人物影像:
第三部分是底部白色背景:
第四部分是Logo:
約束
將頁面拆分後對啟動頁進行自動佈局約束新增。
人物約束如下:
PS:人物約束最開始使用的是頂部歲螢幕寬度進行動態變化進行適配,結果在測試中發現使用這種方法後會導致圖片跳動,因此建議有類似的最好使用居中偏移方式,圖片的高度使用了等比縮放,根據螢幕寬度來確定。
白色底和Logo約束:
PS:底部就很清爽了直接靠底部,加一點固定距離就完成了。
適配截圖
整個適配完成,下面分別擷取了4s、8p、11的截圖:
iPhone 4S
iPhone 8Plus
總結
基本上這個適配達到了期望值。如果你有更好的適配方式,請務必告訴我。(這是慾望的小眼神?)
題外話
掘金這是什麼玩意,標籤還不能自己設定,還得是系統準備好的,沒用過這麼難用的部落格,這產品也是奇葩了,每一個提示,沒選擇,然後輸入了正常標籤逗號或者分好隔開叫我選著標籤,試了三次才發現需要先隨便輸入,然後系統索引,沒有的標籤還不行。產品你出來,你寫部落格麼,你不寫部落格你開發你M的產品啊,反人類麼???