返回发烧友论坛
发 帖  

[文章]HarmonyOS教程—基于分布式能力，将手机作为智慧屏的虚拟控制器，控制文字输入和遥控播放

红旧衫
2021-09-08 10:39:34
阅读量0
HarmonyOS分布式遥控
1
3
1. 介绍      
目前家庭电视机主要通过其自带的遥控器进行操控，实现的功能较为单一。例如，当我们要在TV端搜索节目时，电视机在遥控器的操控下往往只能完成一些字母或数字的输入，而无法输入其他复杂的内容。分布式遥控器将手机的输入能力和电视遥控器的遥控能力结合为一体，从而快速便捷操控电视。

分布式遥控器的实现基于HarmonyOS分布式任务调度和公共事件服务。当TV端在搜索框聚焦时，自动拉起手机端的输入应用，在手机端输入时会将输入的内容同步显示在TV端搜索框；点击确定按钮会根据输入的内容搜索相关节目，还可以通过点击方向键（上下左右）将焦点移动到我们想要的节目上，再点击确定按钮进行播放，效果图如下：

说明
为便于演示，本篇Codelab所指TV均使用支持HarmonyOS手机代替。
图1 TV端主页默认页面
图2 设备选择弹框，点击设备图标自动拉起手机端输入应用
图3 手机端输入应用页面
图4 手机端输入，TV同步显示输入内容，点击键搜索内容，焦点聚焦搜索结果
图5 点击OK，播放选中的视频内容
   
2. 搭建HarmonyOS环境              
我们首先需要完成HarmonyOS开发环境搭建，可参照如下步骤进行。
  • 安装DevEco Studio，详情请参考下载和安装软件。
  • 设置DevEco Studio开发环境，DevEco Studio开发环境需要依赖于网络环境，需要连接上网络才能确保工具的正常使用，可以根据如下两种情况来配置开发环境：
    • 如果可以直接访问Internet，只需进行下载HarmonyOS SDK操作。
    • 如果网络不能直接访问Internet，需要通过代理服务器才可以访问，请参考配置开发环境。
  • 开发者可以参考以下链接，完成设备调试的相关配置：
    • 使用真机进行调试
    • 使用模拟器进行调试
您可以通过如下设备完成Codelab：
  • 开启了开发者模式的两部HarmonyOS真机

3. 代码结构解读      
在本篇Codelab中我们只对核心代码进行讲解，您可以通过"获取示例代码"章节提供的链接，下载完整代码。首先来介绍下整个工程的代码结构：

  • adapter：DevicesListAdapter，用于向ListContainer控件中填充设备数据。
  • callBack：MainCallBack，抽取了MainAbilitySlice中的方法，供其回调使用。
  • component：SelectDeviceDialog封装了设备选择弹框，SimplePlayerController封装了视频播放控制栏。
  • constants：抽取了使用频繁的常量。
  • data：定义了影片数据类。
  • proxy：定义了连接远程和调用远程service（PA）的接口、实现类以及代理。
  • service：RemoteService为TV端service，供手机端远程调用。
  • slice：MainAbilitySlice为TV端默认主界面，RemotInputAbilitySlice为手机端遥控器输入界面，MoviePlayAbilitySlice为视频播放界面。
  • utils：封装了公共方法，包括ability管理工具类、日志工具类、搜索工具类、窗口工具类。
  • resources：存放工程使用到的资源文件，其中resourcesbaselayout下存放XML布局文件，resourcesbasemedia下存放图片资源和视频资源。
  • config.json：应用的配置文件。
   
4. 相关权限      
本程序开发需要申请以下多端协同multi-device collaboration相关的四个权限，应用权限的申请可以参考权限章节。
1、ohos.permission.DISTRIBUTED_DATASYNC：分布式数据管理权限，允许不同设备间的数据交换
2、ohos.permission.DISTRIBUTED_DEVICE_STATE_CHANGE：监听分布式组网内设备状态变化的权限
3、ohos.permission.GET_DISTRIBUTED_DEVICE_INFO：获取分布式组网内设备列表和设备信息的权限
4、ohos.permission.GET_BUNDLE_INFO：查询其他应用信息的权限

