自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

輕松玩轉(zhuǎn)平行視界（上）

作者：木棉花HOS
系統(tǒng)
平行視界是多窗口交互服務(wù)的其中一種，平行視界是以界面為基本單位實現(xiàn)應(yīng)用內(nèi)雙窗口顯示的系統(tǒng)側(cè)解決方案。

[[434407]]

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

前言

10.23去參加了HDC2021 Codelabs趣味闖關(guān)賽，闖關(guān)賽的題目需要實現(xiàn)的功能大致分為以下三步：

  1. 點擊電影卡片跳轉(zhuǎn)到電影列表頁面(服務(wù)卡片開發(fā))
  2. 點擊電影列表中的具體電影，跳轉(zhuǎn)到具體電影的信息，該窗口實現(xiàn)平行視界(平行視界服務(wù)開發(fā))
  3. 點擊具體電影的信息，流轉(zhuǎn)到另一設(shè)備中(分布式流轉(zhuǎn)開發(fā))
[[434408]]

這一次就給大家分享關(guān)于平行視界服務(wù)開發(fā)的心得體會(～￣▽￣)～

概述

平行視界是多窗口交互服務(wù)的其中一種，平行視界是以界面為基本單位實現(xiàn)應(yīng)用內(nèi)雙窗口顯示的系統(tǒng)側(cè)解決方案。

應(yīng)用可以根據(jù)自身業(yè)務(wù)設(shè)計雙窗口顯示界面組合，以實現(xiàn)符合應(yīng)用邏輯的最佳單應(yīng)用多窗口用戶體驗。適用于辦公、郵箱、IM、電商等效率類或需要頻繁來回切換的應(yīng)用。HarmonyOS對于折疊屏展開態(tài)、平板橫屏設(shè)備支持平行視界。用戶應(yīng)用程序可以根據(jù)自身業(yè)務(wù)特點，設(shè)計最佳的雙窗口組合體驗，如社交類應(yīng)用的“列表+聊天”，購物類應(yīng)用的“雙窗口比價”等。

平行視界的開發(fā)分為兩步：

  1. 在config.json中聲明支持平行視界。
  2. 在src -> main -> resources -> rawfile目錄下增加easygo.json配置文件，實現(xiàn)平行視界顯示策略配置。

正文

1. 安裝和配置DevEco Studio 3.0 Beta

DevEco Studio 3.0 Beta下載

DevEco Studio 3.0 Beta安裝

2. 創(chuàng)建一個Empty Ability應(yīng)用

DevEco Studio下載安裝成功后，打開DevEco Studio，點擊左上角的File，點擊New，再選擇New Project，選擇Empty Ability選項，點擊Next按鈕。

將文件命名為Mydemo1(文件名不能出現(xiàn)中文或者特殊字符，否則將無法成功創(chuàng)建項目文件)，Project Type勾選Application，選擇保存路徑，Language勾選Java，選擇API 6，設(shè)備勾選Tablet，最后點擊Finish按鈕。

選擇Empty Ability配置文件信息

【木棉花】輕松玩轉(zhuǎn)平行視界（上）-鴻蒙HarmonyOS技術(shù)社區(qū)
【木棉花】輕松玩轉(zhuǎn)平行視界（上）-鴻蒙HarmonyOS技術(shù)社區(qū)

3. 編寫簡單邏輯代碼

代碼文件結(jié)構(gòu)如下：

【木棉花】輕松玩轉(zhuǎn)平行視界（上）-鴻蒙HarmonyOS技術(shù)社區(qū)

在com.test.mydemo1目錄下創(chuàng)建RightAbility文件后，代碼有作修改的如下：

ability_main.xml:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:alignment="center" 
  7.     ohos:orientation="vertical"> 
  8.  
  9.     <Text 
  10.         ohos:id="$+id:text_helloworld" 
  11.         ohos:height="match_content" 
  12.         ohos:width="match_content" 
  13.         ohos:background_element="$graphic:background_ability_main" 
  14.         ohos:layout_alignment="horizontal_center" 
  15.         ohos:text="這是MainAbilitySlice頁面" 
  16.         ohos:text_size="40vp" 
  17.         /> 
  18.  
  19.     <Button 
  20.         ohos:id="$+id:btn" 
  21.         ohos:height="match_content" 
  22.         ohos:width="match_content" 
  23.         ohos:background_element="#888888" 
  24.         ohos:layout_alignment="horizontal_center" 
  25.         ohos:text="跳轉(zhuǎn)到RightAbilitySlice頁面" 
  26.         ohos:text_size="40vp" 
  27.         /> 
  28.  
  29. </DirectionalLayout> 

