零基础学鸿蒙编程-UI控件_PageSlider 原创

蓝不蓝编程
发布于 2021-11-26 22:13
浏览
0收藏

什么是PageSlider

PageSlider是用于实现整页切换.效果图:
零基础学鸿蒙编程-UI控件_PageSlider-鸿蒙开发者社区

基础用法

  1. 在主布局文件"ability_main.xml"中增加PageSlider
   <PageSlider
        ohos:id="$+id:pager_slider"
        ohos:height="match_parent"
        ohos:width="match_parent"/>
  • 1.
  • 2.
  • 3.
  • 4.

零基础学鸿蒙编程-UI控件_PageSlider-鸿蒙开发者社区
2. 在Slice中实例化PageSlider,设置数据

public class MainAbilitySlice extends AbilitySlice {

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

        PageSlider pageSlider = (PageSlider) findComponentById(ResourceTable.Id_pager_slider);
        LayoutScatter layoutScatter = LayoutScatter.getInstance(getContext());
        Component component1 = layoutScatter.parse(ResourceTable.Layout_page1, null, false);
        Component component2 = layoutScatter.parse(ResourceTable.Layout_page2, null, false);

        List<Component> components = new ArrayList<>();
        components.add(component1);
        components.add(component2);
        pageSlider.setProvider(new PageSliderProvider() {
            @Override
            public int getCount() {
                return components.size();
            }

            @Override
            public Object createPageInContainer(ComponentContainer componentContainer, int i) {
                componentContainer.addComponent(components.get(i));
                return components.get(i);
            }

            @Override
            public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
                componentContainer.removeComponent(components.get(i));
            }

            @Override
            public boolean isPageMatchToObject(Component component, Object o) {
                return component == o;
            }
        });
    }
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
  • 22.
  • 23.
  • 24.
  • 25.
  • 26.
  • 27.
  • 28.
  • 29.
  • 30.
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  1. 两个页面对应代码:
  • page1.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">

    <Text
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:text="PageSlider1"
        ohos:text_alignment="center"
        ohos:text_size="25fp"/>
</DirectionalLayout>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • page2.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">

    <Text
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:text="PageSlider2"
        ohos:text_alignment="center"
        ohos:text_size="25fp"/>
</DirectionalLayout>
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.

完整源代码

https://gitee.com/hspbc/harmonyos_demos/tree/master/pageSliderDemo

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
1
收藏
回复
举报
1


回复
    相关推荐