【Harmony OS】【JAVA UI】鸿蒙怎么实现无限轮播功能
关于 HarmonyOS 开发中鸿蒙的无线轮播功能(效果图如下)是一个很常见的功能,在鸿蒙中怎么实现呢?今天写一个demo来记录一下该功能的实现,主要分为“准备工作”,“图片轮播”,“无线轮播”,“运行效果”四个方面进行实
1. 准备工作
1.1 想要实现无线轮播功能需要查看PageSlider和“线程管理”,“线程通信”这个几个知识的准备
1.2 图片准备
我们从网上下载几张图片放在 resources/base/media 目录下(如下如所示)
2. 图片轮播
2.1 xml 布局书写
我们新建一个 AbilitySlice 的界面然后在他的 layout 布局代码如下
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<PageSlider
ohos:top_margin="10vp"
ohos:id="$+id:page_slider"
ohos:height="300vp"
ohos:width="300vp"
ohos:layout_alignment="horizontal_center"/>
</DirectionalLayout>
2.2 书写 TestPageProvider
这个可以参考 HarmonyOS 官网的 TestPageProvider (具体代码如下)
package com.harmony.alliance.mydemo.adapter;
import com.harmony.alliance.mydemo.ResourceTable;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.*;
import ohos.agp.components.element.ShapeElement;
import ohos.agp.utils.Color;
import ohos.agp.utils.TextAlignment;
import ohos.app.Context;
import java.util.List;
public class TestPageProvider extends PageSliderProvider {
// 数据源,每个页面对应list中的一项
private List<Integer> list;
private Context mContext;
public TestPageProvider(List<Integer> list, Context context) {
this.list = list;
this.mContext = context;
}
@Override
public int getCount() {
return list.size();
}
@Override
public Object createPageInContainer(ComponentContainer componentContainer, int i) {
Image image = new Image(mContext);
image.setPixelMap(list.get(i));
image.setLayoutConfig (
new StackLayout.LayoutConfig (
ComponentContainer.LayoutConfig.MATCH_PARENT,
ComponentContainer.LayoutConfig.MATCH_PARENT
));
image.setScaleMode(Image.ScaleMode.STRETCH);
componentContainer.addComponent(image);
return image;
}
@Override
public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
componentContainer.removeComponent((Component) o);
}
@Override
public boolean isPageMatchToObject(Component component, Object o) {
return true;
}
}
2.3 写 abilitySlice 文件
在 abilitySlice的Onstart 的方中进行如下查找组件和初始化 TestPageProvider 和设置 page 缓存(具体代码如下)
protected void onStart(Intent intent) {
super.onStart(intent);
setUIContent(ResourceTable.Layout_ad_slot_pager);
pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider); //查找组件
//todo 初始化mTestPageProvider
TestPageProvider mTestPageProvider= new TestPageProvider(getData(), this);
pageSlider.setProvider(mTestPageProvider);
//todo 设置缓存page
pageSlider.setPageCacheSize(4);
eventRunner = EventRunner.create("TestRunner");
}
//todo 设置数据源
private ArrayList<Integer> getData() {
ArrayList<Integer> dataItems = new ArrayList<>();
for(int i=0;i<1024*10;i++) {
dataItems.add(images[i%4]);
}
return dataItems;
}
效果图如下