您当前的位置: 首页 >  ide

蓝不蓝编程

暂无认证

  • 5浏览

    0关注

    706博文

    0收益

  • 0浏览

    0点赞

    0打赏

    0留言

私信
关注
热门博文

零基础学鸿蒙编程-UI控件_PageSlider+PageSliderIndicator

蓝不蓝编程 发布时间:2021-10-31 09:09:48 ,浏览量:5

什么是PageSlider、PageSliderIndicator

PageSlider是用于实现整页切换. PageSliderIndicator用于辅助显示当前所处页面。 效果图:

基础用法
  1. 在主布局文件"ability_main.xml"中增加PageSliderPageSliderIndicator


    

    

  1. 在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 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;
            }
        });

        PageSliderIndicator pageSliderIndicator = (PageSliderIndicator) findComponentById(ResourceTable.Id_page_slider_indicator);
        pageSliderIndicator.setPageSlider(pageSlider);
    }
}
  1. 两个页面对应代码:
  • page1.xml



    

  • page2.xml



    

完整源代码

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

零基础系列

《零基础学安卓编程》 《零基础学Java编程》 《零基础学鸿蒙编程》

关于我

厦门大学计算机专业 | 前华为工程师 专注《零基础学编程系列》,包含:Java | 安卓 | 前端 | Flutter | iOS | 小程序 | 鸿蒙 全网可关注:花生皮编程

关注
打赏
1639405877
查看更多评论
立即登录/注册

微信扫码登录

0.0385s