摺疊屏丨華爲高級工程師權威解讀平行視界開發指南

鄭燕華html

華爲CBG軟件部高級工程師,華爲摺疊屏手機&平板平行視界應用創新生態構建負責人。android

本文根據華爲CBG軟件部高級工程師鄭燕華在第六期零基礎高效適配摺疊屏活動上發表《摺疊屏手機平行視界分享》主題演講整理而成,主要介紹華爲摺疊屏手機平行視界配置接入方法,並圍繞開發指導以及適配建議進行分享。json

平行視界簡介
swift

平行視界以Activity爲基本單位以左右窗口分離顯示技術、雙窗口生命週期管理、雙窗口顯示模式和切換邏輯爲核心技術的實現應用內分屏的系統側解決方案。應用能夠根據自身業務設計分屏顯示Activity組合,以實現符合應用邏輯的最佳單應用多窗口用戶體驗,且支持一次開發,多端部署。
一個手機版本能夠經過平行視界支持多個華爲設備。以往針對普通手機、平板、摺疊屏手機這三款產品,由於屏幕尺寸大小有差別化,一個App須要同時開發和維護三個版本,致使工做量和成本都很大。如今只須要在手機版本的基礎上,經過平行視界適配一個版本便可。
平行視界能夠大幅提高用戶體驗。 傳統瀏覽方式VS平行視界瀏覽方式:

傳統瀏覽方式windows

用戶操做:點擊會話1→→輸入→→返回→→點擊會話2→→輸入→→返回→→…

平行視界瀏覽方式ruby

用戶操做:在左屏,點擊會話1→→切換會話2→→…
優點:可有效減小全屏頁面切換給用戶帶來的不連續性,提升操做效率。

典型場景與案例分享
bash

除消息聊天外,還適用於哪些場景呢?
1.列表 + 瀏覽
2.商詳 + 客服
3.商品對比
4.列表 + 聊天
下面是與京東的案例分享。
商品詳情快切,可減小頁面跳轉感,使商品查找更加高效。
商品對比,一目瞭然,可避免傳統不一樣頁面間跳轉對比,使商品對比更精準。
改變以往客服頁面獨佔式的佈局,給用戶帶來更輕量的多任務體驗。

基礎適配
微信

看到這麼酷炫的效果,那你的App如何實現平行視界呢,會不會很複雜?答案是並不會。只須要兩步配置便可完成。
STEP 1
AndroidManifest.xml 新增 meta-data申明
<meta-data android:name="EasyGoClient「 android:value="true" />
STEP 2
assets目錄下新加配置文件easygo.json
{  "easyGoVersion": "1.0", //Version number "client":   "client": "com.example.myapplication",  …   "body": {        「mode」:「1」,// 1:導航模式;0:購物模式        "activityPairs":[          {"from":"com. myapplication.MainActivity","to":"*"}        ],    }  ]}
這裏提個建議,配置文件最好去官網示例代碼頁面下載現成的模板。以前遇到過不少配置文件字段、格式不正確而致使不生效的問題,浪費時間。接下來是重點參數的介紹。
在上圖中,什麼是過渡頁面 好比,App中用戶在Activity A頁面點擊打開Activity C,正常啓動方式是在Activity A中start Activity C ,有時因爲某些特殊的緣由須要先打開Activity B,Activity B中打開Activity C,Activity B自行finish,Activity B就叫過渡頁面。若是沒有這個參數會發生閃屏。閃一下Activity B再出來Activity C,體驗效果不佳。配置上Activity B,系統就會幫助開發者處理這種問題。

分屏模式的配置樣例app

下面是購物模式與自定義模式在頁面跳轉上的區別:
須要注意的是: 左右分屏的返回是不同的,注意左圖中的藍色虛線,左屏C的返回會把B和C都銷燬,左屏C的返回只是銷燬C。

APP Multiplier – FAQ
ide

問題1. 配置好了若是不生效如何排查?
1. 排查easygo.json配置文件的格式是否正確,可否正確解析,路徑是否正確,建議複製模板內容,不要修改參數名稱;
2. 設置菜單中該應用的平行視界開關是否開啓;
3. 摺疊屏是設備豎屏方向生效,平板是設備橫屏方向生效。
問題2. 如何判斷Activity是否運行在平行視界狀態?
能夠根據Activity的configuration來判斷此Activity是否運行在平行視界模式,代碼以下:
String config = context.getResources().getConfiguration().toString();boolean isInMagicWindow = config.contains("hwMultiwindow-magic") || config.contains("hw-magic-windows");
問題3.如何獲取Activity實際顯示的窗口大小?
獲取Activity窗口大小的方法爲:
推薦使用:context.getResources().getDisplayMetrics();
不推薦使用:
context.getWindowManager().getDefaultDisplay().getMetrics(outMetrics);
上述接口中,context爲Activity對應的上下文句柄,每一個Activity應該嚴格使用本身的context來進行佈局,而不是使用application的context。
本篇文章的分享只是基礎的內容,更加全面具體的內容,可參考:
1. 平行視界開發指南:
https://developer.huawei.com/consumer/cn/doc/development/UI-Guides/app-multiplier-introduction
2. 平行視界Demo示例:
https://developer.huawei.com/consumer/cn/codelab/AppMultiplier/index.html
 

   ·  END  ·  


往  期  精  選  文  章  回  顧


重磅揭祕丨摺疊屏適配報告與UX規範開發指南


開年重磅!軟件綠色聯盟發佈《摺疊屏移動智能終端人機界面設計及開發指南》


摺疊屏丨在家辦公太難?WPS+摺疊屏,揣在兜裏的高端辦公利器


本文分享自微信公衆號 - 軟件綠色聯盟(sgachina)。
若有侵權,請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」,歡迎正在閱讀的你也加入,一塊兒分享。

相關文章
相關標籤/搜索