如何讓一套代碼適配所有iOS設備尺寸？

作者：阿里技術 2020-10-19 10:35:43

隨著移動互聯網設備和技術的發展，各種移動設備屏幕尺寸層出不窮，折疊屏、分屏、懸浮窗等等，面對越來越多樣的屏幕，如果為每種尺寸單獨進行適配，不僅費時費力，還會增加端側代碼的開發與維護壓力。

????隨著移動互聯網設備和技術的發展，各種移動設備屏幕尺寸層出不窮，折疊屏、分屏、懸浮窗等等，面對越來越多樣的屏幕，如果為每種尺寸單獨進行適配，不僅費時費力，還會增加端側代碼的開發與維護壓力。如何讓一套代碼適配所有尺寸變化，增強App的通用能力?阿里巴巴文娛技術氚雨將分享優酷APP在iOS響應式布局技術上的實踐和落地。

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

一、iOS布局尺寸預研

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

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

[[347051]]

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

其中浮窗模式所有升級iOS 9的設備都支持，分屏模式只有最新版的硬件設備iPad mini 4、iPad Air 2及iPad Pro支持：設備浮窗分屏

設備	浮窗	分屏
iPad mini 2	?
iPad mini 3	?
iPad mini 4	?	?
iPad Air	?
iPad Air 2	?	?
iPad Pro	?	?

二、優酷iOS響應式方案

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

響應式SDK在App中的位置

1、響應式App配置

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

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

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

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

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

通過以上步驟開啟浮窗、分屏能力后，在App內就無法再通過相關代碼控制設備方向，以往通過如下代碼可控制ViewController為豎屏，而支持分屏后如下方法系統不再調用，默認所有ViewController支持所有屏幕方向：

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

這種設計的主要原因是，當一個App支持分屏后，就不再單獨占用整個屏幕，當另一個App同時運行時，同一塊屏幕不可能出現一個橫屏、另一個豎屏。此類問題沒有完美的解決方案，為了保證用戶體驗，支持分屏的App必須所有頁面適配所有屏幕方向，這也體現了蘋果對用戶體驗的極致追求，參見DeveloperForums中開發人員的討論：https://developer.apple.com/forums/thread/19578

2、響應式SDK

響應式狀態管理

響應式狀態提供了當前是否開啟響應式、響應式布局尺寸類型、當前布局window尺寸等相關狀態量，響應式SDK會在屏幕尺寸變化后更新響應式狀態，并通過系統通知和自定義通知機制，通知相關業務方。

// 響應式開啟關閉狀態 
 typedefNS_ENUM(NSInteger, YKRLLayoutStyle) {    
     YKRLLayoutStyleNormal =0,        // 響應式狀態關閉    
     YKRLLayoutStyleResponsive =1,    // 響應式狀態開啟};  
      
 // 響應式屏幕尺寸類型，頁面可依據此類型區分是否分屏等 
 typedefNS_ENUM(NSInteger, YKRLLayoutSizeType) {    
     YKRLLayoutSizeTypeS =0,      // eg. phone pad浮窗    
     YKRLLayoutSizeTypeL =1,      // pad    
     YKRLLayoutSizeTypeXL =2,     // 預留 
 };  
  
 // 響應式屏幕狀態類型（一共有十種類型） 
 typedefNS_OPTIONS(NSUInteger, YKRLLayoutScreenType) {    
     YKRLLayoutScreenTypeUnknown = (1<<0),          //未知    
     YKRLLayoutScreenTypePortrait = (1<<1),         //豎屏全屏 
     YKRLLayoutScreenTypeLandscapeLeft = (1<<2),    //橫屏全屏左 
     … … 
 };

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

響應式布局規則

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

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

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

首頁Feed流隨屏幕寬度改變而變化列數

首頁Feed流隨屏幕寬度改變而變化列數對于組件寬度適配，響應式規則會先計算標準屏幕寬度下的組件列數并進行列數適配，再通過適配后的列數計算適配寬度：

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

橫滑組件在不同屏幕寬度下的組件寬度變化

在以上公式中調整標準屏幕寬度及組件放大scale即可得到適配效果較好的通用布局規則，經過設計同學在各種設備尺寸下的調整總結，當前優酷中使用的標準屏幕寬度為440dp，scale為1.2倍，適配效果最佳。組件適配邏輯已在響應式SDK布局規則中統一實現，業務方直接調用即可，也方便設計同學對整個App的組件適配進行統一調整。

響應式SDK中YKRLCompLayoutManager類封裝了相關布局邏輯，業務方也可通過YKRLCompLayoutAdapterProtocol協議二次處理，以定制響應式布局邏輯，在App統一架構中直接調用YKRLCompLayoutManager的相關接口即可獲取按照響應式規則計算后的布局參數，如列數、寬度等，當監聽響應式狀態發生變化時重新布局即可完成響應式布局。

響應式數據處理

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

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

帶視頻播放的預約組件難以較好的適配，映射為不帶播放的預約組件適配

優酷采用了統一抽象的數據結構，在組件映射方面比較容易實現，只需修改對應的組件標志即可。得益于統一架構的普遍推廣和使用，我們在統一架構內添加了組件映射能力，方便各業務方調用，響應式SDK中提供了數據裁剪映射規則，業務方可以查詢、增加相應的裁剪映射規則。對于未接入統一架構的業務方則需要業務方實現相關數據處理。 3 響應式業務流程

3、響應式業務流程

優酷響應式業務流程兩端一致，響應式布局需要進行數據處理、響應式狀態管理、觸發布局等工作，優酷響應式SDK會在接口返回后處理相關數據，為統一架構提供相應布局接口，監控屏幕尺寸變化并觸發布局等。

4、優酷響應式方案落地

iOS開發中經常采用絕對布局，而實現響應式的主要工作是將“絕對布局”修改為“相對布局”，接入工作較安卓更為繁瑣。

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

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

接入統一架構的頁面容器由統一架構提供，統一架構容器的布局列數管理、布局寬度管理等都已接入響應式SDK，為業務方接入減少了大量工作，業務方只需指定自身所采用的布局規則即可，ViewController和容器實現相對布局后，每當屏幕尺寸變化時響應式SDK會通知容器重新布局，變換組件列數或寬度等，組件卡片只需要按容器提供的尺寸進行布局即可。

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

對于未接入統一架構的頁面則需要在本頁面布局邏輯中手動接入響應式SDK相關布局接口。

優酷響應式大圖

三、優酷響應式成果

落地過程中發現許多組件卡片布局時依賴了屏幕寬度，不符合響應式開發規范，導致適配響應式時工作量較大。每一層View只應依賴父層View布局，各層View實現相對布局后，每當屏幕尺寸改變時各層View會自動適配，同時容器的組件列數和尺寸會按響應式規則進行適配，一套代碼即可適配所有屏幕尺寸，實現響應式布局。三優酷響應式成果

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