怎么讓一套代碼適配所有iOS設(shè)備尺寸

怎么讓一套代碼適配所有iOS設(shè)備尺寸，相信很多沒有經(jīng)驗的人對此束手無策，為此本文總結(jié)了問題出現(xiàn)的原因和解決方法，通過這篇文章希望你能解決這個問題。

響應(yīng)式是基于同一套代碼，開發(fā)一個APP能夠兼容多尺寸、多終端設(shè)備的顯示，能夠動態(tài)調(diào)整頁面的布局以及容器的布局，充分利用當前屏幕的尺寸，為用戶提供更好的瀏覽體驗，提升APP開發(fā)效率和迭代效率。

一 iOS布局尺寸預(yù)研

當下，iOS端的主要尺寸類型有五種：iPhone、iPad豎屏、iPad橫屏、iPad浮窗、iPad分屏。通常，App是按iPhone尺寸開發(fā)的，需要適配剩余的四種iPad尺寸。

iPad橫、豎屏比較常見，旋轉(zhuǎn)設(shè)備即可，比較特殊的是浮窗和分屏模式。自蘋果iPad iOS 9開始，用戶在打開一個應(yīng)用時，從最底部上滑打開Dock，即可拖拽另一個App進入浮窗模式：

在支持分屏的iPad上拖拽到更邊緣的地方即可開啟分屏模式：

二 優(yōu)酷iOS響應(yīng)式方案

響應(yīng)式布局的核心是設(shè)計統(tǒng)一的適配規(guī)則，并在屏幕尺寸發(fā)生變化時按布局規(guī)則重新布局，以適配不同屏幕尺寸，而大多數(shù)App在開發(fā)時一般只有適配iPhone的版本，在通過響應(yīng)式適配更多機型時主要要解決三個方面的問題，即如何獲取、更新響應(yīng)式狀態(tài)以進行對應(yīng)的適配，如何計算在不同屏幕寬度下App內(nèi)容的寬度、列數(shù)等布局參數(shù)，如何進行響應(yīng)式下的數(shù)據(jù)處理以解決較難適配的組件、減少頁面留白等，基于此我們開發(fā)了響應(yīng)式布局SDK，負責統(tǒng)一管理響應(yīng)式狀態(tài)、處理布局邏輯、裁剪映射數(shù)據(jù)等。

1 響應(yīng)式App配置

App除了配置為universal版之外，要支持浮窗或分屏模式還需要進行一些配置：

（1）需要提供LaunchScreen.storyboard作為啟動圖，由于App支持的運行尺寸太多，不再適合用圖片作為啟動圖。

（2）需要在info.plist中配置支持所有屏幕方向：

（3）注意不能勾選Requires full screen配置項或配置UIRequiresFullScreen為YES，如此會聲明App要求全屏運行，自然表示不支持浮窗或分屏：

（4）支持分屏要求App的主Window需要使用系統(tǒng)UIWindow，不能繼承，并且要通過init方法或initWithFrame:[UIScreen mainScreen].bounds方式初始化。

通過以上步驟開啟浮窗、分屏能力后，在App內(nèi)就無法再通過相關(guān)代碼控制設(shè)備方向，以往通過如下代碼可控制ViewController為豎屏，而支持分屏后如下方法系統(tǒng)不再調(diào)用，默認所有ViewController支持所有屏幕方向：

如下強制設(shè)置屏幕方向的黑方法也已失效：

這種設(shè)計的主要原因是，當一個App支持分屏后，就不再單獨占用整個屏幕，當另一個App同時運行時，同一塊屏幕不可能出現(xiàn)一個橫屏、另一個豎屏。此類問題沒有完美的解決方案，為了保證用戶體驗，支持分屏的App必須所有頁面適配所有屏幕方向，這也體現(xiàn)了蘋果對用戶體驗的極致追求。

2 響應(yīng)式SDK

響應(yīng)式狀態(tài)管理

響應(yīng)式狀態(tài)提供了當前是否開啟響應(yīng)式、響應(yīng)式布局尺寸類型、當前布局window尺寸等相關(guān)狀態(tài)量，響應(yīng)式SDK會在屏幕尺寸變化后更新響應(yīng)式狀態(tài)，并通過系統(tǒng)通知和自定義通知機制，通知相關(guān)業(yè)務(wù)方。

