Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

我是你的葫蘆娃發表於2019-12-03

前言:

         最近在做專案的時候遇到了一個需求,需求內容就是更換Luanchscreen的圖片。然鵝好久沒做這塊的我還理想的想使用LuanchImage來解決適配問題,結果Apple成功的噁心到我了,感冒發燒頭暈想急著請假回家的我這時候內心是無比狂躁的,庫克問候你全家!LuanchImage設定項那兒去了???

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

當時的心情啊,我也不知道該說什麼了!

       在經歷了沒有選項後我開始使用谷歌大法,搜尋著我心儀的“小可愛❤”,結果現實再次打擊了我。看看搜到的結果:

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

褲子都脫了,你給我看這個???

       都尼瑪什麼玩意兒,能適配麼!除了第一個連結有一丟丟相關性外,其餘的全是辣雞!你沒聽錯全是辣雞!!!

      快速瀏覽了第一個搜尋項,哎喲微博的耶!一溜煙的看完,大概就是說你用一張設計圖,然後設定圖片模式為Aspect Fill,OK你要得適配就出爐啦!(WTF完全不滿足我的需求,我想要的是要麼使用Lunchscreen進行多裝置適配啊,通過提供lunchimage那種套圖來,或者其他方式而不是這個。谷歌再次被我鄙視?)!


官方簡介

官方簡介:Luanchscreen (可能是我?處於混沌中我是沒找到有什麼很好地說明,說白了對我而言沒什麼卵用這個東西!)


適配

Luanchscreen.storyboard 複雜元素螢幕適配

吐槽了這麼多,接著進入正題,先看看需要的實現的頁面:


Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

元素拆分

要實現這個啟動頁首先需要將頁面內元素進行拆分。

第一部分是背景:

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

第二部分是背景中的人物影像:

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

第三部分是底部白色背景:

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

第四部分是Logo:

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配


約束

將頁面拆分後對啟動頁進行自動佈局約束新增。

人物約束如下:

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

PS:人物約束最開始使用的是頂部歲螢幕寬度進行動態變化進行適配,結果在測試中發現使用這種方法後會導致圖片跳動,因此建議有類似的最好使用居中偏移方式,圖片的高度使用了等比縮放,根據螢幕寬度來確定。

白色底和Logo約束:

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

PS:底部就很清爽了直接靠底部,加一點固定距離就完成了。

適配截圖

整個適配完成,下面分別擷取了4s、8p、11的截圖:

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

iPhone 4S

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

iPhone 8Plus

Xcode11 Luanchscreen.storyboard 複雜元素螢幕適配

總結

基本上這個適配達到了期望值。如果你有更好的適配方式,請務必告訴我。(這是慾望的小眼神?)

題外話

掘金這是什麼玩意,標籤還不能自己設定,還得是系統準備好的,沒用過這麼難用的部落格,這產品也是奇葩了,每一個提示,沒選擇,然後輸入了正常標籤逗號或者分好隔開叫我選著標籤,試了三次才發現需要先隨便輸入,然後系統索引,沒有的標籤還不行。產品你出來,你寫部落格麼,你不寫部落格你開發你M的產品啊,反人類麼???


相關文章