说明
其中多设备协同数据同步权限"ohos.permission.DISTRIBUTED_DATASYNC"，需要按照动态申请流程向用户申请授权。
   
5. 界面实现      
本章节内容，主要介绍各个界面的布局内容，让您对界面与布局的对应关系有清晰的认识。
  • TV端默认主界面：展示效果如图1，布局文件为ability_main.xml，位于"resourcesbaselayout"目录下。文件定义布局使用常用的DirectionalLayout、TableLayout布局，以及TextField、Button、ScrollView和Image等常用组件。您可以通过查看对应的布局文件，了解具体内容。
    说明
    使用XML文件定义布局，存在固定的内容和格式。结合运行效果图和文件可快速理解。因此，本章节重点对如何使用代码创建和添加布局进行说明。
  • 设备选择弹框界面：展示效果如图2，弹框界面是结合代码和布局文件动态进行创建的。布局文件包括dialog_select_device.xml和item_device_list.xml，位于"resourcesbaselayout"目录下。dialog_select_device.xml定义了弹框整体和弹框标题栏部分的布局，item_device_list.xml定义了弹框中设备列表部分的布局。您可以通过查看对应的布局文件，了解具体内容。弹出设备选择框时，应用代码会先查询可供选择的设备，进而对弹框展示内容进行调整。代码片段如下：

    1. private CommonDialog commonDialog;
    2. List deviceInfos = DeviceManager.getDeviceList(DeviceInfo.FLAG_GET_ONLINE_DEVICE);
    3. initView(context, deviceIfs, callBack);
    4. private void initView(Context context, List devices, SelectResultListener listener) {
    5.     commonDialog = new CommonDialog(context);
    6.     commonDialog.setAlignment(LayoutAlignment.CENTER);
    7.     Component dialogLayout = LayoutScatter.getInstance(context)
    8.             .parse(ResourceTable.Layout_dialog_select_device, null, false);
    9.     commonDialog.setSize(WIDTH, HEIGHT);
    10.     commonDialog.setAutoClosable(true);
    11.     commonDialog.setContentCustomComponent(dialogLayout);
    12.     if (dialogLayout.findComponentById(ResourceTable.Id_list_devices) instanceof ListContainer) {
    13.         ListContainer devicesListContainer = (ListContainer) dialogLayout
    14.                 .findComponentById(ResourceTable.Id_list_devices);
    15.         DevicesListAdapter devicesListAdapter = new DevicesListAdapter(devices, context);
    16.         devicesListContainer.setItemProvider(devicesListAdapter);
    17.         devicesListContainer.setItemClickedListener((listContainer, component, position, ll) -> {
    18.             listener.callBack(devices.get(position));
    19.             commonDialog.hide();
    20.         });
    21.     }
    22.     dialogLayout.findComponentById(ResourceTable.Id_cancel).setClickedListener(component -> {
    23.         commonDialog.hide();
    24.     });
    25. }
    复制代码

  • 手机输入遥控界面：展示效果如图3，布局文件为ability_remote_input.xml，位于"resourcesbaselayout"目录下。文件定义布局使用DirectionalLayout和DependentLayout组件布局，组件则使用了常用组件TextField、Image以及Text。您可以通过查看对应的布局文件，了解具体内容。
  • 视频播放界面：展示效果如图5，布局文件为ability_movie_play.xml文件和simple_player_controller_layout.xml文件，位于"resourcesbaselayout"目录下。ability_movie_play.xml定义了播放视频的整体界面布局，您可以通过查看文件内容，了解具体实现。在进行视频播放时，代码会为播放界面添加遮罩层。代码片段如下：

    1. SurfaceProvider surfaceView = new SurfaceProvider(this);
    2. DependentLayout.LayoutConfig layoutConfig = new DependentLayout.LayoutConfig();
    3. layoutConfig.addRule(DependentLayout.LayoutConfig.CENTER_IN_PARENT);
    4. surfaceView.setLayoutConfig(layoutConfig);
    5. surfaceView.setVisibility(Component.VISIBLE);
    6. surfaceView.setFocusable(Component.FOCUS_ENABLE);
    7. surfaceView.setTouchFocusable(true);
    8. surfaceView.requestFocus();
    9. surfaceView.pinToZTop(false);
    10. surfaceView.getSurfaceOps().get().addCallback(mSurfaceCallback);
    11. if (findComponentById(ResourceTable.Id_parent_layout) instanceof DependentLayout) {
    12. DependentLayout dependentLayout = (DependentLayout)
    13. findComponentById(ResourceTable.Id_parent_layout);
    14. SimplePlayerController simplePlayerController = new SimplePlayerController(this, player);
    15. dependentLayout.addComponent(surfaceView);
    16. dependentLayout.addComponent(simplePlayerController);
    17. }
    复制代码
    simple_player_controller_layout.xml播放界面控制栏的布局。您可以通过查看文件内容，了解具体实现。播放界面控制栏的初始化、播放暂停图标切换，相关代码片段如下：

    1. private void initView() {
    2.     Component playerController =
    3.             LayoutScatter.getInstance(mContext)
    4.                     .parse(ResourceTable.Layout_simple_player_controller_layout, null, false);
    5.     addComponent(playerController);
    6.     if (findComponentById(ResourceTable.Id_play_controller) instanceof Image) {
    7.         playToggle = (Image) findComponentById(ResourceTable.Id_play_controller);
    8.     }
    9. }

    11. private void initListener() {
    12.     playToggle.setClickedListener(component -> {
    13.         if (controllerPlayer.isNowPlaying()) {
    14.             controllerPlayer.pause();
    15.             playToggle.setPixelMap(ResourceTable.Media_video_play);
    16.         } else {
    17.             controllerPlayer.play();
    18.             playToggle.setPixelMap(ResourceTable.Media_video_stop);
    19.         }
    20.     });
    21. }
    复制代码


