Xcode設(shè)置啟動圖-LaunchScreen.storyboard 替代LaunchImage啟動圖適配

前言

蘋果提出從2020年4月份開始,所有支持iOS 13App必須提供LaunchScreen.storyboard,否則將無法提交到App Store進(jìn)行審核。

因為最近提交AppApp Store,需要處理啟動圖,在這里總結(jié)記錄一下。

方案

方案1:使用一張通用圖片

這種方案沒什么難度,主要是在LaunchScreen.storyboard中添加圖片并設(shè)置好約束(和平常添加圖片一樣),然后將準(zhǔn)備好的圖片設(shè)置好即可。這種方案在不同設(shè)備上可能會出現(xiàn)不同程度的裁剪。簡單粗暴處理。在Content Mode—>選擇Scale To Fill或者Aspect Fill,讓圖片自己壓縮。Scale To Fill會改變圖片寬高比,Aspect Fill會造成圖片顯示不全。

方案2:將素材進(jìn)行分割加載,當(dāng)成普通的storyboard文件進(jìn)行相關(guān)處理。

這里就是將需要的啟動圖中的元素,包括logo,文字,圖片等單獨切出來,然后跟普通頁面那樣加載UI控件等。這就可以解決了不同尺寸屏幕的適配問題以及包資源體積增大的問題。好處就是包體積小了適配各種機(jī)型更靈活(但是背景圖還是不可避免的要失去部分顯示效果),不好的地方就是以后要是換開屏圖,那么就要開發(fā)者有一定的工作量進(jìn)行處理。
有的APP適合,有的不適合??醋约喉椖烤唧w情況定吧

方案3:使用一套圖片(實現(xiàn)LaunchnImage效果,適配不同屏幕)

目前市場上主要尺寸以及對應(yīng)圖片:

3.5寸的iPhone4s(640960)
4.0寸的iPhone5/5s/5c/SE(640
1136)
4.7寸的iPhone6/6s/7/8(7501334)
5.5寸的iPhone6p/6sp/7p/8p(1242
2208)
5.8寸的iPhoneX/XS/11Pro(11252436)
6.1寸的iPhoneXr/11(828
1792)
6.5寸的iPhone XS Max/11 Pro Max(1242*2688)

步驟:
一、設(shè)置圖片資源
  1. 在Xcode的Assets.xcassets中創(chuàng)建圖片組并且命名NewLaunchImage (隨意)。
  2. 右鍵圖片組 --> Show in Finder --> 進(jìn)入修改Contents.json --> 修改相應(yīng)圖片組信息
 //修改前
 {
   "images" : [
     {
       "idiom" : "universal",
       "scale" : "1x"
     },
     {
       "idiom" : "universal",
       "scale" : "2x"
     },
     {
       "idiom" : "universal",
       "scale" : "3x"
     }
   ],
   "info" : {
     "version" : 1,
     "author" : "Xcode"
   }
 }

修改代碼為:

 //修改后
    {
      "images" : [
        {
          "idiom" : "iPhone",
          "scale" : "1x"
        },
        {
          "idiom" : "iPhone",
          "scale" : "2x"
        },
        {
          "idiom" : "iPhone",
          "scale" : "3x"
        },
        {
          "idiom" : "iPhone",
          "subtype" : "retina4",
          "scale" : "1x"
        },
        {
          "idiom" : "iPhone",
          "subtype" : "retina4",
          "scale" : "2x"
        },
        {
          "idiom" : "iPhone",
          "subtype" : "retina4",
          "scale" : "3x"
        },
        {
          "idiom" : "iPhone",
          "subtype" : "736h",
          "scale" : "3x"
        },
        {
          "idiom" : "iPhone",
          "subtype" : "667h",
          "scale" : "2x"
        },
        {
          "idiom" : "iPhone",
          "subtype" : "2436h",
          "scale" : "3x"
        },
        {
          "idiom" : "iPhone",
          "subtype" : "2688h",
          "scale" : "3x"
        },
        {
          "idiom" : "iPhone",
          "subtype" : "1792h",
          "scale" : "2x"
        }
      ],
      "info" : {
        "version" : 1,
        "author" : "Xcode"
      }
    }

修改前效果:


修改后效果:


  1. 將對應(yīng)圖片添加進(jìn)入圖片組中(我這里美工少給了兩張,大家按照尺寸放就可以了)
    注意??:不要整體拖進(jìn)去,不會自動識別,逐一添加。


二、設(shè)置Xcode
  1. 設(shè)置Launch Screen File 文件名稱

2.將之前LaunchImage的設(shè)置去掉,否則會報錯。(如果以前沒用assert方式設(shè)置啟動圖,默認(rèn)為空)


將上圖位置清空

三、在LaunchScreen.storyboard上設(shè)置圖片
  1. 選中LaunchScreen.storyboard,勾選Use as Launch Screen的選項,注意此時不要取消Use Safe Area Layout Guides選項。(盡管你的項目適配iOS9.0以下會報錯,先不要管,如果取消了在后面布局設(shè)置中左右會有20像素的留白)

  2. 添加imageView控件


3.添加約束:設(shè)置圖片約束,上下左右都為0
注意??:上下要設(shè)置邊界為View,否則會有白邊


  1. 此時選中帶劉海屏的手機(jī)模型,你會發(fā)現(xiàn)上下還是有留白


  2. 解決留白問題,在左窗口選中底部約束—>點擊右側(cè)的First item—>選擇Superview—>將Constant設(shè)置為0,如下圖所示:



    同樣的方式,修改頂部約束:注意此時需要將 Second item—>選擇Superview



    修改完的效果如下:
  3. 此時將1中提到的Use Safe Area Layout Guides選項取消勾選,然后再將自己的啟動圖名稱添加上就可以了


  4. 將自己的啟動圖名稱添加上,(在第一步中的1步驟取的名字)


四、重啟Xcode,刪除手機(jī)上原來的工程。重新編譯安裝就可以了

注意??:如過沒有重啟Xcode,可能會沒有效果。。

五:修改啟動圖

在原來的文件下面替換圖片,不管沙盒刪啟動圖緩存、刪除app重裝、清理Xcode、重啟Xcode、重啟電腦都沒用,只有一個辦法,重啟手機(jī)。所以我更換啟動圖就是換一個圖片名稱,在Assets.xcassets里面重新建一個圖片文件夾,重新添加圖片。

六:iPhone12系列

因為我的方法是通過LaunchImage衍生出來的,iPhone12出來前LaunchImage已被禁用,所以Xcode沒有iPhone12啟動圖對應(yīng)的設(shè)置,故沒辦法在Contents.json文件進(jìn)行相應(yīng)的設(shè)置。(1x、2x、3x都可以傳1242-2688px尺寸)

iPhone12用的都是3倍圖,而在Contents.json文件中沒有針對iPhone12的設(shè)置,所有,他會使用對應(yīng)的3x圖??梢园l(fā)現(xiàn)3x圖在以前機(jī)型是沒有被使用的,所有可以通過3x圖在進(jìn)行iPhone12的啟動圖設(shè)置,而iPhone12機(jī)型的寬高比是固定的,所以這里面設(shè)置好也不會出現(xiàn)圖片被拉伸或者顯示不全等問題。

iPhone12系列開發(fā)尺寸:
12 min 375 * 812
12 AND 12 Pro 390 * 844
12 Pro Max 428 * 926

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容