上一章： 優酷APP響應式布局技術之iOS篇 | 《優酷響應式布局技術全解析》第三章>>> 下一章： 優酷APP響應式布局在消費場景的落地Android | 《優酷響應式布局技術全解析》第五章>>> 作者| 阿裡巴巴文娛技術 十朋
一、背景介紹
近年來，移動裝置一直向大屏、輕便方向發展，大屏手機、Pad、折疊屏、iPad分屏等越來越多的應用到日常生活中，今年蘋果公司官宣将推出基于ARM架構的自研MacBook電腦處理器，移動端APP也将自動支援在MAC上運作。一套代碼在不同尺寸裝置上運作将成為一種新趨勢。為了獲得更好的使用者體驗，優酷需要适配多螢幕不同尺寸。在大螢幕下調整内容布局以最優的顯示方式程現内容，是基本的适配規則。
二、業務介紹
優酷業務場景衆多，其中最核心的兩個業務場景是：内容消費場和内容分發場。内容消費指的是使用者對視訊内容産生播放行為；内容分發是指引導使用者進播放的頁面，有多種次元的表現形式。
優酷業務分發場景比較複雜，我們對業務進行了梳理，大緻可分為幾大類：
1、核心分發頁面，首頁、頻道、大劇大綜，承接了分發場景的大部分業務：
2、二級分發，搜尋、各類片單合集及Feed流頁面：
3、功能性頁面,頻道管理、各類浮層彈窗：
技術選型同時考慮性能、動态、研發成本等多方面因素。對于核心的分發場景來說，用Native原生渲染能達到最好的性能體驗；對于一些實時性、動态性較強的業務來說，我們也有綜合運用Weex、H5、小程式的技術棧。
三、響應式适配
移動端的裝置種類繁多，保證在任何裝置上都有最佳的體驗，不是一件容易的事情。優酷響應式的适配工作，是按業務進行劃分的。每一類業務用不同的渲染架構實作，需要有不同的處理方式。本節主要介紹原生渲染架構下的接入方式。
下圖是響應式整體架構圖，業務層響應式适配基于SDK基礎之上，響應式SDK提供了基礎響應布局能力，拉通各個業務方不同頁面的适配規則，確定了适配效果的一緻性。
對于Android來說，一般采用LinearLayout/RelativeLayout等布局容器，内部的元素本身具備自适應(AutoLayout)性；
對于iOS，優酷内部存在較多的Frame布局，不具備自适應能力。 View容器層面首先需要改造具備内部自适應能力：即子元素可以随着父控件的尺寸變化而變化。
目前iOS開發自适應有幾種方案：官方AutoResizing、官方AutoLayout、Facebook Masonry架構（詳見技術篇《優酷響應式技術實作-iOS篇》介紹）。經過技術調研，針對優酷場景選擇官方AutoResizing方案适配，成本最小。
1、頁面布局
當螢幕的寬度發生變化時，頁面的布局相應的調整，以達到最佳的展示狀态。分發場适配時不存在多容器分屏的情況，是以頁面容器的接入比較簡單，保證頁面容器是自适應模式即可。
對于Android，無需特殊處理，iOS則需要設定頁面容器為自适應模式：設定容器View的autoresizingMask的屬性為UIViewAutoresizingFlexibleWidth|UIViewAutoresizingFlexibleHeight。
下圖是多種螢幕狀态下的頁面容器變化顯示效果：
1）橫豎屏切換
2）分屏模式
3）折疊屏
2、元件布局
元件布局适配原則：頁面容器尺寸發生變化時，動态調整元件的列數以及坑位的尺寸，以達到視覺上的最佳展示體驗。
元件的種類繁多，優酷原生标準庫元件大約150多個。按元件的布局類别，可以劃分為幾大類：網格布局元件、輪播布局元件、橫滑布局元件、瀑布流布局元件。響應式SDK對這些基礎布局均提供了底層适配支援。
1）輪播布局
輪播圖在小裝置下（手機）展示一個卡片，在大裝置下（pad)展示一個卡片會特别大，我們對市面上主流的pad裝置進行了采樣，最終總結出一個經驗值: 放大常量scale=1.2，即卡片寬度放大1.2倍體驗最好。輪播圖接入規則之後的展示效果如下圖：
首頁輪播圖支援浮層視訊廣告，在Pad下增加一個半透明背景，廣告居中展示：
2）網格布局
對于網格布局，在不同的尺寸頁面下，根據頁面的實體寬度動态适配，顯示為不同的列數。針對優酷業務，響應式SDK擴充了網格布局的基礎能力，業務方不需要接入即可實作自适應。橫豎屏下網絡布局展示列數有所不同：
3）橫滑布局
針對橫滑布局，響應式提供一了個計算公式，用于動态變換元件在螢幕中的列數(詳見技術篇《優酷響應式技術實作-iOS篇》中的介紹)，公式中入參為“手機元件列數”。優酷中有十多種類型元件基于橫滑布局，以下列舉幾例。
橫滑SCG元件，手機元件列數為3，Pad适配效果如下：
明星頭像元件，手機元件列數為4，Pad适配效果如下：
正在看元件，手機元件列數為2.5，Pad适配效果如下：
3、特殊區域适配
頂部導航、底bar、多TAB，是頁面的特殊部分，需要業務方跟據響應式狀态的變化動态調整布局。
1）頂導适配：
大屏頂導部分适配，在豎屏模式下保持和手機同樣的布局，中間部分拉伸展示；
橫屏模式下，由于豎向區域變小，為了透出更多的内容，搜尋框和多TAB改為左右排版。下圖是兩種狀态的适配效果：
2）多TAB區域适配:
内容固定居左，橫屏&豎屏下固定布局，大小尺寸不變居左展示。
3）彈框、浮層适配：
内容固定居中，在橫屏豎屏下比例不變 保證内容居中展示。
4）底導适配：
針對這種情況，采用拉伸布局，内容元素在相對寬度内均分适配。
4、特殊業務适配
使用H5、Weex、小程式架構渲染的頁面，考慮到适配的複雜度，我們選擇一種即能保證業務正常運轉同時能快速适配的折衷方案：采用一種簡單的适配原則：對于大屏寬度取螢幕的一半居中展示；裝置在折疊狀态、分屏狀态、浮窗狀态時填充容器寬度：
頻道管理适配：Pad下設定最大寬度300dp，當容器寬度小于300dp時，填滿容器寬度（如分屏、浮窗模式）。
有一些業務隻支援一個螢幕方向，當旋轉到不支援的方向時，給使用者一個友好的提示，如少兒繪本頁面：
5、資料加工
某些元件在iPad、折疊屏等大尺寸裝置上響應式适配之後，顯示存在問題（如下圖），如寬度過大、螢幕留白現象。 接下來闡述分發場是如何利用資料加工手段做适配的。
資料加工是指對後端傳回的資料做預處理，以達到在大尺寸裝置下元件最佳展示的目的。技術文章《優酷響應式技術實作-Android篇》有更詳盡的介紹。
1）資料映射
解決什麼問題
存在一些帶互動複雜的元件或者Pad上适配效果較差的元件，可以直接映射成其他已适配的元件。降低複雜元件的适配成本，埋點資料字段保持不變，減少對算法埋點資料的影響。
效果
部分資料映射的元件如下：
2）資料合并
一些元件适配之後會填充整個螢幕寬，效果不好。這時選擇把目前元件資料合并到其下方的元件内，變為下方元件的一部分資料源，以達到顯示效果最佳的适配目的。
3）資料補全
以帶換一換的元件為例。後端下發總數量18條，每頁的資料為6條，手機上展示3列2行，正好填充一頁，但在pad下會空出兩個位置（如下圖右），這時要調整每頁的資料，達到資料補全的目的。在pad下調整一頁8條即可。
還有一種情況，後端下發的數量不足一頁，無法鋪滿螢幕的寬度。解決這類問題，服務端在Phone端資料的基礎上，多下發部分業務資料，用戶端根據具體的螢幕尺寸，動态調整顯示的個數，確定顯示效果。
例如：下圖中手機上顯示2列3行，共6條資料，到了Pad豎屏上顯示3列2行，共6條資料，到了Pad橫屏上會補全2條資料，顯示4列2行，共8條資料。
4）資料過濾
架構層還提供了資料過濾的能力。如果某些元件适配較複雜，可以考慮折衷的方案暫時過濾掉資料，讓業務先跑起來。
分發場景中有一些非核心鍊路的元件适配較複雜，我們選擇先過濾掉，保證APP的正常疊代發版，後續版本再逐漸适配。
四、适配效果及總結
優酷首頁、頻道頁等核心鍊路分發場景，經過适配達到了比較好的效果，頁面的展示會根據不同的尺寸、分屏、浮窗、折疊等裝置狀态，動态變換内容布局，而不是等比放大，提升了分發效率、為使用者提供更佳的分發體驗。