Harmony OS — PageSlider滑动页面

Posted 王睿丶

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Harmony OS — PageSlider滑动页面相关的知识,希望对你有一定的参考价值。

1、PageSlider 是什么?

简单:滑动页面
官方:PageSlider是用于页面之间切换的组件,它通过响应滑动事件完成页面间的切换。

2、简单使用

在这里插入图片描述
创建适配器 继承 PageSliderProvider.java
在这里插入图片描述

TestPagerProvider.java

package com.testruiwang.myapplication3.slice;
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 TestPagerProvider extends PageSliderProvider {
    // 数据源,每个页面对应list中的一项
    private List<DataItem> list;
    public TestPagerProvider(List<DataItem> list) {
        this.list = list;
    }
    @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);
        ShapeElement element = new ShapeElement();
        element.setRgbColor(RgbColor.fromArgbInt(Color.getIntColor("#AFEEEE")));
        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;
    }
    //数据实体类
    public static class DataItem{
        String mText;
        public DataItem(String txt) {
            mText = txt;
        }
    }
}

MainAbilitySlice.java

 @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        initPageSlider();
    }

    private void initPageSlider() {
        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_page_slider);
        pageSlider.setProvider(new TestPagerProvider(getData()));
    }
    private ArrayList<TestPagerProvider.DataItem> getData() {
        ArrayList<TestPagerProvider.DataItem> dataItems = new ArrayList<>();
        dataItems.add(new TestPagerProvider.DataItem("Page A"));
        dataItems.add(new TestPagerProvider.DataItem("Page B"));
        dataItems.add(new TestPagerProvider.DataItem("Page C"));
        dataItems.add(new TestPagerProvider.DataItem("Page D"));
        return dataItems;
    }

ability_main.xml

<?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:alignment="center"
    ohos:orientation="vertical">

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

</DirectionalLayout>

3、常用方法

在这里插入图片描述

(1)响应页面切换事件

        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) { 
            }
        });

(2)设置横向布局
在这里插入图片描述

<PageSlider
    ...
    ohos:orientation="vertical"/>
pageSlider.setOrientation(Component.VERTICAL);

(3)设置保留当前页面两侧的页面数

<PageSlider
    ...
    ohos:page_cache_size="2"/>
pageSlider.setPageCacheSize(2);

(4)设置当前展示页面

pageSlider.setCurrentPage(2);

(5)平滑滚动到指定页面

pageSlider.setCurrentPage(2,true);

(6)设置是否启用页面滑动

pageSlider.setSlidingPossible(false);

(7)设置回弹效果
在这里插入图片描述

pageSlider.setReboundEffect(true);

(8)设置页面切换时间,单位:ms

pageSlider.setPageSwitchTime(2000);

4、了解更多

PageSlider 更多

以上是关于Harmony OS — PageSlider滑动页面的主要内容,如果未能解决你的问题,请参考以下文章

Harmony OS — ScrollView滑动视图

Harmony OS — Picker滑动选择器

鸿蒙开发(15)---PageSlider组件

Harmony OS — ListContainer列表

Harmony OS 中用于 Android OS 中的 AccelerateInterpolator 和 OvershootInterpolator 的替代类是啥?

Harmony OS — DatePicker日期选择器