6. 设备连接      
点击TV端主界面搜索框，会出现选择手机遥控器的弹框（图2）。用户点击需要的手机遥控设备，点击后对应的手机设备会随即拉起手机遥控输入界面。拉起手机遥控输入界面的核心代码如下：

  1. public void openRemoteAbility(String deviceId, String bundleName, String abilityName) {
  2.     Intent intent = new Intent();
  3.     String localDeviceId = KvManagerFactory.getInstance()
  4.             .createKvManager(new KvManagerConfig(abilitySlice)).getLocalDeviceInfo().getId();
  5.     intent.setParam("localDeviceId", localDeviceId);

  7.     Operation operation = new Intent.OperationBuilder()
  8.             .withDeviceId(deviceId)
  9.             .withBundleName(bundleName)
  10.             .withAbilityName(abilityName)
  11.             .withFlags(Intent.FLAG_ABILITYSLICE_MULTI_DEVICE)
  12.             .build();
  13.     intent.setOperation(operation);
  14.     abilitySlice.startAbility(intent);
  15. }
复制代码
其中"localDeviceId "为TV设备id，作为拉起手机端FA的参数，传递至遥控界面，用于遥控界面与对应的TV设备配对时使用。遥控界面FA在启动过程中，通过initConnManager()方法，与TV端RemoteService建立连接。与RemoteService建立连接的核心代码如下：

  1. public void connectPa(Context context, String deviceId) {
  2.     if (deviceId != null && !deviceId.trim().isEmpty()) {
  3.         Intent connectPaIntent = new Intent();
  4.         Operation operation = new Intent.OperationBuilder()
  5.                 .withDeviceId(deviceId)
  6.                 .withBundleName(context.getBundleName())
  7.                 .withAbilityName(RemoteService.class.getName())
  8.                 .withFlags(Intent.FLAG_ABILITYSLICE_MULTI_DEVICE)
  9.                 .build();
  10.         connectPaIntent.setOperation(operation);
  11.         conn = new IAbilityConnection() {
  12.             [url=home.php?mod=space&uid=2735960]@Override[/url]
  13.             public void onAbilityConnectDone(ElementName elementName, IRemoteObject remote, int resultCode) {
  14.                 LogUtils.info(TAG, "===connectRemoteAbility done");
  15.                 proxy = new MyRemoteProxy(remote);
  16.             }

  18.             @Override
  19.             public void onAbilityDisconnectDone(ElementName elementName, int resultCode) {
  20.                 LogUtils.info(TAG, "onAbilityDisconnectDone......");
  21.                 proxy = null;
  22.             }
  23.         };
  24.         context.connectAbility(connectPaIntent, conn);
  25.     }
  26. }