ability_right:

  1. <?xml version="1.0" encoding="utf-8"?> 
  2. <DirectionalLayout 
  3.     xmlns:ohos="http://schemas.huawei.com/res/ohos" 
  4.     ohos:height="match_parent" 
  5.     ohos:width="match_parent" 
  6.     ohos:alignment="center" 
  7.     ohos:orientation="vertical" 
  8.     ohos:background_element="#DDDDDD"> 
  9.  
  10.     <Text 
  11.         ohos:id="$+id:text_helloworld" 
  12.         ohos:height="match_content" 
  13.         ohos:width="match_content" 
  14.         ohos:layout_alignment="horizontal_center" 
  15.         ohos:text="這是RightAbilitySlice頁面" 
  16.         ohos:text_size="40vp" 
  17.         /> 
  18.  
  19.     <Button 
  20.         ohos:id="$+id:btn" 
  21.         ohos:height="match_content" 
  22.         ohos:width="match_content" 
  23.         ohos:background_element="#888888" 
  24.         ohos:layout_alignment="horizontal_center" 
  25.         ohos:text="返回到MainAbilitySlice頁面" 
  26.         ohos:text_size="40vp" 
  27.         /> 
  28.  
  29. </DirectionalLayout> 

MainAbilitySlice.java:

  1. public class MainAbilitySlice extends AbilitySlice { 
  2.     @Override 
  3.     public void onStart(Intent intent) { 
  4.         super.onStart(intent); 
  5.         super.setUIContent(ResourceTable.Layout_ability_main); 
  6.  
  7.         findComponentById(ResourceTable.Id_btn).setClickedListener(new Component.ClickedListener() { 
  8.             @Override 
  9.             public void onClick(Component component) { 
  10.                 Operation operation = new Intent.OperationBuilder() 
  11.                         .withDeviceId("") 
  12.                         .withBundleName(getBundleName()) 
  13.                         .withAbilityName(RightAbility.class.getName()) 
  14.                         .build(); 
  15.                 intent.setOperation(operation); 
  16.                 startAbility(intent); 
  17.             } 
  18.         }); 
  19.     } 
  20.  
  21.     @Override 
  22.     public void onActive() { 
  23.         super.onActive(); 
  24.     } 
  25.  
  26.     @Override 
  27.     public void onForeground(Intent intent) { 
  28.         super.onForeground(intent); 
  29.     } 
  30. } 

RightAbilitySlice.java:

  1. public class RightAbilitySlice extends AbilitySlice { 
  2.     @Override 
  3.     public void onStart(Intent intent) { 
  4.         super.onStart(intent); 
  5.         super.setUIContent(ResourceTable.Layout_ability_right); 
  6.  
  7.         findComponentById(ResourceTable.Id_btn).setClickedListener(new Component.ClickedListener() { 
  8.             @Override 
  9.             public void onClick(Component component) { 
  10.                 terminateAbility(); 
  11.             } 
  12.         }); 
  13.     } 
  14.  
  15.     @Override 
  16.     public void onActive() { 
  17.         super.onActive(); 
  18.     } 
  19.  
  20.     @Override 
  21.     public void onForeground(Intent intent) { 
  22.         super.onForeground(intent); 
  23.     } 
  24. } 

4. 在config.json中聲明支持平行視界

config.json配置文件的module對象中新增metaData：

  1. "metaData": { 
  2.       "customizeData": [ 
  3.         { 
  4.         "name": "EasyGoClient", 
  5.         "value": "true" 
  6.         } 
  7.       ] 
  8.     } 

 5. 創(chuàng)建平行視界配置文件easygo.json

