PageSlider

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

支持的XML属性

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

PageSlider的使用方法

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

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

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

   | 方法名 | 作用 | | ------------------------------------------------------------ | ---------------------- | | getCount() | 获取可用视图的数量。 | | createPageInContainer(ComponentContainer componentContainer, int position) | 在指定位置创建页面。 | | destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) | 销毁容器中的指定页面。 | | isPageMatchToObject(Component component, Object o) | 视图是否关联指定对象。 |

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

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

       @Override    protected void onStart(Intent intent) {        ...        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;    }
   

   图1 PageSlider的使用效果

常用方法

• 常用方法表

  | 方法名 | 作用 | | ------------------------------------------------------------ | -------------------------------------------- | | setProvider(PageSliderProvider provider) | 设置Provider，用于配置PageSlider的数据结构。 | | addPageChangedListener(PageChangedListener listener) | 响应页面切换事件。 | | removePageChangedListener(PageChangedListener listener) | 移除页面切换的响应。 | | setOrientation(int orientation) | 设置布局方向。 | | setPageCacheSize(int count) | 设置要保留当前页面两侧的页面数。 | | setCurrentPage(int itemPos) | 设置当前展示页面。 | | setCurrentPage(int itemPos, boolean smoothScroll) | 设置当前展示界面，并确定是否需要平滑滚动。 | | setSlidingPossible(boolean enable) | 是否启用页面滑动。 | | setReboundEffect(boolean enabled) | 是否启用回弹效果。 | | setReboundEffectParams(int overscrollPercent, float overscrollRate,int remainVisiblePercent)setReboundEffectParams(ReboundEffectParams reboundEffectParams) | 配置回弹效果参数。 | | setPageSwitchTime(int durationMs) | 设置页面切换时间。 |

• 响应页面切换事件

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

• 设置布局方向，默认为横向布局

  在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);
  

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

• 设置是否启用页面滑动

  pageSlider.setSlidingPossible(false);
  

• 设置回弹效果

  pageSlider.setReboundEffect(true);
  

  图4 回弹效果

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

  pageSlider.setPageSwitchTime(2000);