上一章： 優酷APP響應式布局在分發場景的落地 | 《優酷響應式布局技術全解析》第四章>>> 下一章： 優酷響應式在消費場景的落地 iOS | 《優酷響應式布局技術全解析》第六章>>> 作者| 阿裡巴巴文娛技術 吉歐
一、背景
随着時代的發展，硬體裝置的類型也是百花齊放，出現了各種各樣的大屏裝置（pad、折疊屏、車機）及螢幕模式（多屏、分屏），是以對于大屏下響應式的适配很有必要，視訊播放場景的适配在整體适配中屬于比較特殊的一塊，既要兼顧播放渲染，又要照顧橫豎屏切換對适配的影響，同時還要處理各種播放内容展示的處理。本文介紹一下優酷播放場景在響應式适配的一些困難及實作方案。
二、業務介紹
播放頁作為使用者視訊消費場景的落地頁，主要提供包括視訊播放、内容介紹、互動、推薦等。頁面類别及頁面元素都比較複雜，頁面類别有：劇集、電影、綜藝、少兒、體育、新知等；其元素主要有：元件、半屏、tab等。
常見的幾種頁面類别及元素如下圖所示：
播放頁首屏
讨論tabtab展示優酷APP響應式布局在消費場景的落地Android | 《優酷響應式布局技術全解析》第五章
綜藝播放頁
三、播放場景的特殊性
雖然響應式sdk提供了響應式的Activity和Fragment,兩者都通過onResponsiveLayout來回調響應式的變化，進而根據回調的響應式狀态可以判斷是否分屏展示，同時響應式sdk提供了響應式寬度計算及元件間距計算等，可以複用在播放頁，但是對于播放頁的特殊性還是需要單獨處理。
響應式在播放頁，相對于其他場景的特殊性：
1、播放比例适配
需要考慮播放頁在一定螢幕寬度下的展示效果，不能直接按手機上一樣展示，這樣會很寬，并且播放比例也會有問題，是以需要考慮在螢幕寬度達到一定寬度時，分為兩部分的模式以及半屏如何打開；
2、多設配、多模式适配
響應式包含很多的模式，比如華為平行視界、多應用分屏（可拖動），也包含不同的裝置，比如折疊屏、pad（橫豎切換），都需要考慮不同場景下如何适配，尤其在橫豎轉屏之後的處理，尤為複雜。對于不同元件在半屏以及首屏個數、寬度的展示也需要處理；
3、橫豎進入适配
裝置可以橫着進入播放頁也可以豎着進入播放頁，對于兩種不同進入方式，以及退出背景之後切換進入方式以後，狀态儲存的處理，也需要适配。
四、适配架構
基于以上三點，如何去解決這些特殊問題以及更好的使用者體驗，整體适配主要依賴于以下的架構來實作。
播放頁響應式是在統一架構及響應式SDK基礎上實作的，繼承于響應式的Activity或Fragment，進而可以通過響應式回調來處理一些布局及邏輯展示問題。
在整個上層，實作一套響應式管理類，統一處理響應式下分屏狀态，頁面尺寸及元件根據不同尺寸适配的個數，大小等。最上層則是具體的元件，半屏及分屏政策的實作。
五、适配具體方案
播放頁整體頁面繼承自對應的響應式頁面Activity，進而可以收到響應式變化回調onResponsiveLayout()，達到對整個響應式回調的監聽，對于不同的頁面區域采用Fragment管理的方式。
1、頁面适配：分屏實作
為了解決提到的特殊性播放比例适配的問題，采用在橫屏模式下，播放頁采用左右分屏的模式，将評論移到了右側屏部分，這樣可以讓使用者觀看更多的有趣評論，以增加内容互動性；播放頁橫屏下展示效果如下圖：
同時半屏也從會在右側打開，既不影響播放，也不會覆寫左側區域。比如簡介半屏，效果如下：
具體實作方案：
1）根據适配比例及内容配置設定，建議将左右兩邊分别拆分成6:4的大小，左邊占整個螢幕的60%，右側評論部分占整個螢幕的40%，來友善适配内容展示達到最佳的影片播放效果，通過Guideline來進行分割。
<android.support.constraint.Guideline
android:id="@+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.6"/> 然後兩側采用不同的Fragment來加載，在收到頁面響應式變化回調之後，處理是否展示右側部分邏輯
@Override
public void onResponsiveLayout(Configuration configuration, final int responsiveLayoutState, boolean responsiveLayoutStateChanged) {
//響應式狀态有變化
if (responsiveLayoutStateChanged) {
//大屏狀态展示右側區域
if (responsiveLayoutState == RESPONSIVE_LARGE_LAYOUT) {
//展開右側區域
showExpandScreen();
}else{
//隐藏右側區域
hideExpandScreen();
}
} else {
//響應式沒發生變化不做展開右側處理
}
} 2）分屏半屏處理
半屏即播放頁可以更多内容展示的一個容器，會覆寫在原來的視訊播放頁部分。在橫屏下半屏展示在右側區域（如上圖），在豎屏下，半屏在播放器下部分展示（如下圖），是以對于半屏其實有三種狀态展示，小屏下半屏，大屏橫屏下半屏，大屏豎屏下半屏；
在半屏适配時，采用不同view加載的方式，小屏下展示半屏：由于小屏下是一個單獨的Fragment，是以隻考慮在内部計算半屏的容器即可以實作播放器下部展示；
對于大屏下，是另一個Fragment，需要考慮在橫屏及豎屏下有不同的展示，是以采用兩個view的方式，不同的展開狀态會有不同的半屏view，在這個不同的view上add半屏的fragment，這個時候需要注意view的管理，不能出現布局加載錯亂的問題，導緻addview的時候出現NPE的問題。
//響應式半屏處理
if (DetailUtil.isSurportResponsive(getActivity())) {
//有右側展開區域，則采用右側區域view
if (ResponseLayoutManager.getHasGuideLine()){
mContainerLayout = mRootView.getRootView().findViewById(R.id.responsive_half_screen_land_container);
} else {
//沒有右側展開區域，直接調用豎直方向view
mContainerLayout = mRootView.getRootView().findViewById(R.id.responsive_half_screen_portrait_container);
}
mContainerLayout.setVisibility(View.VISIBLE);
} else {
//非響應式采用直接fragment的veiw
mContainerLayout = mRootView.findViewById(R.id.half_screen_container);
} 半屏效果
2、元件适配
播放頁有近20+個元件，不可能每個元件都适配一次，是以最重要的是如何利用統一架構實作最小邏輯處理。基于此目标，将元件分為三類适配：
1） 帶有半屏元件統一處理
即該元件可以打開半屏，因為之前已經提到過在大屏橫屏下半屏會在右側展開區域展示，而右側區域的大小随着裝置，大屏模式的不同，寬度會不同，根據響應式sdk提供的容器寬度計算元件列數的方法（可參考響應式sdk的列數适配），處理後效果如下，左邊螢幕選集展示9個，但是在右側部分因為容器較小，展示6個，其他元件類似。在螢幕變化時，布局個數會做出相應的變化以适配不同的螢幕。
2）元件個數根據螢幕大小适配
比如相關雙列（手機屏預設展示2列），banner（預設展示2個），這類元件之前已經寫死了個數，是以在處理的時候，需要根據螢幕的變化來更改展示的個數，比如相關雙列，會随着螢幕的變化在2列和3列之間變化（多屏下可以拖動改變螢幕比例）其他類似，效果如下：
三列
雙列
在手機上會顯示2列，在大屏下會根據計算，适配成3列。
3、全屏承接頁适配
全屏展示
全屏适配主要問題在于橫屏下分兩個區域時候會出現問題：由于橫屏下分兩個Fragment來處理，是以在這種狀态下直接在Fragment上打開另外一個view，會出現這個view隻展示在一側。比如下載下傳按鈕會打開一個新的Fragment，而此時下載下傳是在左側區域的Fragment中，如果直接打開則打開的頁面隻在左側區域展示下載下傳清單，右側還是評論,這樣不符合預期。
是以，在這種模式下，需要增加一個全屏的view，用這個view來加載打開的Fragment，而如果在橫屏或者小屏下，還用左側區域fragment的view來加載。
這個處理同樣要管理好view的使用，防止NPE的錯誤，是以在架構圖中的響應式管理類尤為必要，隻有通過這個響應式管理類才能知道目前頁面狀态以及相關的操作。
4、播放器适配
播放器部分的适配相對比較簡單，因為之前已經做過相關尺寸的處理，具體存在的問題有：
1) pad很多都是在螢幕上的挖孔屏，是以适配時要留出挖孔位置，同時注意要處理兩個部分，因為螢幕是可以旋轉的左上角及右下角的位置都應該注意處理；
2) 播放view渲染的處理，在響應式下，螢幕的大小會随時修改的，是以要能順暢播放，需要做到播放view可以支援根據父view的大小，随時渲染視訊的大小。
六、總結
以上列出了播放頁在适配的時候遇到的一些主要問題及解決方案，響應式适配的細節處理尤為重要，下面總結一些适配經驗：
1、 尺寸實時計算：要根據一套尺寸計算算法能夠适配多種場景，并且是實時的計算适配。不能根據裝置來判斷處理，而是要根據尺寸來判斷處理邏輯；
2、 統一管理：一套完善的管理類來管理狀态及記錄目前螢幕狀态，這樣才能更好的支援上遊邏輯。避免造成各種狀态錯亂問題；
3、 提煉共性，元件化思維：對于具有共性的子產品或者業務比如元件，需要思考從中找出共性，盡可能做到一個計算處理就能達到整個子產品的處理，避免每個都進行修改處理，增加維護成本；
4、 未來，大屏的右半屏将“大有可為”：在大屏上右半屏可以做更多的事，讓使用者看到更多想看的内容，提供更多的内容曝光及選擇。