鸿蒙 Tablist 组件与 PageSlider 联动实现滑动切换页面功能

实现的效果如下图：

 在我学习的过程中遇到了三个问题，解决了这三个问题，便能解决滑动切换的需求功能。

1. TabList如何实现放在界面下端？
2. PageSlider与TabList各自如何实现？
3. PageSlider与TabList如何进行联动？

带着这三个问题，学起来就很轻松了。

一.TabList如何实现放在界面下端？

        这个问题只需要给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:orientation="vertical">

    <PageSlider
        ohos:id="$+id:pageSlider"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:weight="1"/>

    <TabList
        ohos:height="55vp"
        ohos:width="match_parent"
        ohos:background_element="#FF3A51C3"/>

</DirectionalLayout>

        这里我是通过DirectionalLayout布局的weight属性实现的，方法很多，只要使它布局位于界面下方就行。效果如下图：

 二.PageSlider与TabList各自如何实现？

         PageSlider的实现在我的《鸿蒙组件 PageSlider 界面滑动效果的应用》这篇文章有详细介绍，这里不做赘述。

        TabList的实现代码如下：

package com.jiakejian.myapplication.slice;

import com.jiakejian.myapplication.ResourceTable;
import com.jiakejian.myapplication.provider.PageProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.PageSlider;
import ohos.agp.components.TabList;

import java.util.ArrayList;
import java.util.List;

public class MainAbilitySlice extends AbilitySlice {
    private TabList tabList;
    private  PageSlider pageSlider;
    
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        initTablist();
        initPageSlider();
    }


    //初始化TabList
    private void initTablist() {
       
        tabList = (TabList) findComponentById(ResourceTable.Id_tabList);
        //添加数据
        String[] title = {"首页","分类","购物车","我的"};
        //将数据添加到tab当中
        for(int i = 0;i < title.length;i++){
            TabList.Tab tab = tabList.new Tab(this);
            tab.setText(title[i]);
            tabList.addTab(tab);
        }
    }

    //初始化PageSlider
    private void initPageSlider() {
        pageSlider = (PageSlider) findComponentById(ResourceTable.Id_pageSlider);
        PageProvider pageProvider = new PageProvider(saveData(),this);
        pageSlider.setProvider(pageProvider);
    }

    
    
    public List<Integer> saveData(){
        List<Integer> list = new ArrayList<>();
        list.add(ResourceTable.Layout_index_layout);
        list.add(ResourceTable.Layout_category_layout);
        list.add(ResourceTable.Layout_shopcart_layout);
        list.add(ResourceTable.Layout_My_layout);
        return list;
    }


    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

布局文件代码：

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

    <PageSlider
        ohos:id="$+id:pageSlider"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:weight="1"/>

    <TabList
        ohos:id="$+id:tabList"
        ohos:height="55vp"
        ohos:width="match_parent"
        ohos:text_alignment="center"
        ohos:fixed_mode="true"
        ohos:text_size="20fp"
        ohos:normal_text_color="#5A5A5A"
        ohos:selected_text_color="#FA1E23"
        ohos:selected_tab_indicator_color="#FA1E23"
        ohos:selected_tab_indicator_height="2vp"/>

</DirectionalLayout>

效果如下：

 

 三.PageSlider与TabList如何进行联动？

        答案是通过各自的监听事件进行联动。

        代码如下：

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

        initTablist();
        initPageSlider();

        tabList.selectTabAt(0);
        //给tab添加单机事件
        tabList.addTabSelectedListener(new TabList.TabSelectedListener() {

            @Override
            public void onSelected(TabList.Tab tab) {
                //连接PageSlider
                pageSlider.setCurrentPage(tab.getPosition());
            }

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

        //给PageSlider添加单机事件
        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) {
                //连接Tab
                if(i != tabList.getSelectedTabIndex()){
                    tabList.selectTabAt(i);
                }
            }
        });

实现最终的效果。