轻松玩转平行视界(上)

系统
平行视界是多窗口交互服务的其中一种,平行视界是以界面为基本单位实现应用内双窗口显示的系统侧解决方案。

[[434407]]

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

前言

10.23去参加了HDC2021 Codelabs趣味闯关赛,闯关赛的题目需要实现的功能大致分为以下三步:

  1. 点击电影卡片跳转到电影列表页面(服务卡片开发)
  2. 点击电影列表中的具体电影,跳转到具体电影的信息,该窗口实现平行视界(平行视界服务开发)
  3. 点击具体电影的信息,流转到另一设备中(分布式流转开发)
[[434408]]

这一次就给大家分享关于平行视界服务开发的心得体会(~ ̄▽ ̄)~

概述

平行视界是多窗口交互服务的其中一种,平行视界是以界面为基本单位实现应用内双窗口显示的系统侧解决方案。

应用可以根据自身业务设计双窗口显示界面组合,以实现符合应用逻辑的最佳单应用多窗口用户体验。适用于办公、邮箱、IM、电商等效率类或需要频繁来回切换的应用。HarmonyOS对于折叠屏展开态、平板横屏设备支持平行视界。用户应用程序可以根据自身业务特点,设计最佳的双窗口组合体验,如社交类应用的“列表+聊天”,购物类应用的“双窗口比价”等。

平行视界的开发分为两步:

  1. 在config.json中声明支持平行视界。
  2. 在src -> main -> resources -> rawfile目录下增加easygo.json配置文件,实现平行视界显示策略配置。

正文

1. 安装和配置DevEco Studio 3.0 Beta

DevEco Studio 3.0 Beta下载

DevEco Studio 3.0 Beta安装

2. 创建一个Empty Ability应用

DevEco Studio下载安装成功后,打开DevEco Studio,点击左上角的File,点击New,再选择New Project,选择Empty Ability选项,点击Next按钮。

将文件命名为Mydemo1(文件名不能出现中文或者特殊字符,否则将无法成功创建项目文件),Project Type勾选Application,选择保存路径,Language勾选Java,选择API 6,设备勾选Tablet,最后点击Finish按钮。

选择Empty Ability配置文件信息

【木棉花】轻松玩转平行视界(上)-鸿蒙HarmonyOS技术社区
【木棉花】轻松玩转平行视界(上)-鸿蒙HarmonyOS技术社区

3. 编写简单逻辑代码

代码文件结构如下:

【木棉花】轻松玩转平行视界(上)-鸿蒙HarmonyOS技术社区

在com.test.mydemo1目录下创建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="跳转到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.     } 

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.     } 

4. 在config.json中声明支持平行视界

config.json配置文件的module对象中新增metaData:

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

 5. 创建平行视界配置文件easygo.json

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

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

上述代码easygo.json配置文件的相关元素的描述如下:

  1.   "easyGoVersion": 必选,固定值为"1.0"
  2.   "client": 必选,该程序的应用包名, 
  3.   "logicEntities": [ 
  4.     { 
  5.       "head": { 
  6.         "function": 必选,调用组件名,固定值为"magicwindow"
  7.         "required": 必选,预留字段,固定值为"true" 
  8.       }, 
  9.       "body": { 
  10.         "mode": 必选,基础分屏模式."0":购物模式,abilityPairs节点不生效;"1":自定义模式(包含导航模式), 
  11.         "abilityPairs": [自定义模式下必选,配置从from页面到to页面的分屏显示 
  12.           { 
  13.             "from": 自定义模式下必选,AbilityA的包名, 
  14.             "to": 自定义模式下必选,AbilityB的包名, 
  15.           }表示A上启动B,触发分屏(A左B右) 
  16.         ], 
  17.         "Abilities": [可选,应用Page Ability属性列表, 
  18.           { 
  19.             "name": 可选,Page Ability包名, 
  20.             "defaultFullScreen": 可选,Page Ability是否支持默认以全屏启动."true": 支持;,"false": 不支持 
  21.           }, 
  22.           { 
  23.             "name": 可选,Page Ability包名, 
  24.             "defaultFullScreen": 可选,Page Ability是否支持默认以全屏启动."true": 支持;,"false": 不支持 
  25.           } 
  26.         ], 
  27.         "UX": {可选,页面UX控制配置 
  28.           "isDraggable": 可选,是否支持分屏窗口拖动(仅针对平板产品生效)."true": 支持;,"false": 不支持(缺省值为false
  29.         } 
  30.       } 
  31.     } 
  32.   ] 

平板横屏的运行效果如下:

【木棉花】轻松玩转平行视界(上)-鸿蒙HarmonyOS技术社区

6. 添加复杂逻辑代码

具体代码见附录文件,代码文件结构如下:

【木棉花】轻松玩转平行视界(上)-鸿蒙HarmonyOS技术社区

7. 完善easygo.json配置文件

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

平板横屏的运行效果如下:

图1图2图3

【木棉花】轻松玩转平行视界(上)-鸿蒙HarmonyOS技术社区
【木棉花】轻松玩转平行视界(上)-鸿蒙HarmonyOS技术社区
【木棉花】轻松玩转平行视界(上)-鸿蒙HarmonyOS技术社区

总结

从上述easygo.json文件可以看出,配置文件只设置了MainAbility|RightAbility和RightAbility|RightAbility2(A|B表示A左B右分屏),但是从运行效果可以发现以下四点内容:

  1. 若配置了A|B,则在A上启动B,触发双窗口显示(A左B右),但在B上启动A不会触发平行视界双窗口,如正文的第五点的运行效果。
  2. 若配置了A|B、B|C,没有配置A|D,则A左B右分屏时,B触发C,B左移,C右侧显示,即B左C右分屏;但无论从左或右触发D,都右侧显示D,即A左D右分屏,如图1所示。
  3. 没有配置B|D,则D窗口跟随B此时的显示方式。如果B此时是全屏,则全屏显示D;如果B此时是双窗口,则D在双窗口右边显示,即B左D右分屏,如图2所示。
  4. 返回页面切换和跳转显示页面基本为相反的过程,如图3所示。

这一次的分享就到这里结束啦O(∩_∩)O~,平行视界服务开发还有购物模式、导航模式、后台锁定等内容,就留到下一次啦,我会在以后的文章中陆陆续续分享我的实战操作,希望能与各位一起学习相互交流♪(∇*)

想了解更多内容,请访问:

51CTO和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

 

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2021-11-10 16:08:45

鸿蒙HarmonyOS应用

2021-11-08 10:20:48

鸿蒙HarmonyOS应用

2021-11-15 10:15:37

鸿蒙HarmonyOS应用

2020-09-24 10:57:12

编程函数式前端

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应用技巧

2018-03-15 14:07:17

润乾Excel行列转换

2010-09-06 12:46:05

无线网络

2014-08-19 09:10:45

IT运维

2015-08-12 10:54:22

架构云

2010-07-21 14:56:21

Windows Pho

2010-05-07 10:47:18

微软Live照片库

2011-05-04 14:00:02

打印机Word打印

2019-03-15 11:07:35

华为云

2021-10-28 14:58:15

鸿蒙HarmonyOS应用

2011-05-04 09:56:54

打印机Word打印

2010-01-15 10:14:21

C++ Builder

2009-09-10 09:24:36

Linux磁盘阵列Linux操作系统
点赞
收藏

51CTO技术栈公众号