0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

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

OpenHarmony技术社区 来源:HarmonyOS技术社区 作者:HarmonyOS技术社区 2022-01-04 14:41 次阅读

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

效果图如下:

具体实现

定 tablist 布局:









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

java 代码逻辑,顶部标签数据:

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

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

privatevoidinitview(){
TabListtabList=(TabList)findComponentById(ResourceTable.Id_tab_list);
if(tabList!=null){
for(inti=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 切换逻辑:

privatevoidaddHomeFraction(){
getFractionManager()
.startFractionScheduler()
.add(ResourceTable.Id_mainstack,newAttentionFraction())
.submit();
}


publicvoidlayoutShow(intcode){
switch(code){
case0:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newAttentionFraction())
.submit();

break;
case1:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newRecommendFraction())
.submit();


break;
case2:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newHotspotFraction())
.submit();

break;
case3:
getFractionManager()
.startFractionScheduler()
.replace(ResourceTable.Id_mainstack,newQuestionFraction())
.submit();

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

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

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

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

②关注模块

布局文件:







java 逻辑代码:

packagecom.example.tablist.fraction;
importcom.example.tablist.ResourceTable;
importcom.example.tablist.bean.PositionInfo;
importcom.example.tablist.config.Api;
importcom.example.tablist.provider.PositionProvider;
importcom.google.gson.Gson;
importohos.aafwk.ability.fraction.Fraction;
importohos.aafwk.content.Intent;
importohos.agp.components.Component;
importohos.agp.components.ComponentContainer;
importohos.agp.components.LayoutScatter;
importohos.agp.components.ListContainer;
importjava.util.List;
/***
*
*创建人:xuqing
*创建2021年2月28日1703
*类说明:关注模块
*
*/
publicclassAttentionFractionextendsFraction{
privatePositionProviderpositionProvider;
privateListContainerlistContainer;
@Override
protectedComponentonComponentAttached(LayoutScatterscatter,ComponentContainercontainer,
Intentintent){
Componentcomponent=scatter.parse(ResourceTable.Layout_fraction_attention,container,false);
returncomponent;
}
protectedvoidonStart(Intentintent){
super.onStart(intent);
listContainer=(ListContainer)
getFractionAbility().findComponentById(ResourceTable.Id_jop_page_list);
getPostition();
}
publicvoidgetPostition(){
Gsongson=newGson();
PositionInfopositionInfo=gson.fromJson(Api.getPositioninfo(),PositionInfo.class);
Listlist=positionInfo.getData();
positionProvider=newPositionProvider(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技术社区】欢迎添加关注!文章转载请注明出处。

审核编辑:彭菁

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • JAVA
    +关注

    关注

    19

    文章

    2903

    浏览量

    102867
  • 代码
    +关注

    关注

    30

    文章

    4536

    浏览量

    66490
  • 鸿蒙
    +关注

    关注

    54

    文章

    1446

    浏览量

    42032

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

文章出处:【微信号:gh_834c4b3d87fe,微信公众号:OpenHarmony技术社区】欢迎添加关注!文章转载请注明出处。

收藏 人收藏

    评论

    相关推荐

    用DGUS做的PPT切换页面效果

    本帖最后由 ccn 于 2018-8-27 16:13 编辑 用DGUS做的PPT切换页面效果,其实就是利用了DGUS的“剪切图片区域”指令,可惜的是只能剪切矩形。可以按顺序剪切,也可以打乱了
    发表于 08-27 16:10

    fraction为什么编译不过?

    fraction=(temp-mantissa)*16;写成fraction=(temp-mantissa)
    发表于 08-21 08:00

    【HarmonyOS HiSpark IPC DIY Camera试用 】产品切换鸿蒙技术研究项目

    项目名称:产品切换鸿蒙技术研究项目试用计划:申请理由本人在OS领域有多年的学习和开发经验,曾设计和开发过多款嵌入式OS的系统软件。对鸿蒙OS有较深入的了解。对鸿蒙的分布式调度、一处开发
    发表于 10-29 15:16

    搭载HarmonyOS鸿蒙系统2.0的华为P40演示

    搭载HarmonyOS鸿蒙系统2.0的华为P40演示
    发表于 01-14 09:32

    HarmonyOS-JS商城手机TV分布式布局效果练习

    ` 本帖最后由 李洋水蛟龙 于 2021-3-5 17:24 编辑 一、效果展示 二、简要说明主要是参照鸿蒙官方演示代码,实现的各项效果
    发表于 03-05 17:20

    ComponentCodelab——Tablist的使用方法

    让开发者了解HarmonyOS应用开发常用布局和常用组件之Tablist的使用方法,体验从工程创建到代码、布局的编写,再到编译构建、部署和运行的全过程。
    发表于 05-08 22:04

    ComponentCodelab——体验TabList和Tab组件(实操)

    演示鸿蒙ComponentCodelab中TabList和Tab组件的使用
    发表于 05-09 17:06

    TabList find为什么总是返回null?

    TabList为什么findComponentById返回null在xml中已经定义过了,发现总是返回null
    发表于 03-16 14:12

    如何利用Tab搭建一个页面切换的框架

    ,能够实现一个非常实用的功能——当用户左右滑动屏幕或点击Tab时可以自由切换包含不同业务功能的界面。在本期的知识分享中,笔者将展示如何利用Tab搭建一个页面切换的框架,希望能为读者们带来帮助与启发
    发表于 04-02 09:40

    请问下鸿蒙webview切换后台后,要怎么才能停止声音的播放?

    请问下鸿蒙webview切换后台后,要怎么才能停止声音的播放我是用了onInactive,依然没有起到效果
    发表于 05-11 11:21

    android界面切换之动画效果全汇总

    android界面切换之动画效果全汇总
    发表于 03-19 11:23 0次下载

    基于AS脚本的flash图片自动切换效果实现

    本文详细介绍了用Adobe Flash Professional CS5.5脚本设计图片切换效果的技术和步骤,并附上脚本详细代码,对网站动画设计和多媒体课件制作都具有一定的指导作用。
    的头像 发表于 11-15 08:43 3165次阅读
    基于AS脚本的flash图片自动<b class='flag-5'>切换</b><b class='flag-5'>效果</b>的<b class='flag-5'>实现</b>

    Fluid catalytic cracking of petroleum fraction

    Fluid catalytic cracking of petroleum fraction(5g电源技术要求)-Fluid catalytic cracking of petroleum fraction (vacuum gas oil) to produce gaso
    发表于 08-04 16:49 10次下载
    Fluid catalytic cracking of petroleum <b class='flag-5'>fraction</b>

    鸿蒙ListContainer粘性头部装饰器组件

    TabList+PageSlider 联动,实现翻页滑动效果TabList 实现 page 页 title 自定义显示,PageSlid
    的头像 发表于 10-19 09:06 1168次阅读

    基于openharmony实现绑定ability和fraction页面切换的三方库

    项目介绍 项目名称:Alligator 所属系列:openharmony的第三方组件适配移植 功能:通过注解处理器实现一套绑定ability和fraction页面切换的三方库 项目移植状态:主功能
    发表于 04-08 10:21 1次下载