复制代码
成功建立连接后，就可以通过遥控界面对应按钮进行输入、搜索和移动等操作了。
   
7. 远端控制和播放      
手机端的输入法应用被拉起，在初始化页面时，会绑定相关点击事件。手机端应用对TV端能做出的控制有：向上移动、向下移动、向左移动、向右移动、确定、返回、关闭。

  1. private void initListener() {
  2.     // 监听文本变化，远程同步
  3.     textField.addTextObserver((ss, ii, i1, i2) -> {
  4.         Map<String, String> map = new HashMap<>(INIT_SIZE);
  5.         map.put("inputString", ss);
  6.         connectManager.sendRequest(ConnectManagerIml.REQUEST_SEND_DATA, map);
  7.     });
  8.     okButton.setClickedListener(component -> {
  9.         // 点击OK按钮
  10.         buttonClickSound();
  11.         String searchString = textField.getText();
  12.         Map<String, String> map = new HashMap<>(INIT_SIZE);
  13.         map.put("inputString", searchString);
  14.         connectManager.sendRequest(ConnectManagerIml.REQUEST_SEND_SEARCH, map);
  15.     });
  16.     leftButton.setClickedListener(component -> {
  17.         // 点击左键按钮
  18.         sendMoveRequest(Constants.MOVE_LEFT);
  19.     });
  20.     rightButton.setClickedListener(component -> {
  21.         // 点击右键按钮
  22.         sendMoveRequest(Constants.MOVE_RIGHT);
  23.     });
  24.     upButton.setClickedListener(component -> {
  25.         // 点击向上按钮
  26.         sendMoveRequest(Constants.MOVE_UP);
  27.     });
  28.     downButton.setClickedListener(component -> {
  29.         // 点击向下按钮
  30.         sendMoveRequest(Constants.MOVE_DOWN);
  31.     });
  32.     goBackButton.setClickedListener(component -> {
  33.         // 返回TV主页
  34.         sendMoveRequest(Constants.GO_BACK);
  35.     });
  36.     closeButton.setClickedListener(component -> {
  37.         // 返回主页
  38.         sendMoveRequest(Constants.GO_BACK);
  39.         terminateAbility();
  40.     });
  41. }
复制代码
基于分布式任务调度和公共事件，将远端移动操作请求发送给TV端。

  1. private void sendMoveRequest(String direction) {
  2.     buttonClickSound();
  3.     Map<String, String> map = new HashMap<>(INIT_SIZE);
  4.     map.put("move", direction);
  5.     connectManager.sendRequest(ConnectManagerIml.REQUEST_SEND_MOVE, map);
  6. }
复制代码
TV端收到公共事件，做出相应处理。如果收到的事件为文本输入，则在TV搜索框填充输入内容；如果收到的事件操作判断为移动，则根据具体移动方向移动焦点；如果收到的事件操作为确定，判断当前焦点所在位置，焦点在搜索框，则执行搜索逻辑，焦点在影片图片组件上，则播放影片；如果收到的事件操作为返回，则返回TV主页，焦点聚焦搜索框。

  1. class MyCommonEventSubscriber extends CommonEventSubscriber {
  2.     MyCommonEventSubscriber(CommonEventSubscribeInfo info) {
  3.         super(info);
  4.     }

  6.     @Override
  7.     public void onReceiveEvent(CommonEventData commonEventData) {
  8.         Intent intent = commonEventData.getIntent();
  9.         int requestType = intent.getIntParam("requestType", 0);
  10.         String inputString = intent.getStringParam("inputString");
  11.         if (requestType == ConnectManagerIml.REQUEST_SEND_DATA) {
  12.             tvTextInput.setText(inputString);
  13.         } else if (requestType == ConnectManagerIml.REQUEST_SEND_SEARCH) {
  14.             if (componentPointDataNow.getPointX() == 0) {
  15.                 // 调用TV端的搜索方法
  16.                 searchMovies(tvTextInput.getText());
  17.                 return;
  18.             }

  20.             // 播放影片
  21.             abilityMgr.playMovie(getBundleName(), MOVIE_PLAY_ABILITY);
  22.         } else {
  23.             // 移动方向
  24.             String moveString = intent.getStringParam("move");
  25.             MainCallBack.movePoint(MainAbilitySlice.this, moveString);
  26.         }
  27.     }
  28. }
