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

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

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

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

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

??

[[347051]]

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

??

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

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

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

??

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

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

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

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

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

??

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

??

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

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

??

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

??

這種設(shè)計(jì)的主要原因是，當(dāng)一個(gè)App支持分屏后，就不再單獨(dú)占用整個(gè)屏幕，當(dāng)另一個(gè)App同時(shí)運(yùn)行時(shí)，同一塊屏幕不可能出現(xiàn)一個(gè)橫屏、另一個(gè)豎屏。此類(lèi)問(wèn)題沒(méi)有完美的解決方案，為了保證用戶體驗(yàn)，支持分屏的App必須所有頁(yè)面適配所有屏幕方向，這也體現(xiàn)了蘋(píng)果對(duì)用戶體驗(yàn)的極致追求，參見(jiàn)DeveloperForums中開(kāi)發(fā)人員的討論：https://developer.apple.com/forums/thread/19578

2、響應(yīng)式SDK

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

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

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

響應(yīng)式SDK聲明了YKRLLayoutStyle、YKRLLayoutSizeType、YKRLLayoutScreenType三種枚舉狀態(tài)標(biāo)記當(dāng)前的響應(yīng)式狀態(tài)，分別表示響應(yīng)式開(kāi)啟關(guān)閉狀態(tài)，當(dāng)前尺寸類(lèi)型及具體屏幕類(lèi)型，一般業(yè)務(wù)方只需要獲取是否是響應(yīng)式設(shè)備狀態(tài)，對(duì)于在不同寬度下頁(yè)面布局不一致的業(yè)務(wù)方可以通過(guò)尺寸類(lèi)型狀態(tài)進(jìn)行區(qū)分適配，而對(duì)于需要具體知道當(dāng)前屏幕狀態(tài)的業(yè)務(wù)方可以通過(guò)屏幕類(lèi)型獲取，屏幕類(lèi)型只包含當(dāng)前iOS設(shè)備已支持的屏幕狀態(tài)，隨著設(shè)備類(lèi)型的豐富，如出現(xiàn)折疊屏等，屏幕類(lèi)型會(huì)作相應(yīng)擴(kuò)展。每當(dāng)設(shè)備旋轉(zhuǎn)或用戶開(kāi)啟分屏?xí)r，響應(yīng)式SDK都會(huì)在系統(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會(huì)根據(jù)當(dāng)前的響應(yīng)式狀態(tài)輸出合適的布局列數(shù)等，對(duì)于每一個(gè)布局規(guī)則，響應(yīng)式SDK中都有相應(yīng)的布局適配邏輯，響應(yīng)式布局規(guī)則滿足優(yōu)酷App整體UI規(guī)范，業(yè)務(wù)方直接指定自己所需要的規(guī)則即可，除少數(shù)特殊規(guī)則之外，大部分布局規(guī)則都用于組件列數(shù)和組件寬度布局，此類(lèi)響應(yīng)式布局規(guī)則中會(huì)指定一個(gè)標(biāo)準(zhǔn)寬度，并根據(jù)組件原始布局列數(shù)和標(biāo)準(zhǔn)寬度計(jì)算出組件標(biāo)準(zhǔn)寬度，進(jìn)而根據(jù)當(dāng)前屏幕寬度計(jì)算出適配后的組件列數(shù)，可用如下公式表達(dá)：

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

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

??

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

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

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

??

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

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

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

??

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

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

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

??

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

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

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

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

??

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

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

??

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

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

??

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

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

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

??

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

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

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

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

??

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

??

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

四、總結(jié)

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

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

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

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