在src -> main -> resources -> rawfile目錄下增加easygo.json配置文件：

  1. { 
  2.   "easyGoVersion": "1.0", 
  3.   "client": "com.test.mydemo1", 
  4.   "logicEntities": [ 
  5.     { 
  6.       "head": { 
  7.         "function": "magicwindow", 
  8.         "required": "true" 
  9.       }, 
  10.       "body": { 
  11.         "mode": "1", 
  12.         "abilityPairs": [ 
  13.           { 
  14.             "from": "com.test.mydemo1.MainAbility", 
  15.             "to": "com.test.mydemo1.RightAbility" 
  16.           } 
  17.         ], 
  18.         "Abilities": [ 
  19.           { 
  20.             "name": "com.test.mydemo1.MainAbility", 
  21.             "defaultFullScreen": "false" 
  22.           }, 
  23.           { 
  24.             "name": "com.test.mydemo1.RightAbility", 
  25.             "defaultFullScreen": "false" 
  26.           } 
  27.         ], 
  28.         "UX": { 
  29.           "isDraggable": "true" 
  30.         } 
  31.       } 
  32.     } 
  33.   ] 
  34. } 

上述代碼easygo.json配置文件的相關(guān)元素的描述如下：

  1. { 
  2.   "easyGoVersion": 必選,固定值為"1.0", 
  3.   "client": 必選,該程序的應(yīng)用包名, 
  4.   "logicEntities": [ 
  5.     { 
  6.       "head": { 
  7.         "function": 必選,調(diào)用組件名,固定值為"magicwindow", 
  8.         "required": 必選,預(yù)留字段,固定值為"true" 
  9.       }, 
  10.       "body": { 
  11.         "mode": 必選,基礎(chǔ)分屏模式."0":購物模式,abilityPairs節(jié)點不生效;"1":自定義模式(包含導(dǎo)航模式), 
  12.         "abilityPairs": [自定義模式下必選,配置從from頁面到to頁面的分屏顯示 
  13.           { 
  14.             "from": 自定義模式下必選,AbilityA的包名, 
  15.             "to": 自定義模式下必選,AbilityB的包名, 
  16.           }表示A上啟動B,觸發(fā)分屏(A左B右) 
  17.         ], 
  18.         "Abilities": [可選,應(yīng)用Page Ability屬性列表, 
  19.           { 
  20.             "name": 可選,Page Ability包名, 
  21.             "defaultFullScreen": 可選,Page Ability是否支持默認(rèn)以全屏啟動."true": 支持;,"false": 不支持 
  22.           }, 
  23.           { 
  24.             "name": 可選,Page Ability包名, 
  25.             "defaultFullScreen": 可選,Page Ability是否支持默認(rèn)以全屏啟動."true": 支持;,"false": 不支持 
  26.           } 
  27.         ], 
  28.         "UX": {可選,頁面UX控制配置 
  29.           "isDraggable": 可選,是否支持分屏窗口拖動(僅針對平板產(chǎn)品生效)."true": 支持;,"false": 不支持(缺省值為false) 
  30.         } 
  31.       } 
  32.     } 
  33.   ] 
  34. } 

平板橫屏的運行效果如下：

【木棉花】輕松玩轉(zhuǎn)平行視界（上）-鴻蒙HarmonyOS技術(shù)社區(qū)

6. 添加復(fù)雜邏輯代碼

具體代碼見附錄文件，代碼文件結(jié)構(gòu)如下：

【木棉花】輕松玩轉(zhuǎn)平行視界（上）-鴻蒙HarmonyOS技術(shù)社區(qū)

7. 完善easygo.json配置文件

  1. { 
  2.   "easyGoVersion": "1.0", 
  3.   "client": "com.test.mydemo1", 
  4.   "logicEntities": [ 
  5.     { 
  6.       "head": { 
  7.         "function": "magicwindow", 
  8.         "required": "true" 
  9.       }, 
  10.       "body": { 
  11.         "mode": "1", 
  12.         "abilityPairs": [ 
  13.           { 
  14.             "from": "com.test.mydemo1.MainAbility", 
  15.             "to": "com.test.mydemo1.RightAbility" 
  16.           }, 
  17.           { 
  18.             "from": "com.test.mydemo1.RightAbility", 
  19.             "to": "com.test.mydemo1.RightAbility2" 
  20.           } 
  21.         ], 
  22.         "Abilities": [ 
  23.           { 
  24.             "name": "com.test.mydemo1.MainAbility", 
  25.             "defaultFullScreen": "false" 
  26.           }, 
  27.           { 
  28.             "name": "com.test.mydemo1.RightAbility", 
  29.             "defaultFullScreen": "false" 
  30.           }, 
  31.           { 
  32.             "name": "com.test.mydemo1.RightAbility2", 
  33.             "defaultFullScreen": "false" 
  34.           }, 
  35.           { 
  36.             "name": "com.test.mydemo1.RightAbility3", 
  37.             "defaultFullScreen": "false" 
  38.           } 
  39.         ], 
  40.         "UX": { 
  41.           "isDraggable": "true" 
  42.         } 
  43.       } 
  44.     } 
  45.   ] 
  46. } 