// 響應(yīng)式開啟關(guān)閉狀態(tài)
typedefNS_ENUM(NSInteger, YKRLLayoutStyle) {   
    YKRLLayoutStyleNormal =0,        // 響應(yīng)式狀態(tài)關(guān)閉   
    YKRLLayoutStyleResponsive =1,    // 響應(yīng)式狀態(tài)開啟}; 
    
// 響應(yīng)式屏幕尺寸類型，頁面可依據(jù)此類型區(qū)分是否分屏等
typedefNS_ENUM(NSInteger, YKRLLayoutSizeType) {   
    YKRLLayoutSizeTypeS =0,      // eg. phone pad浮窗   
    YKRLLayoutSizeTypeL =1,      // pad   
    YKRLLayoutSizeTypeXL =2,     // 預(yù)留
}; 

// 響應(yīng)式屏幕狀態(tài)類型（一共有十種類型）
typedefNS_OPTIONS(NSUInteger, YKRLLayoutScreenType) {   
    YKRLLayoutScreenTypeUnknown = (1<<0),          //未知   
    YKRLLayoutScreenTypePortrait = (1<<1),         //豎屏全屏
    YKRLLayoutScreenTypeLandscapeLeft = (1<<2),    //橫屏全屏左
    … …
};

響應(yīng)式SDK聲明了YKRLLayoutStyle、YKRLLayoutSizeType、YKRLLayoutScreenType三種枚舉狀態(tài)標記當前的響應(yīng)式狀態(tài)，分別表示響應(yīng)式開啟關(guān)閉狀態(tài)，當前尺寸類型及具體屏幕類型，一般業(yè)務(wù)方只需要獲取是否是響應(yīng)式設(shè)備狀態(tài)，對于在不同寬度下頁面布局不一致的業(yè)務(wù)方可以通過尺寸類型狀態(tài)進行區(qū)分適配，而對于需要具體知道當前屏幕狀態(tài)的業(yè)務(wù)方可以通過屏幕類型獲取，屏幕類型只包含當前iOS設(shè)備已支持的屏幕狀態(tài)，隨著設(shè)備類型的豐富，如出現(xiàn)折疊屏等，屏幕類型會作相應(yīng)擴展。每當設(shè)備旋轉(zhuǎn)或用戶開啟分屏時，響應(yīng)式SDK都會在系統(tǒng)回調(diào)中更新當前響應(yīng)式狀態(tài)，并通知業(yè)務(wù)方響應(yīng)式狀態(tài)的改變。

響應(yīng)式布局規(guī)則

優(yōu)酷響應(yīng)式布局規(guī)則主要包含列數(shù)適配規(guī)則、寬度適配規(guī)則等，比如多列均分組件的列數(shù)在不同屏幕寬度下是可變的，響應(yīng)式SDK會根據(jù)當前的響應(yīng)式狀態(tài)輸出合適的布局列數(shù)等，對于每一個布局規(guī)則，響應(yīng)式SDK中都有相應(yīng)的布局適配邏輯，響應(yīng)式布局規(guī)則滿足優(yōu)酷App整體UI規(guī)范，業(yè)務(wù)方直接指定自己所需要的規(guī)則即可，除少數(shù)特殊規(guī)則之外，大部分布局規(guī)則都用于組件列數(shù)和組件寬度布局，此類響應(yīng)式布局規(guī)則中會指定一個標準寬度，并根據(jù)組件原始布局列數(shù)和標準寬度計算出組件標準寬度，進而根據(jù)當前屏幕寬度計算出適配后的組件列數(shù)，可用如下公式表達：

響應(yīng)式適配列數(shù)(標準屏幕寬度下組件列數(shù)) = (當前屏幕寬度÷(標準屏幕寬度÷標準屏幕寬度下組件列數(shù)×scale))

其中，scale為組件放大參數(shù)，標準屏幕寬度下組件原寬度投放到iPad上會過小，可以通過scale參數(shù)進行適當放大。

對于組件寬度適配，響應(yīng)式規(guī)則會先計算標準屏幕寬度下的組件列數(shù)并進行列數(shù)適配，再通過適配后的列數(shù)計算適配寬度：

響應(yīng)式適配寬度(標準屏幕寬度下組件寬度) = (當前屏幕寬度 - 邊距間距)÷響應(yīng)式適配列數(shù)(標準屏幕寬度÷標準屏幕寬度下組件寬度)

在以上公式中調(diào)整標準屏幕寬度及組件放大scale即可得到適配效果較好的通用布局規(guī)則，經(jīng)過設(shè)計同學(xué)在各種設(shè)備尺寸下的調(diào)整總結(jié)，當前優(yōu)酷中使用的標準屏幕寬度為440dp，scale為1.2倍，適配效果最佳。組件適配邏輯已在響應(yīng)式SDK布局規(guī)則中統(tǒng)一實現(xiàn)，業(yè)務(wù)方直接調(diào)用即可，也方便設(shè)計同學(xué)對整個App的組件適配進行統(tǒng)一調(diào)整。

響應(yīng)式SDK中YKRLCompLayoutManager類封裝了相關(guān)布局邏輯，業(yè)務(wù)方也可通過YKRLCompLayoutAdapterProtocol協(xié)議二次處理，以定制響應(yīng)式布局邏輯，在App統(tǒng)一架構(gòu)中直接調(diào)用YKRLCompLayoutManager的相關(guān)接口即可獲取按照響應(yīng)式規(guī)則計算后的布局參數(shù)，如列數(shù)、寬度等，當監(jiān)聽響應(yīng)式狀態(tài)發(fā)生變化時重新布局即可完成響應(yīng)式布局。

響應(yīng)式數(shù)據(jù)處理

響應(yīng)式數(shù)據(jù)處理包括數(shù)據(jù)映射、數(shù)據(jù)過濾、數(shù)據(jù)合并、數(shù)據(jù)補齊，數(shù)據(jù)處理邏輯兩端一致，詳細介紹可以參見：一個APP如何適配多個Android終端？，下面簡單介紹一下iOS響應(yīng)式數(shù)據(jù)映射的實現(xiàn)。

有些組件無法通過規(guī)則適配不同的屏幕尺寸，比如在手機上占整個屏幕寬度的組件（下圖左側(cè)帶視頻播放預(yù)約組件），如果采用等比放大的適配規(guī)則，在iPad端會顯得過大，此類組件可以映射成相對簡單的組件，以適配不同的屏幕尺寸。

優(yōu)酷采用了統(tǒng)一抽象的數(shù)據(jù)結(jié)構(gòu)，在組件映射方面比較容易實現(xiàn)，只需修改對應(yīng)的組件標志即可。得益于統(tǒng)一架構(gòu)的普遍推廣和使用，我們在統(tǒng)一架構(gòu)內(nèi)添加了組件映射能力，方便各業(yè)務(wù)方調(diào)用，響應(yīng)式SDK中提供了數(shù)據(jù)裁剪映射規(guī)則，業(yè)務(wù)方可以查詢、增加相應(yīng)的裁剪映射規(guī)則。對于未接入統(tǒng)一架構(gòu)的業(yè)務(wù)方則需要業(yè)務(wù)方實現(xiàn)相關(guān)數(shù)據(jù)處理。

3 響應(yīng)式業(yè)務(wù)流程

優(yōu)酷響應(yīng)式業(yè)務(wù)流程兩端一致，響應(yīng)式布局需要進行數(shù)據(jù)處理、響應(yīng)式狀態(tài)管理、觸發(fā)布局等工作，優(yōu)酷響應(yīng)式SDK會在接口返回后處理相關(guān)數(shù)據(jù)，為統(tǒng)一架構(gòu)提供相應(yīng)布局接口，監(jiān)控屏幕尺寸變化并觸發(fā)布局等。

4 優(yōu)酷響應(yīng)式方案落地

iOS開發(fā)中經(jīng)常采用絕對布局，而實現(xiàn)響應(yīng)式的主要工作是將“絕對布局”修改為“相對布局”，接入工作較安卓更為繁瑣。

iOS響應(yīng)式可以按Window->ViewController->容器->組件的層級完成接入。

Window在配置支持分屏后會由系統(tǒng)自動布局，在RootViewController樹中的子ViewController也會隨Window自動布局，而特殊ViewController，如多tab頁面的子ViewController等，未加入RootViewController樹，需要手動修改為相對布局，頁面可通過Autoresizing或監(jiān)聽響應(yīng)式狀態(tài)實現(xiàn)相對布局。

接入統(tǒng)一架構(gòu)的頁面容器由統(tǒng)一架構(gòu)提供，統(tǒng)一架構(gòu)容器的布局列數(shù)管理、布局寬度管理等都已接入響應(yīng)式SDK，為業(yè)務(wù)方接入減少了大量工作，業(yè)務(wù)方只需指定自身所采用的布局規(guī)則即可，ViewController和容器實現(xiàn)相對布局后，每當屏幕尺寸變化時響應(yīng)式SDK會通知容器重新布局，變換組件列數(shù)或?qū)挾鹊龋M件卡片只需要按容器提供的尺寸進行布局即可。