复制代码
焦点移动方法实现。连续点击方向键可能会产生并发，因此该方法加上锁；清空上一个焦点的聚焦效果，新的焦点设置聚焦效果。

  1. public void move(int pointX, int pointY) {
  2.     MOVE_LOCK.lock();
  3.     try {
  4.         // 设置焦点滚动
  5.         if (pointX == 0 && componentPointDataNow.getPointX() > 0) {
  6.             scrollView.fluentScrollByY(pointY * size.height);
  7.         }
  8.         if (componentPointDataNow.getPointX() == 0 && pointX == 1) {
  9.             scrollView.scrollTo(0, 0);
  10.         }

  12.         // 设置背景
  13.         if (componentPointDataNow.getPointX() + pointX == 0) {
  14.             setBackGround(componentPointDataNow.getPointX() + pointX, 1);
  15.         } else {
  16.             setBackGround(componentPointDataNow.getPointX() + pointX, componentPointDataNow.getPointY() + pointY);
  17.         }
  18.     } finally {
  19.         MOVE_LOCK.unlock();
  20.     }
  21. }
复制代码
搜索方法实现。清空上次搜索结果及背景效果，设置新的搜索结果和背景效果。

  1. private void searchMovies(String text) {
  2.     if (text == null || "".equals(text)) {
  3.         return;
  4.     }

  6.     // 清空上次搜索结果及背景效果
  7.     clearHistroyBackGround();

  9.     for (ComponentPointData componentPointData : ComponentPointDataMgr.getComponentPointDataMgrs()) {
  10.         if (MovieSearchUtils.isContainMovie(componentPointData.getMovieName(), text)
  11.                 || MovieSearchUtils.isContainMovie(componentPointData.getMovieFirstName(), text)) {
  12.             movieSearchList.add(componentPointData);
  13.             Component component = findComponentById(componentPointData.getComponentId());
  14.             component.setPadding(SEARCH_PADDING, SEARCH_PADDING, SEARCH_PADDING, SEARCH_PADDING);
  15.         }
  16.     }

  18.     if (movieSearchList.size() > 0) {
  19.         componentPointDataNow = movieSearchList.get(0);
  20.         Component component = findComponentById(componentPointDataNow.getComponentId());
  21.         component.setPadding(FOCUS_PADDING, FOCUS_PADDING, FOCUS_PADDING, FOCUS_PADDING);
  22.     } else {
  23.         Component component = findComponentById(componentPointDataNow.getComponentId());
  24.         component.requestFocus();
  25.     }
  26. }
复制代码

8. 回顾和总结      
本篇Codelab中我们详细介绍了分布式遥控器的设备连接、远程操控等内容，直观的展现了HarmonyOS的分布式特性。通过本篇Codelab，您可以学会如何拉起分布式应用，如何收发公共事件，如何实现分布式任务调度；另外，您还可以了解UI布局和视频播放功能的相关知识点。
在分布式应用开发中，您需要重点学习和掌握HarmonyOS的跨设备协同、分布式任务调度和公共事件通知的特性能力。
   
9. 恭喜你      
目前你已经成功完成了分布式Codelab并且学到了：
  • 常用布局的使用
  • 分布式任务调度
  • 公共事件与通知
   
10. 完整示例      

举报

回帖

声明：本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人，不代表电子发烧友网立场。文章及其配图仅供工程师学习之用，如有内容图片侵权或者其他问题，请联系本站作侵删。 侵权投诉
链接复制成功，分享给好友