平板橫屏的運行效果如下：

圖1圖2圖3

【木棉花】輕松玩轉(zhuǎn)平行視界（上）-鴻蒙HarmonyOS技術(shù)社區(qū)
【木棉花】輕松玩轉(zhuǎn)平行視界（上）-鴻蒙HarmonyOS技術(shù)社區(qū)
【木棉花】輕松玩轉(zhuǎn)平行視界（上）-鴻蒙HarmonyOS技術(shù)社區(qū)

總結(jié)

從上述easygo.json文件可以看出，配置文件只設(shè)置了MainAbility|RightAbility和RightAbility|RightAbility2(A|B表示A左B右分屏)，但是從運行效果可以發(fā)現(xiàn)以下四點內(nèi)容：

  1. 若配置了A|B，則在A上啟動B，觸發(fā)雙窗口顯示(A左B右)，但在B上啟動A不會觸發(fā)平行視界雙窗口，如正文的第五點的運行效果。
  2. 若配置了A|B、B|C，沒有配置A|D，則A左B右分屏?xí)r，B觸發(fā)C，B左移，C右側(cè)顯示，即B左C右分屏;但無論從左或右觸發(fā)D，都右側(cè)顯示D，即A左D右分屏，如圖1所示。
  3. 沒有配置B|D，則D窗口跟隨B此時的顯示方式。如果B此時是全屏，則全屏顯示D;如果B此時是雙窗口，則D在雙窗口右邊顯示，即B左D右分屏，如圖2所示。
  4. 返回頁面切換和跳轉(zhuǎn)顯示頁面基本為相反的過程，如圖3所示。

這一次的分享就到這里結(jié)束啦O(∩_∩)O~，平行視界服務(wù)開發(fā)還有購物模式、導(dǎo)航模式、后臺鎖定等內(nèi)容，就留到下一次啦，我會在以后的文章中陸陸續(xù)續(xù)分享我的實戰(zhàn)操作，希望能與各位一起學(xué)習(xí)相互交流♪(∇*)

想了解更多內(nèi)容，請訪問：

51CTO和華為官方合作共建的鴻蒙技術(shù)社區(qū)

https://harmonyos.51cto.com

 

責(zé)任編輯：jianghua 來源： 鴻蒙社區(qū)
鴻蒙HarmonyOS應(yīng)用
相關(guān)推薦

2021-11-10 16:08:45

鴻蒙HarmonyOS應(yīng)用

2021-11-08 10:20:48

鴻蒙HarmonyOS應(yīng)用

2020-09-24 10:57:12

編程函數(shù)式前端

2021-11-15 10:15:37

鴻蒙HarmonyOS應(yīng)用

2023-08-18 14:39:02

2010-07-09 12:09:34

IT運維Mocha BSM摩卡軟件

2010-09-01 10:09:32

CSS樣式

2013-11-01 10:41:52

Windows 8.1應(yīng)用技巧

2018-03-15 14:07:17

潤乾Excel行列轉(zhuǎn)換

2010-09-06 12:46:05

無線網(wǎng)絡(luò)

2015-08-12 10:54:22

架構(gòu)云

2014-08-19 09:10:45

云IT運維

2010-07-21 14:56:21

Windows Pho

2019-03-15 11:07:35

華為云

2011-05-04 14:00:02

打印機Word打印

2010-05-07 10:47:18

微軟Live照片庫

2011-05-04 09:56:54

打印機Word打印

2021-10-28 14:58:15

鴻蒙HarmonyOS應(yīng)用

2010-01-15 10:14:21

C++ Builder

2009-09-10 09:24:36

Linux磁盤陣列Linux操作系統(tǒng)
點贊
收藏

51CTO技術(shù)棧公眾號