鸿蒙系统中用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{
@Override
publicvoidonStart(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(){
/**
*获取当前适配器中可用视图的数量
*/
@Override
publicintgetCount(){
returnlistData.size();
}
/**
*创建页面
*/
@Override
publicObjectcreatePageInContainer(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;
}
/**
*销毁页面
*/
@Override
publicvoiddestroyPageFromContainer(ComponentContainercontainer,intposition,Objectobject){
//从容器中移除
container.removeComponent((Component)object);
}
/**
*检查页面是否与对象匹配
*/
@Override
publicbooleanisPageMatchToObject(Componentpage,Objectobject){
returntrue;
}
});

//添加页面改变监听器
pageSlider.addPageChangedListener(newPageSlider.PageChangedListener(){
/**
*页面滑动时调用
*/
@Override
publicvoidonPageSliding(intitemPos,floatitemPosOffset,intitemPosOffsetPixels){}
/**
*当页面滑动状态改变时调用
*/
@Override
publicvoidonPageSlideStateChanged(intstate){}
/**
*选择新页面时回调
*/
@Override
publicvoidonPageChosen(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;

@Override
publicvoidonStart(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(){
/**
*创建视频窗口
*/
@Override
publicvoidsurfaceCreated(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();
}

}
/**
*视频窗口改变
*/
@Override
publicvoidsurfaceChanged(SurfaceOpsholder,intformat,intwidth,intheight){}
/**
*视频窗口销毁
*/
@Override
publicvoidsurfaceDestroyed(SurfaceOpsholder){}
});
}
}

@Override
protectedvoidonStop(){
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";

@Override
publicvoidonStart(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){
//启动迁移，指定的设备ID
continueAbility(deviceList.get(0).getDeviceId());
}
});
//显示迁移的数据
text.setText("迁移的数据："+data);
}
/**
*启动迁移时首次调用此方法
*@return是否进行迁移
*/
@Override
publicbooleanonStartContinuation(){
returntrue;
}
/**
*迁移时存入数据
*/
@Override
publicbooleanonSaveData(IntentParamsintentParams){
intentParams.setParam("data","测试数据");
returntrue;
}
/**
*获取迁移存入的数据，在生命周期的onStart之前执行
*/
@Override
publicbooleanonRestoreData(IntentParamsintentParams){
data=(String)intentParams.getParam("data");
returntrue;
}
/**
*迁移完成
*/
@Override
publicvoidonCompleteContinuation(inti){}
}

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

责任编辑：haq