iOS13 / iPhone12---LaunchScreen.storyboard 啟動圖屏幕適配「一」

從2020年4月開始,所有使? iOS13 SDK的 App將必須提供 LaunchScreen,
LaunchImage即將退出歷史舞臺

2020年2月10號更新
評論里很多兄弟反映了幾個問題
1,ios13系統(tǒng)有問題
2,劉海屏上下有黑邊
3,文章的demo是白圖,看不出來是否適配。
本人今天恰逢有新項目,順道來看一下我這個配置,本人未發(fā)現(xiàn)有這三個問題,尤其是第三個,其實看一下準備>的圖就發(fā)現(xiàn)上面的白邊是少了一部分的,說明并沒有留白。
放上xs max的截圖,其他的就懶得放了

1229008-dd504fb8fd741fc7.png

今天拿到新啟動項目的啟動圖,突然想到這條iOS13的要求,恰好最近在適配公司其他的工程到iOS13。像在下這個菜雞當然是先百度為敬。


1229008-19373cfe8fca080d.png

然后吃了一驚,網(wǎng)上竟然幾乎沒有這方面的資料(可能菜到不會百度)即便是有,也是將圖片直接放在LaunchScreen.storyboard進行粗暴的拉伸,就目前蘋果這個機器越來越復雜的情況,很明顯粗暴的拉伸是絕對滿足不了需求的。
1229008-7fd1964cb31c2c46.png

腫么辦呢?通過查閱各方資料,再加上自己思考(自閉)終于找到一個方法,也不知道是不是正規(guī)操作,總之是完成了適配。

準備圖片

1229008-5679f8befe8067dd.jpg.png

1229008-75cf05911e52e2ae.jpg.png

我們準備了目前市場占比較高的手機尺寸的圖片

  • 4.0寸的iPhone5 / 5S / 5C / SE
  • 4.7寸的iPhone6 / 6S / 7 / 8
  • 5.4寸的iPhone12 mini
  • 5.5寸的iPhone6P / 6SP / 7P / 8P
  • 5.8寸的iPhoneX / XS / 11 Pro
  • 6.1寸的iPhoneXR / 11 / 12 / 12 Pro
  • 6.5寸的iPhoneXS Max / 11 ProMax
  • 6.7寸的iPhone12 ProMax
    (后面的命名規(guī)則在欺負強迫癥的人)


    手機型號 屏幕尺寸 屏幕密度 開發(fā)尺寸 像素尺寸 倍圖
    12 ProMax 6.7 inch 458 ppi 428*926 pt 1284*2778 px @3x
    XR/11 6.1 inch 326 ppi 414*896 pt 828*1792 px @2x
    12/12 Pro 6.1 inch 460 ppi 390*844 pt 1170*2532 px @3x
    XS Max/11 ProMax 6.5 inch 458 ppi 414*896 pt 1242*2688 px @3x
    X/XS/11 Pro 5.8 inch 458 ppi 375*812 pt 1125*2436 px @3x
    6P/6SP/7P/8P 5.5 inch 401 ppi 414*736 pt 1242*2208 px @3x
    12 mini 5.4 inch 460 ppi 360*780 pt 1080*2340 @3X
    6/6S/7/8 4.7 inch 326 ppi 375*667 pt 750*1334 px @2x
    5/5S/5C/SE 4.0 inch 326 ppi 320*568pt 640*1136 px @2x
    4/4S 3.5 inch 326 ppi 320*480 pt 640*960 px @2x

為了區(qū)分每個手機屏幕,在圖片上做了標記。

Xcode創(chuàng)建圖片



將所有尺寸的圖片拖入到當前圖片的文件夾下



xcode會自動同步,但是會出現(xiàn)不識別的警告。

然后用編輯器打開Contents.json文件


1229008-dd19c95cadcafc4c.png

將三個數(shù)組字典刪除掉,更換成
    {
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone4.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone5s.png",
      "subtype" : "retina4",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone8P.png",
      "subtype" : "736h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone8.png",
      "subtype" : "667h",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "IPhoneX.png",
      "subtype" : "2436h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone XS Max.png",
      "subtype" : "2688h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone XR.png",
      "subtype" : "1792h",
      "scale" : "2x"
    }

這時我們的xcode就變成了這樣


操作LaunchScreen.storyboard

注意: 布局的時候,上下需要選擇邊界view,默認是SafeArea
然后圖片image填上我們剛才創(chuàng)建的圖片名。


注意:在我們敲入名字的時候,可能會出現(xiàn)圖片不識別的情況,xcode11現(xiàn)在敲入圖片的時候已經(jīng)會提示了,也不會出現(xiàn)提示,在json文件中加上前面這段空狀態(tài)或者有一張圖就行,意思一下,原理是什么不知道,大佬可以評論一下解答,多謝

    {
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhone4.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "1x"
    }

這樣就會有提示,且圖片不在為大問號。


運行測試






iPhone12系列啟動頁適配(僅供參考)

在 iPhone 12 以前,content.json中配置好相應的屏幕尺寸之后(如上),Xcode 會自動匹配相應的設備。而到目前為止,Xcode 12.2 不會對iPhone 12,iPhone 12 Pro, iPhone 12 Pro Max 這三個機型做自動精準匹配。所以,只能加入通用 2X、3X 圖。
具體做法:
1、選中對應的imageSet,展開右側(cè)欄,勾選 “Universal”;
2、圖片區(qū)域會多出一組 Universal 的圖片位置,拖入對應的圖片;12系列的尺寸在上方有


????????????????????鼓掌鼓掌??????????????????

附:【使用lunchScreen.xib清除之前的緩存】

作者郵件:zhangxmsy@163.com, 有問題聯(lián)系。

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

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

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