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

描述

 

这是一个 ListContainer 的粘性头部装饰器组件,主要用于展示列表+粘性头部的滑动效果。

       

原理解析

   

 

UI 显示部分如下图所示,基础布局采用 TabList+PageSlider 联动,实现翻页滑动效果,TabList 实现 page 页 title 自定义显示,PageSlider 通过加载不同的布局显示对应滑动列表。

 

单个 page 页面中采用 ListContainer+Text,header 头部是使用悬停的 Text 控件来显示的,根据需要显示的头部类型来加载 Text 控件数量。

 

这里需要注意:HarmonyOS SDK 6 及之前版本仍不支持 PageSlider 添加 Fraction,故采用 PageSlider 添加 ComponentContainer 方式实现相似效果。

 

滑动处理逻辑如下:

  • 首先在滑动监听接口中通过获取触摸点 Y 坐标值 point.getY() 来判断上下滑动方向。

  • 通过 Header 头部类型判断需要执行的代码逻辑,仅在需要更新 herader 头部显示时添加移动动画效果。

 

不同 header 头部类型滑动事件的处理思路是一样的,单头部 StickyHeader 逻辑如下:

  • 假设 herader 头部高度为 Y,列表单个 Item 高度为 Y,当触发列表向上滚动且当前列表显示在屏幕中的第二个 Item 是新的 Header 数据时,开始对 Text 控件执行向上滑动的动画效果。

  • 当触发列表向下滚动且当前列表显示在屏幕中的第一个 Item 是新的 Header 数据时,开始对 Text 控件执行向下滑动的动画效果。在滑动过程中,通过获取指定 Item.getTop() 与 Header 头部高度 Y 的差值。

  • 确定 Text 控件每次需要移动的 Y 轴坐标 moveY,该区间值 moveY 是 0 到 -Y 之间。最后通过调用 setContentPositionY() 方法实现控件滑动动画。

 

 

使用说明

   

 

Java 调用示例:

      使用1:
      // 获取ListContainer 
      ListContainer listContainer = (ListContainer) rootView.findComponentById(ResourceTable.Id_list_double_inline);
      //需要的数据
      List dataList = Utils.getDoubleInlineList();
      listContainer.setItemProvider(new InlineDoubleHeaderTestAdapter(context, dataList));
      //  将Text ListContainer列表与 HeaderDecor进行绑定
      HeaderDecor headerDecor = new HeaderDecor(listContainer, headerText, doubleText);
      //headerDecor调用setDataList()方法即可
      headerDecor.setDataList(dataList);

     使用2:
       Text text = (Text) rootView.findComponentById(ResourceTable.Id_title_text);
       // 获取ListContainer 
        ListContainer listContainer = (ListContainer)              rootView.findComponentById(ResourceTable.Id_list_sticky_inline);
         //需要的数据
        List dataList = Utils.getStickyInlineList();
        listContainer.setItemProvider(new InlineStickyTestAdapter(context, dataList));
          //  将Text ListContainer列表与 HeaderDecor进行绑定
        HeaderDecor headerDecor = new HeaderDecor(listContainer, text);
         //headerDecor调用setDataList()方法即可
        headerDecor.setDataList(dataList);
 

该三方库目前已经在 gitee 上开源并且发布 lib 仓库,可以在 moudle 级别下的 build.gradle 文件中添加依赖。

// 添加maven仓库
repositories {
   maven {
       url 'https://s01.oss.sonatype.org/content/repositories/releases/'
   }
}

// 添加依赖库
dependencies {
   implementation 'com.gitee.chinasoft_ohos1.0.0'   
}
   

源码下载

   

 

以上就是 Header-Decor 的介绍,代码已经开源到 header-decor,欢迎各位下载使用并提出宝贵意见!

https://gitee.com/chinasoft2_ohos/header-decor

 

责任编辑:haq
打开APP阅读更多精彩内容
声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉

全部0条评论

快来发表一下你的评论吧 !

×
20
完善资料,
赚取积分