鸿蒙系统中用Java UI开发分布式仿抖音应用

本文使用 Java UI 开发分布式仿抖音应用，上下滑动切换视频，评论功能，设备迁移功能：记录播放的视频页和进度、评论数据。

效果演示

①上下滑动切换视频、点击迁移图标，弹框选择在线的设备，完成视频数据的迁移。

②点击评论图标查看评论，编辑评论内容并发送。点击迁移图标，弹框选择在线的设备，完成评论数据的迁移。

项目结构

如下图：

主要代码

①上下滑动页面

页面切换用到系统组件PageSlider：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-pageslider-0000001091933258

默认左右切换，设置为上下方向：setOrientation(Component.VERTICAL);

importohos.aafwk.ability.AbilitySlice;importohos.aafwk.content.Intent;importohos.agp.components.*;importjava.util.ArrayList;importjava.util.List;publicclassMainAbilitySliceextendsAbilitySlice{@OverridepublicvoidonStart(Intentintent){super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);//查找滑动页面组件PageSliderpageSlider=(PageSlider)findComponentById(ResourceTable.Id_pageSlider);//设置滑动方向为上下滑动pageSlider.setOrientation(Component.VERTICAL);//集合测试数据ListlistData=newArrayList<>();listData.add("第一页");listData.add("第二页");listData.add("第三页");//设置页面适配器pageSlider.setProvider(newPageSliderProvider(){/***获取当前适配器中可用视图的数量*/@OverridepublicintgetCount(){returnlistData.size();}/***创建页面*/@OverridepublicObjectcreatePageInContainer(ComponentContainercontainer,intposition){//查找布局Componentcomponent=LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_item_page,null,false);TexttextContent=(Text)component.findComponentById(ResourceTable.Id_text_item_page_content);//设置数据textContent.setText(listData.get(position));//添加到容器中container.addComponent(component);returncomponent;}/***销毁页面*/@OverridepublicvoiddestroyPageFromContainer(ComponentContainercontainer,intposition,Objectobject){//从容器中移除container.removeComponent((Component)object);}/***检查页面是否与对象匹配*/@OverridepublicbooleanisPageMatchToObject(Componentpage,Objectobject){returntrue;}});//添加页面改变监听器pageSlider.addPageChangedListener(newPageSlider.PageChangedListener(){/***页面滑动时调用*/@OverridepublicvoidonPageSliding(intitemPos,floatitemPosOffset,intitemPosOffsetPixels){}/***当页面滑动状态改变时调用*/@OverridepublicvoidonPageSlideStateChanged(intstate){}/***选择新页面时回调*/@OverridepublicvoidonPageChosen(intitemPos){//在此方法下，切换页面获取当前页面的视频源，进行播放Stringdata=listData.get(itemPos);}});}}

②播放视频

视频播放使用Player：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/media-video-player-0000000000044178

视频画面窗口显示使用SurfaceProvider：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/faq-media-0000001124842486#section0235506211

importohos.aafwk.ability.AbilitySlice;importohos.aafwk.content.Intent;importohos.agp.components.surfaceprovider.SurfaceProvider;importohos.agp.graphics.SurfaceOps;importohos.global.resource.RawFileDescriptor;importohos.media.common.Source;importohos.media.player.Player;importjava.io.IOException;publicclassMainAbilitySliceextendsAbilitySlice{//视频路径privatefinalStringvideoPath="resources/rawfile/HarmonyOS.mp4";//播放器privatePlayermPlayer;@OverridepublicvoidonStart(Intentintent){super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);//初始化播放器mPlayer=newPlayer(getContext());//查找视频窗口组件SurfaceProvidersurfaceProvider=(SurfaceProvider)findComponentById(ResourceTable.Id_surfaceProvider);//设置视频窗口在顶层surfaceProvider.pinToZTop(true);//设置视频窗口操作监听if(surfaceProvider.getSurfaceOps().isPresent()){surfaceProvider.getSurfaceOps().get().addCallback(newSurfaceOps.Callback(){/***创建视频窗口*/@OverridepublicvoidsurfaceCreated(SurfaceOpsholder){try{RawFileDescriptorfileDescriptor=getResourceManager().getRawFileEntry(videoPath).openRawFileDescriptor();Sourcesource=newSource(fileDescriptor.getFileDescriptor(),fileDescriptor.getStartPosition(),fileDescriptor.getFileSize());//设置媒体文件mPlayer.setSource(source);//设置播放窗口mPlayer.setVideoSurface(holder.getSurface());//循环播放mPlayer.enableSingleLooping(true);//准备播放环境并缓冲媒体数据mPlayer.prepare();//开始播放mPlayer.play();}catch(IOExceptione){e.printStackTrace();}}/***视频窗口改变*/@OverridepublicvoidsurfaceChanged(SurfaceOpsholder,intformat,intwidth,intheight){}/***视频窗口销毁*/@OverridepublicvoidsurfaceDestroyed(SurfaceOpsholder){}});}}@OverrideprotectedvoidonStop(){super.onStop();//页面销毁，释放播放器if(mPlayer!=null){mPlayer.stop();mPlayer.release();}}}

③跨设备迁移示例

跨设备迁移使用IAbilityContinuation 接口：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ability-page-cross-device-0000001051072880

在 entry 下的 config.json 配置权限：

"reqPermissions":[{"name":"ohos.permission.DISTRIBUTED_DATASYNC"},{"name":"ohos.permission.GET_DISTRIBUTED_DEVICE_INFO"},{"name":"ohos.permission.DISTRIBUTED_DEVICE_STATE_CHANGE"}]

实现 IAbilityContinuation 接口，说明：一个应用可能包含多个 Page，仅需要在支持迁移的 Page 中通过以下方法实现 IAbilityContinuation 接口。

同时，此 Page 所包含的所有 AbilitySlice 也需要实现此接口。

importohos.aafwk.ability.AbilitySlice;importohos.aafwk.ability.IAbilityContinuation;importohos.aafwk.content.Intent;importohos.aafwk.content.IntentParams;importohos.agp.components.Button;importohos.agp.components.Text;importohos.bundle.IBundleManager;importohos.distributedschedule.interwork.DeviceInfo;importohos.distributedschedule.interwork.DeviceManager;importjava.util.List;publicclassMainAbilitySliceextendsAbilitySliceimplementsIAbilityContinuation{privateStringdata="";StringPERMISSION="ohos.permission.DISTRIBUTED_DATASYNC";@OverridepublicvoidonStart(Intentintent){super.onStart(intent);super.setUIContent(ResourceTable.Layout_ability_main);//申请权限if(verifySelfPermission(PERMISSION)!=IBundleManager.PERMISSION_GRANTED){requestPermissionsFromUser(newString[]{PERMISSION},0);}Buttonbutton=(Button)findComponentById(ResourceTable.Id_button);Texttext=(Text)findComponentById(ResourceTable.Id_text);//点击迁移button.setClickedListener(component->{//查询分布式网络中所有在线设备（不包括本地设备）的信息。ListdeviceList=DeviceManager.getDeviceList(DeviceInfo.FLAG_GET_ONLINE_DEVICE);if(deviceList.size()>0){//启动迁移，指定的设备IDcontinueAbility(deviceList.get(0).getDeviceId());}});//显示迁移的数据text.setText("迁移的数据："+data);}/***启动迁移时首次调用此方法*@return是否进行迁移*/@OverridepublicbooleanonStartContinuation(){returntrue;}/***迁移时存入数据*/@OverridepublicbooleanonSaveData(IntentParamsintentParams){intentParams.setParam("data","测试数据");returntrue;}/***获取迁移存入的数据，在生命周期的onStart之前执行*/@OverridepublicbooleanonRestoreData(IntentParamsintentParams){data=(String)intentParams.getParam("data");returntrue;}/***迁移完成*/@OverridepublicvoidonCompleteContinuation(inti){}}

根据上面的核心代码示例，了解实现原理，接下来便可以结合实际需求完善功能了。

系统图标评论选择