#星光计划1.0# HarmonyOS 自定义组件之Header Decor 原创 精华

深开鸿
发布于 2021-10-13 09:42
浏览
4收藏

作者:杜晨阳

介绍

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

功能展示

#星光计划1.0# HarmonyOS 自定义组件之Header Decor-鸿蒙开发者社区

原理解析

#星光计划1.0# HarmonyOS 自定义组件之Header Decor-鸿蒙开发者社区

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

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

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

滑动处理逻辑如下:

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

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

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

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

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

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

使用说明

  • Java 调用示例
      使用1:
      // 获取ListContainer 
      ListContainer listContainer = (ListContainer) rootView.findComponentById(ResourceTable.Id_list_double_inline);
      //需要的数据
      List<ItemModel> 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<ItemModel> 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_ohos:header-decor:1.0.0'   
}

源码下载

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

更多原创内容请关注:开鸿 HarmonyOS 学院

入门到精通、技巧到案例,系统化分享HarmonyOS开发技术,欢迎投稿和订阅,让我们一起携手前行共建鸿蒙生态。

【本文正在参与51CTO HarmonyOS技术社区创作者激励-星光计划1.0】

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
已于2021-10-13 10:29:25修改
6
收藏 4
回复
举报
2条回复
按时间正序
/
按时间倒序
longlong899
longlong899

好文,感谢分享!!!

回复
2021-10-13 10:43:09
深开鸿开发板
深开鸿开发板

很实用的组件哦

回复
2021-11-4 15:59:29
回复
    相关推荐