标签：15 --- Override PageSlider 组件 new TabList public

 

目录

• PageSlider组件
• • 基本用法
  • • 定义PageSlider组件
    • PageSliderProvider
    • 滑动页面
    • 设置字符串
  • TabList与PageSlider联动
  • • 修改主布局
    • 监听PageSlider与TabList

 

PageSlider组件

在前面介绍TabList组件之时，博主就提示过了，如果需要使用TabList进行页面的切换，必然用到PageSlider组件。

所以，今天我们将详细介绍PageSlider组件的使用规则。

基本用法

定义PageSlider组件

首先，我们使用XML布局文件进行PageSlider组件的定义。示例如下：

<PageSlider
        ohos:id="$+id:ability_main_pageslider"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:layout_alignment="center"/>

我们都知道，这种滑动切换页面的PageSlider组件，它每一页都基本是一个布局，所以我们需要为它创建一个布局。

但是它自己就是一个XML布局里面的一个组件，这如何操作呢？

PageSliderProvider

答案就是PageSliderProvider，这是一个类似前面讲解列表组件BaseItemProvider的适配器。不过它略微有些不同，我们先来看看如何使用它：

public class MyPageProvider extends PageSliderProvider {
    private AbilitySlice abilitySlice;
    private List<PageModel> list;

    public MyPageProvider(List<PageModel> list,AbilitySlice abilitySlice){
        this.list=list;
        this.abilitySlice=abilitySlice;
    }

    @Override
    public int getCount() {
        return this.list.size();
    }

    @Override
    public Object createPageInContainer(ComponentContainer componentContainer, int i) {
        final Component cpt;
        cpt = LayoutScatter.getInstance(this.abilitySlice).parse(ResourceTable.Layout_pageslider_layout, null, false);
        componentContainer.addComponent(cpt);
        cpt.setLayoutConfig(new StackLayout.LayoutConfig(
                ComponentContainer.LayoutConfig.MATCH_PARENT,
                ComponentContainer.LayoutConfig.MATCH_PARENT
        ));
        PageModel pageModel = this.list.get(i);
        Text name = (Text) cpt.findComponentById(ResourceTable.Id_pageslider_layout_name);
        name.setText(pageModel.getName());
        return cpt;
    }

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

    @Override
    public boolean isPageMatchToObject(Component component, Object o) {
        return true;
    }
}

重要的代码都在createPageInContainer()方法里面，本身PageSliderProvider就是一个布局，我们需要将该布局中添加组件，这里可以直接添加一个界面layout。

然后，我们在自定定义和配置该界面layout中的资源。

滑动页面

当然，我们这里主要是为了讲解PageSlider组件的使用，我们在这里放置一个不同的文本即可。布局文件代码如下（pageslider_layout.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:orientation="vertical">

    <StackLayout
        ohos:height="match_parent"
        ohos:width="match_parent">

        <Text
            ohos:id="$+id:pageslider_layout_name"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="30vp"
            ohos:text_color="#FF0000"
            ohos:layout_alignment="center"/>

    </StackLayout>

</DirectionalLayout>

这里，就只有一个文本组件，我们在MyPageProvider设置了该文本的内容。当然，是我们MainAbilitySlice类传递给它的实体类。

设置字符串

public class MainAbilitySlice extends AbilitySlice {
    HiLogLabel label=new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
    private PageSlider pageSlider;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.pageSlider=(PageSlider)findComponentById(ResourceTable.Id_ability_main_pageslider);
        this.pageSlider.setProvider(new MyPageProvider(getData(),this));
    }

    private List<PageModel> getData(){
        List<PageModel> pageModelList=new ArrayList<>();
        for (int i = 0; i < 5; i++) {
            pageModelList.add(new PageModel("Page"+(i+1)));
        }
        return pageModelList;
    }
}

如上面代码所示，我们为每个页面设置了“page+数字”组合的字符串。运行之后，实现的效果如下图所示：

TabList与PageSlider联动

前面介绍TabList博主就说过了，它可以结合PageSlider进行联动。尽然，到这里我们2个组件的功能都已经掌握，那么实战吧！

修改主布局

ability_main.xml文件刚开始只是一个PageSlider组件，因为需要与PageSlider联动，所以需要添加TabList组件，示例如下：

<?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:background_element="#000000"
    ohos:orientation="vertical">

    <TabList
        ohos:id="$+id:ability_main_tablist"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:tab_length="60vp"
        ohos:text_alignment="center"
        ohos:orientation="horizontal"
        ohos:text_size="20vp"
        ohos:normal_text_color="#FFFFFF"
        ohos:selected_text_color="#00FF00"
        ohos:selected_tab_indicator_color="#FF0000"
        ohos:selected_tab_indicator_height="5vp"/>

    <PageSlider
        ohos:id="$+id:ability_main_pageslider"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:layout_alignment="center"/>

</DirectionalLayout>

监听PageSlider与TabList

因为我们是需要PageSlider与TabList组件联动。

那么翻页操作时，要监听PageSlider组件的滑动，然后切换TabList组件的选中项，而PageSlider组件的滑动监听由addPageChangedListener负责。

而TabList组件切换，也应该变更PageSlider组件的页面选择，所以我们还需要监听TabList组件切换事件：addTabSelectedListener。

示例如下：

public class MainAbilitySlice extends AbilitySlice {
    HiLogLabel label = new HiLogLabel(HiLog.LOG_APP, 0x00201, "TAG");
    private PageSlider pageSlider;
    private TabList tabList;
    private String[] tab_str_list = {"关注", "推荐", "热榜", "问答", "社区", "Blink"};

    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        this.pageSlider = (PageSlider) findComponentById(ResourceTable.Id_ability_main_pageslider);
        this.pageSlider.setProvider(new MyPageProvider(getData(), this));
        this.tabList = (TabList) findComponentById(ResourceTable.Id_ability_main_tablist);
        for (int i = 0; i < tab_str_list.length; i++) {
            TabList.Tab tab = tabList.new Tab(getContext());
            tab.setText(tab_str_list[i]);
            this.tabList.addTab(tab);
            if (i == 0) {
                tab.select();
            }
        }
        this.tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {
                //当某个Tab从未选中状态变为选中状态时的回调
                pageSlider.setCurrentPage(tab.getPosition());
            }

            @Override
            public void onUnselected(TabList.Tab tab) {
                //当某个Tab从选中状态变为未选中状态时的回调
            }

            @Override
            public void onReselected(TabList.Tab tab) {
                //当某个Tab已处于选中状态，再次被点击时的状态回调
            }
        });
        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) {
                tabList.selectTabAt(itemPos);
            }
        });
    }

    private List<PageModel> getData() {
        List<PageModel> pageModelList = new ArrayList<>();
        for (int i = 0; i < 6; i++) {
            pageModelList.add(new PageModel("Page" + (i + 1)));
        }
        return pageModelList;
    }
}

这里的代码很简单，就是添加了2个方法，而TabList组件的使用，前面已经介绍过，这里就不在赘述。运行之后，效果如首图所示。

 

 

标签：15,---,Override,PageSlider,组件,new,TabList,public
来源： https://blog.51cto.com/liyuanjinglyj/2962783

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。