華為 5G 新品釋出會上，Mate X 正式亮相，淘寶也作為重點展示應用出現在釋出會的 PPT 上，同時也成為折疊屏生态聯盟應用矩陣的第一位。
現場華為折疊屏上的淘寶多任務示範
伴随手淘技術團隊對華為折疊屏适配工作的展開。半年前還隻是概念方案的分屏設計方案已正式實作。華為折疊屏上的淘寶已全面支援分屏多任務，以後商品比價、邊逛邊聊更加輕松便捷，為大家帶來不一樣的購物體驗。
華為折疊屏形态簡介
華為mate x螢幕形态分為三種：
- 展開态 顯示比例8:7.1（分辨率1536x2200）
- 折疊态正面屏 顯示比例19.5:9（分辨率2480x1148）
- 折疊态背面屏 顯示比例25:9（分辨率2480x892）
使用者可以在三種形态上進行随意切換，是以第一步需要保證手淘在三種螢幕形态下的主功能沒問題。
折疊屏适配原則
- 應用不在螢幕上不留黑邊（Aspect-ratio最小最大比例支援,最小寬高比 1.0，最大寬高比 2.4）
- 螢幕切換、分屏 Switch/Resize 操作不能有 Crash/ANR
- 螢幕切換、分屏 Switch/Resize 操作後布局正常（無内容缺失/重疊等）
- 螢幕切換、分屏 Switch/Resize 操作 Activity 盡量不 Restart
- Activity支援Multi-Resume（分屏應用失去焦點視訊播放不停止/再次播放不重放等）
折疊屏适配點
允許改變應用尺寸。要适配折疊屏，首先是要讓應用支援動态改變尺寸，需要在 menifest 中的 Application 或對應的 Activity 下聲明。
<activity
android:name="com.test..TestActivity"
android:resizeableActivity="true"
android:configChanges="orientation|screenSize|keyboardHidden"
android:screenOrientation="portrait"
android:exported="false" 在 Manifest 檔案的 節點中增加 資料，設定最大/最小支援比例。
<meta-data android:name="android.max_aspect" android:value="2.4" />
<meta-data android:name="android.min_aspect" android:value="1.0" /> APP 支援 Multi-Resume（Android P 開始支援），在Manifest 檔案的節點中增加 資料， 在設定了該中繼資料後，應用在分屏模式下失去焦點後不會收到 onPause() 回調，如果需要知道使用者“焦點”是否還在應用上，使用 onWindowFocusChanged() 回調判斷。
<meta-data android:name="android.allow_multiple_resumed_activities" android:value="true" /> Activity 支援顯示動态尺寸/比例變化不重新開機，在 manifest 檔案的 節點中的android:configChanges 屬性增加 screenSize|smallestScreenSize|screenLayout 字元串。
當螢幕比例變化時，系統會回調 Activity 的 onConfigurationChanged() 方法，而避免 Activity 重新啟動。應用複寫 onConfigurationChanged() 方法，通過該方法的 Configuration 參數獲得螢幕的分辨率等資訊，就可以針對不同比例螢幕下的應用界面布局做相應調整，如切換布局、調整控件位置和間距等。
如果 Activity 走 Restart 銷毀模式，需要處理 onSaveInstanceState() 儲存狀态，以免資訊丢失。在分屏模式下，如果希望獲得應用實際顯示的尺寸，使用 Activity 的 Context 調用 getDisplayMetrics 擷取。
體驗更新，Magic Window探索
經過幾個月的适配，終于完成了第一個折疊屏可用版本的安裝包。但是由于手淘是針對窄屏設計的 App ，在展開屏狀态下，寬高比接近 1:1 ，可視内容會變得很少，無法發揮折疊屏的大屏優勢。為了給使用者最佳的使用體驗。手淘團隊決定适配華為 mate X 的 Magic Window 方案。
Magic window，是華為提供的系統級分屏的解決方案。應用可以根據自身業務設計分屏顯示 Activity 組合，以實作符合應用邏輯的最佳單應用多視窗使用者體驗。
本次手淘适配 magic window ，使用自定義模式進行适配。即由設計師确定左右屏的互動邏輯，由技術同學針對互動邏輯在指定配置檔案進行配置，實作分屏方案。
具體實作方法：在 Manifest 檔案中新增 标簽
<meta-data android:name="EasyGoClient" android:value="true" /> 在 asserts 目錄下新增 easygo.json 檔案，檔案格式如下：
在 magic window 模式下，折疊屏優勢得到充分展現，以下是幾個經典場景。
浏覽商品同時咨詢客服（設計稿）
商品對比（設計稿）
最終效果如下：
mate x真機
手淘技術團隊秉承客戶第一原則，一直緻力于使用者體驗優化，未來我們将在使用者體驗上做出更多努力，給使用者帶來更好的體驗。關于折疊屏适配，大家有什麼不同的見解？歡迎下方留言區探讨。
One More Thing
淘系技術部依托淘系豐富的業務形态和海量的使用者資料，我們持續以技術驅動産品和商業創新，不斷探索和衍生颠覆型網際網路新技術，以更加智能、友好、普惠的科技深度重塑産業和使用者體驗，打造新商業。我們不斷吸引使用者增長、機器學習、視覺算法、音視訊通信、數字媒體、移動技術、端側智能等領域全球頂尖專業人才加入，讓科技引領面向未來的商業創新和進步。
請投遞履歷至郵箱：[email protected]
更多職位資訊請閱讀
「淘系技術部，“職”想要你」