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

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

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

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

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

??

[[347051]]

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

??

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

二、優(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，負責(zé)統(tǒng)一管理響應(yīng)式狀態(tài)、處理布局邏輯、裁剪映射數(shù)據(jù)等。

??

響應(yīng)式SDK在App中的位置

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

2、響應(yīng)式SDK

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

響應(yīng)式狀態(tài)提供了當(dāng)前是否開啟響應(yīng)式、響應(yīng)式布局尺寸類型、當(dā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)標記當(dāng)前的響應(yīng)式狀態(tài)，分別表示響應(yīng)式開啟關(guān)閉狀態(tài)，當(dāng)前尺寸類型及具體屏幕類型，一般業(yè)務(wù)方只需要獲取是否是響應(yīng)式設(shè)備狀態(tài)，對于在不同寬度下頁面布局不一致的業(yè)務(wù)方可以通過尺寸類型狀態(tài)進行區(qū)分適配，而對于需要具體知道當(dāng)前屏幕狀態(tài)的業(yè)務(wù)方可以通過屏幕類型獲取，屏幕類型只包含當(dāng)前iOS設(shè)備已支持的屏幕狀態(tài)，隨著設(shè)備類型的豐富，如出現(xiàn)折疊屏等，屏幕類型會作相應(yīng)擴展。每當(dāng)設(shè)備旋轉(zhuǎn)或用戶開啟分屏?xí)r，響應(yīng)式SDK都會在系統(tǒng)回調(diào)中更新當(dāng)前響應(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ù)當(dāng)前的響應(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ù)當(dāng)前屏幕寬度計算出適配后的組件列數(shù)，可用如下公式表達：

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

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

??

首頁Feed流隨屏幕寬度改變而變化列數(shù) 

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

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

??

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

在以上公式中調(diào)整標準屏幕寬度及組件放大scale即可得到適配效果較好的通用布局規(guī)則，經(jīng)過設(shè)計同學(xué)在各種設(shè)備尺寸下的調(diào)整總結(jié)，當(dāng)前優(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ù)、寬度等，當(dāng)監(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ù)約組件難以較好的適配，映射為不帶播放的預(yù)約組件適配

優(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ù)流程

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)相對布局后，每當(dāng)屏幕尺寸變化時響應(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)布局接口。

??

優(yōu)酷響應(yīng)式大圖

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

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

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

??

優(yōu)酷Universal版首頁豎屏、橫屏、分屏效果 

??

優(yōu)酷Universal版播放頁豎屏、橫屏、分屏效果

四、總結(jié)

響應(yīng)式能力是多端投放能力的第一步，優(yōu)酷實現(xiàn)響應(yīng)式布局后對開發(fā)、設(shè)計和產(chǎn)品都提出了更高的要求，同時鑒于iPad低端設(shè)備占比較高，業(yè)務(wù)開發(fā)過程中不僅要考慮通投能力，更要求App始終保持更高的性能和穩(wěn)定性，這是我們持續(xù)在努力的。

蘋果2020年底將推出基于ARM架構(gòu)的MacBook，也有媒體曝光，蘋果正在申請折疊屏相關(guān)的專利，相信未來蘋果設(shè)備的尺寸會越來越豐富，App適配提效是繞不開的話題，而優(yōu)酷響應(yīng)式的開發(fā)極大擴展了iPhone版App的適用場景，是解決多種設(shè)備支持的更好途徑，為適應(yīng)未來更復(fù)雜的設(shè)備場景打下堅實基礎(chǔ)。

【本文為51CTO專欄作者“阿里巴巴官方技術(shù)”原創(chuàng)稿件，轉(zhuǎn)載請聯(lián)系原作者】 

??戳這里，看該作者更多好文??