pageSlider结合TabList组件实现页面的导航和切换原创

^浅忆佳瓦～苦思甜

发布于 2022-5-1 18:42

1.0w浏览

1收藏

1.首先看一下工程目录和效果

pageSlider结合TabList组件实现页面的导航和切换-鸿蒙开发者社区

2.布局文件ability_main.xml

在该布局文件中添加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="bottom"
    ohos:orientation="vertical">

    <PageSlider
        ohos:id="$+id:page_slider"
        ohos:height="match_parent"
        ohos:width="match_parent">
    </PageSlider>

    <TabList
        ohos:id="$+id:tab_list"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:background_element="#ffffff"

        ohos:normal_text_color="#000000"
        ohos:selected_text_color="#21a8fd"

        ohos:selected_tab_indicator_color="#21a8fd"
        ohos:selected_tab_indicator_height="2vp"
        ohos:tab_indicator_type="bottom_line"

        ohos:text_size="17fp"
        ohos:fixed_mode="true"/>

</DirectionalLayout>

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.

3.创建四个布局文件，用于最终的页面展示和切换

此布局文件我只用一个text组件作为案例，其余三个同理

<?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">

    <Text
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:background_element="#ff0000"/>
</DirectionalLayout>

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

4.创建适配器类，并继承PageSliderProvider，重写里面的方法

public class MypageProvider extends PageSliderProvider {
    private List<Integer> list;//集合用于存放布局文件
    private AbilitySlice abilitySlice;//需要传递过来一个页面对象

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


    @Override
    public int getCount() {
        return list.size();//返回数量
    }

    @Override
    public Object createPageInContainer(ComponentContainer componentContainer, int i) {
        Integer index = list.get(i);
        Component page = LayoutScatter.getInstance(abilitySlice).parse(index,null,false);//得到当前页面的对像
        componentContainer.addComponent(page);//将布局添加到组件容器中
        return page;
    }

    @Override
    public void destroyPageFromContainer(ComponentContainer componentContainer, int i, Object o) {
        componentContainer.removeComponent((Component) o);//销毁前一个页面
    }

    @Override
    public boolean isPageMatchToObject(Component component, Object o) {
        return true;//返回true
    }
}
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.

5.在MainAbilitySlice.Java文件中的onstart方法中配置PageSlider和TabList组件

5.1将布局添加到集合当中，初始化PageSlider

List<Integer> list = new ArrayList<>();
        list.add(ResourceTable.Layout_first);
        list.add(ResourceTable.Layout_second);
        list.add(ResourceTable.Layout_third);
        list.add(ResourceTable.Layout_four);
        PageSlider pageSlider = findComponentById(ResourceTable.Id_page_slider);
        pageSlider.setProvider(new MypageProvider(list,this));//设置Provider

1.
2.
3.
4.
5.
6.
7.
8.

5.2初始化TabList

TabList tabList = findComponentById(ResourceTable.Id_tab_list);
        String [] table = {"页面1","页面2","页面3","页面4"};
        for (int i = 0; i < table.length; i++) {
            TabList.Tab tab = tabList.new Tab(this);
            tab.setText(table[i]);
            tabList.addTab(tab);
        }

1.
2.
3.
4.
5.
6.
7.
8.

此时基本页面已搭建完毕，但是TabList和PageSlider并没有联动

5.3TabList联动PageSlider

tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {//重要重写这个方法
                int position = tab.getPosition();
                pageSlider.setCurrentPage(position);
            }

            @Override
            public void onUnselected(TabList.Tab tab) {}

            @Override
            public void onReselected(TabList.Tab tab) {}
        });

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.

5.4PageSlider联动TabList

pageSlider.addPageChangedListener(new PageSlider.PageChangedListener() {
            @Override
            public void onPageSliding(int i, float v, int i1) {

            }

            @Override
            public void onPageSlideStateChanged(int i) {

            }

            @Override
            public void onPageChosen(int i) {//主要重写此方法
                if (tabList.getSelectedTabIndex() != i){
                    tabList.selectTabAt(i);
                }
            }
        });

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.