組件卡片內(nèi)一般使用Frame絕對布局，需要修改為相對布局，簡單的布局邏輯可以使用Autoresizing實現(xiàn)，方便快捷，復(fù)雜的布局可以使用AutoLayout或Masonry等自動布局框架（性能較差）實現(xiàn)，也可以在layoutSubviews方法中重新計算布局，業(yè)務(wù)方可以選擇合適的方式實現(xiàn)自動布局，以減少接入成本。

對于未接入統(tǒng)一架構(gòu)的頁面則需要在本頁面布局邏輯中手動接入響應(yīng)式SDK相關(guān)布局接口。

落地過程中發(fā)現(xiàn)許多組件卡片布局時依賴了屏幕寬度，不符合響應(yīng)式開發(fā)規(guī)范，導(dǎo)致適配響應(yīng)式時工作量較大。每一層View只應(yīng)依賴父層View布局，各層View實現(xiàn)相對布局后，每當屏幕尺寸改變時各層View會自動適配，同時容器的組件列數(shù)和尺寸會按響應(yīng)式規(guī)則進行適配，一套代碼即可適配所有屏幕尺寸，實現(xiàn)響應(yīng)式布局。

三 優(yōu)酷響應(yīng)式成果

目前優(yōu)酷全端已具備響應(yīng)式布局的能力，八月份已上線universal版本，一套代碼支持iPhone、iPad豎屏、iPad橫屏、浮窗、各種比例分屏，為用戶提供了更好更豐富的用戶體驗。

看完上述內(nèi)容，你們掌握怎么讓一套代碼適配所有iOS設(shè)備尺寸的方法了嗎？如果還想學(xué)到更多技能或想了解更多相關(guān)內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！