鸿蒙 TabList 配合 Fraction 实现顶部切换效果演示

今天我想着配合鸿蒙里面提供的顶部切换控件 tablist，来实现顶部 tab 切换，然后下面多个 fraction 的效果。废话不多说，我们正式开始。

效果图如下：

具体实现

定 tablist 布局：

 

    我们在纵向线性布局上面写了一个 tablist 然后下面写了一个 StackLayout 来装载我们的多个 fraction。

 

java 代码逻辑，顶部标签数据：

 

private  String[] str={"关注","推荐","热点","问答"};

 

 

初始化 tab 并且添加顶部标签文字：

 

    private void initview() {
        TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
        if(tabList!=null){
            for (int i = 0; i < str.length; i++) {
                TabList.Tab tab = tabList.new Tab(getContext());
                tab.setText(str[i]);
                tabList.addTab(tab);
            }
           /* tabList.setTabLength(60); // 设置Tab的宽度
            tabList.setTabMargin(26); // 设置两个Tab之间的间距*/
            addHomeFraction();
            tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
                @Override
                public void onSelected(TabList.Tab tab) {
                    // 当某个Tab从未选中状态变为选中状态时的回调
                    System.out.println("当某个Tab从未选中状态变为选中状态时的回调");
                    layoutShow(tab.getPosition());
                }

                @Override
                public void onUnselected(TabList.Tab tab) {
                    // 当某个Tab从选中状态变为未选中状态时的回调
                    System.out.println("当某个Tab从选中状态变为未选中状态时的回调");
                }
                @Override
                public void onReselected(TabList.Tab tab) {
                    // 当某个Tab已处于选中状态，再次被点击时的状态回调
                    System.out.println("当某个Tab已处于选中状态，再次被点击时的状态回调");
                }
            });

        }
    }

 

我们初始化 tablist 控件后，for 循环设置我们 tablist 的 tab，并添加到 tablist 组件的 addTab 方法中。

①多个 fraction 切换逻辑：

 

    private void  addHomeFraction(){
        getFractionManager()
                .startFractionScheduler()
                .add(ResourceTable.Id_mainstack, new AttentionFraction())
                .submit();
    }


    public  void  layoutShow(int  code){
        switch (code){
            case 0:
                getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_mainstack, new AttentionFraction())
                        .submit();

                break;
            case 1:
                getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_mainstack, new RecommendFraction())
                        .submit();


                break;
            case 2:
                getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_mainstack, new HotspotFraction())
                        .submit();

                break;
            case 3:
                getFractionManager()
                        .startFractionScheduler()
                        .replace(ResourceTable.Id_mainstack, new QuestionFraction())
                        .submit();

                break;
            default:
                break;
        }
    }

  这边我们提供了一个 addHomeFraction 方法和 layoutShow 方法。   我们在进入 MainAbility 的时候调用 addHomeFraction 来加载第一个默认的 fraction。

 

然后我们在点击顶部的 tablist 标签的时候，我们在 onSelected 回调方法中调用 layoutShow方法。

 

     public void onSelected(TabList.Tab tab) {
                    // 当某个Tab从未选中状态变为选中状态时的回调
                    System.out.println("当某个Tab从未选中状态变为选中状态时的回调");
                    layoutShow(tab.getPosition());
                }

 

我们只需要传入 tab.getPosition() 点击顶部标签的下标即可，这样依赖我们的 tablist 配合多个 fraction 切换功能就实现了。具体的 fraction 的内部逻辑我们简单说一下。

②关注模块

布局文件：

 

 

java 逻辑代码：

 

package com.example.tablist.fraction;
import com.example.tablist.ResourceTable;
import com.example.tablist.bean.PositionInfo;
import com.example.tablist.config.Api;
import com.example.tablist.provider.PositionProvider;
import com.google.gson.Gson;
import ohos.aafwk.ability.fraction.Fraction;
import ohos.aafwk.content.Intent;
import ohos.agp.components.Component;
import ohos.agp.components.ComponentContainer;
import ohos.agp.components.LayoutScatter;
import ohos.agp.components.ListContainer;
import java.util.List;
/***
 *
 * 创建人：xuqing
 * 创建2021年2月28日1703
 * 类说明： 关注模块
 *
 */
public class AttentionFraction extends Fraction {
    private PositionProvider positionProvider;
    private ListContainer listContainer;
    @Override
    protected Component onComponentAttached(LayoutScatter scatter, ComponentContainer container, 
                  Intent intent) {
        Component component=scatter.parse(ResourceTable.Layout_fraction_attention,container,false);
        return component;
    }
    protected void onStart(Intent intent) {
        super.onStart(intent);
        listContainer= (ListContainer) 
        getFractionAbility().findComponentById(ResourceTable.Id_jop_page_list);
        getPostition();
    }
    public  void  getPostition(){
        Gson gson=new Gson();
        PositionInfo positionInfo=gson.fromJson(Api.getPositioninfo(),PositionInfo.class);
        List list=positionInfo.getData();
        positionProvider=new PositionProvider(list,  getFractionAbility());
        listContainer.setItemProvider(positionProvider);
    }
}

 

  几个 fraction 其实比较简单，都是加载本地死数据显示在 listContainer 控件上面。

其他几个 fraction 因为逻辑都差不多我这边就不展开一个一个讲，有兴趣的同学可以下载完整代码去查阅，鸿蒙到此 TabList 配合 Fraction 实现顶部切换效果就讲完了。

总结

      鸿蒙里面提供了比较好用的 tablist 组件，我们只需要简单的基本就能实现顶部 tab 的切换了。   然后配合 fraction 跟 Ability 进行绑定，但是我们的 Ability 需要继承 FractionAbility。这样我们就能完成 fraction 和 ability 的绑定。   我们在 tablist 的回调方法去调用我们替换 fraction 的方法就能实现顶部 tablist 点击切换的时候下面的 fraction 跟着一起切换。

更多的 tablist 和 fraction 的联动效果同学们有兴趣可以私下研究，我这边篇幅有限就不展开讲了。

最后希望我的文章能帮助到各位解决问题，以后我还会贡献更多有用的代码分享给大家。

项目地址：

 

https://gitee.com/qiuyu123/tablistcut

 

 

原文标题：在鸿蒙上实现“顶部切换”效果

文章出处：【微信公众号：HarmonyOS技术社区】欢迎添加关注！文章转载请注明出处。

　　审核编辑：彭菁