HarmonyOS —常用组件开发指导-PageSlider

PageSlider是用于页面之间切换的组件，它通过响应滑动事件完成页面间的切换。

支持的XML属性

PageSlider无自有的XML属性，共有XML属性继承自：StackLayout

PageSlider的创建和使用

在layout目录下的xml文件中创建PageSlider。

<PageSlider
    ohos:id="$+id:page_slider"
    ohos:height="300vp"
    ohos:width="300vp"
    ohos:layout_alignment="horizontal_center"/>

每个页面可能需要呈现不同的数据，因此需要适配不同的数据结构，创建TestPageProvider.java，需继承PageSliderProvider.java，必须重写以下方法：

TestPageProvider.java的代码示例如下所示：

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 java.util.List;
public class TestPageProvider extends PageSliderProvider {
    //数据实体类
    public static class DataItem{
        String mText;
        public DataItem(String txt) {
            mText = txt;
        }
    }
    // 数据源，每个页面对应list中的一项
    private List<DataItem> list;
    private Context mContext;

    public TestPageProvider(List<DataItem> list, Context context) {
        this.list = list;
        this.mContext = context;
    }
    @Override
    public int getCount() {
        return list.size();
    }
    @Override
    public Object createPageInContainer(ComponentContainer componentContainer, int i) {
        final DataItem data = list.get(i);
        Text label = new Text(null);
        label.setTextAlignment(TextAlignment.CENTER);
        label.setLayoutConfig(
                new StackLayout.LayoutConfig(
                        ComponentContainer.LayoutConfig.MATCH_PARENT, 
                        ComponentContainer.LayoutConfig.MATCH_PARENT
                ));
        label.setText(data.mText);
        label.setTextColor(Color.BLACK);
        label.setTextSize(50);
        label.setMarginsLeftAndRight(24, 24);
        label.setMarginsTopAndBottom(24, 24);
        ShapeElement element = new ShapeElement(mContext,ResourceTable.Graphic_background_page);
        label.setBackground(element);
        componentContainer.addComponent(label);
        return label;
    }
    @Override
    public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
        componentContainer.removeComponent((Component) o);
    }
    @Override
    public boolean isPageMatchToObject(Component component, Object o) {
        //可添加具体处理逻辑
        ...
        return true;
    }
}

graphic文件夹下的背景资源文件background_page.xml示例如下:

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:ohos="http://schemas.huawei.com/res/ohos"
       ohos:shape="rectangle">
    <corners
        ohos:radius="10vp"/>
    <solid
        ohos:color="#AFEEEE"/>
    <stroke
        ohos:width="5vp"
        ohos:color="#AAAAAA"/>
</shape>

在Java代码中添加数据，并适配PageSlider的数据结构。

    @Override
    protected void onStart(Intent intent) {
        ...
        initPageSlider();
    }
    private void initPageSlider() {
        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
        pageSlider.setProvider(new TestPageProvider(getData(), this));
    }
    private ArrayList<TestPageProvider.DataItem> getData() {
        ArrayList<TestPageProvider.DataItem> dataItems = new ArrayList<>();
        dataItems.add(new TestPageProvider.DataItem("Page A"));
        dataItems.add(new TestPageProvider.DataItem("Page B"));
        dataItems.add(new TestPageProvider.DataItem("Page C"));
        dataItems.add(new TestPageProvider.DataItem("Page D"));
        return dataItems;
    }

图1 PageSlider的使用效果

PageSlider的常用方法

常用方法

响应页面切换事件

    pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {
        @Override
        public void onPageSliding(int itemPos, float itemPosOffset, int itemPosPixles) { 
        }
        @Override
        public void onPageSlideStateChanged(int state) { 
        }
        @Override
        public void onPageChosen(int itemPos) { 
        }
    });

设置布局方向

PageSlider默认为横向布局。

在xml中设置布局方向为纵向，示例如下：

<PageSlider    ...    ohos:orientation="vertical"/>

在代码中设置，示例如下：

pageSlider.setOrientation(Component.VERTICAL);

图2 设置布局方向为纵向布局

设置缓存当前页面左右两侧的页面数

在xml中设置，示例如下：

<PageSlider    ...    ohos:page_cache_size="2"/>

在代码中设置，示例如下：

pageSlider.setPageCacheSize(2);

设置当前展示页面

pageSlider.setCurrentPage(2);

平滑滚动到指定页面

pageSlider.setCurrentPage(2,true);

在xml中添加按钮，示例如下：

<Button    ohos:id="$+id:btn_smoslide_page"    ohos:height="match_content"    ohos:width="match_content"    ohos:background_element="$graphic:btn_bg_element"    ohos:layout_alignment="center"    ohos:padding="4vp"    ohos:text="Smooth scroll to page C"    ohos:text_size="20fp"    ohos:top_margin="16vp"/>

graphic文件夹下的背景资源文件btn_bg_element.xml示例如下：

<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"       ohos:shape="rectangle">    <corners        ohos:radius="10vp"/>    <solid        ohos:color="#1E90FF"/></shape>

在Java代码中添加按钮的点击事件，使PageSlider平滑滚动到页面C。

Button btn = (Button) findComponentById(ResourceTable.Id_btn_smoslide_page);btn.setClickedListener(component -> {    pageSlider.setCurrentPage(2, true);});

图3 平滑滚动到页面C的效果

设置是否启用页面滑动

pageSlider.setSlidingPossible(false);

设置回弹效果

pageSlider.setReboundEffect(true);

图4 设置回弹效果

设置页面切换时间

设置页面切换时间，单位：ms

pageSlider.setPageSwitchTime(2000);