# AStickyHeader_ohos **Repository Path**: isrc_ohos/asticky-header_ohos ## Basic Information - **Project Name**: AStickyHeader_ohos - **Description**: 鸿蒙开源组件，支持ListContainer的分组效果，支持给每一个分组添加标题,不支持分组标题栏滑动时置顶效果 - **Primary Language**: Java - **License**: Apache-2.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 4 - **Forks**: 1 - **Created**: 2021-02-04 - **Last Updated**: 2025-02-11 ## Categories & Tags **Categories**: harmonyos-menu **Tags**: HarmonyComponent ## README # AStickyHeader_ohos **本项目是基于开源项目AStickyHeader进行鸿蒙化的移植和开发的，可以通过项目标签以及github地址（https://github.com/DWorkS/AStickyHeader）追踪到原安卓项目版本。** ##### 项目介绍 - 项目名称：AStickyHeader_ohos - 所属系列：鸿蒙的第三方组件适配移植 - 功能：支持ListContainer的分组效果，支持给每一个分组添加标题,不支持分组标题栏滑动时置顶效果 - 项目移植状态：80%，由于harmonyos缺少dispatchdraw的对应方法，导致不能实现置顶效果 - 调用差异：将列表分组标题栏置顶的类名由 PinnedSectionListView 更改为 PinnedSectionListViewWrapper - 开发版本：sdk5，DevEco Studio3.0 Beta2 - 项目发起作者：刘磊 - 邮箱：792301176@qq.com - 原项目Doc地址：https://github.com/DWorkS/AStickyHeader - 分组列表布局标题栏 ![分组列表布局标题栏](https://images.gitee.com/uploads/images/2021/1009/143803_a883dec2_4971371.png "PinnedSectionListView.png") - 标题栏置顶 ![标题栏置顶](https://images.gitee.com/uploads/images/2021/1009/143430_8a83212f_4971371.png "StickyHeader.png") - 标题栏随滑动置换 ![标题栏随滑动置换](https://images.gitee.com/uploads/images/2021/1009/143447_b26020b8_4971371.png "HeaderReplace.png") - 分组网格布局标题栏 ![分组网格布局标题栏](https://images.gitee.com/uploads/images/2021/1009/143501_0009631c_4971371.png "PinnedSectionGridView.png") ##### 项目介绍 - 编程语言：Java - 本项目为封装的第三方库，使用时需要将库导入项目。 ##### 安装教程 1. 下载 jar 包 AStickyHeader.jar。 启动 DevEco Studio，将下载的jar包，导入工程目录“entry->libs”下。 在moudle级别下的build.gradle文件中添加依赖，在dependences标签中增加对libs目录下jar包的引用。 ``` dependencies { implementation fileTree(dir: 'libs', include: ['*.jar', '*.har']) …… } ``` 2. 在导入的jar包上点击右键，选择“Add as Library”对包进行引用，选择需要引用的模块，并点击“OK”即引用成功。 ##### 使用说明 这里以PinnedSectionListView为例 1. 需要用到的主要资源 ```Java //定义一个标题栏置顶的列表 private PinnedSectionListViewWrapper list; //自定义的内容项的BaseItemProvider private ImageAdapter mAdapter; //定义标题列表 private List sections = new ArrayList<>(); //图像资源id private Integer[] mImageIds = { ResourceTable.Media_cat1, ResourceTable.Media_cat2, ResourceTable.Media_cat3, ResourceTable.Media_cat4, ResourceTable.Media_cat5, ..., ResourceTable.Media_cat95, ResourceTable.Media_cat96, ResourceTable.Media_cat97, ResourceTable.Media_cat98, ResourceTable.Media_cat99, ResourceTable.Media_cat100, }; //标题名字 private String[] mHeaderNames = { "Cute Cats", "Few Cats", "Some Cats", "Some More Cats", "Some More More Cats", "Many Cats", "Many Many Cats", "So Many Cats" }; //标题位置 private Integer[] mHeaderPositions = { 0, 6, 11, 37, 38, 60, 77, 89 }; ``` PinnedSectionGridView同理。需要将PinnedSectionListViewWrapper换为PinnedSectionGridView，List换为List即可。 2. 自定义的列表内容项 Provider ```Java private class ImageAdapter extends BaseItemProvider{ private LayoutScatter mScatter; public ImageAdapter(Context context) { mScatter = LayoutScatter.getInstance(context); } @Override public int getCount() { return mImageIds.length; } @Override public Object getItem(int i) { return null; } @Override public long getItemId(int i) { return i; } @Override public Component getComponent(int i, Component component, ComponentContainer parent) { //将 图片和文字内容 与 component 绑定 Image image; Text name; if (component == null) { component = mScatter.parse(ResourceTable.Layout_list_item, parent, false); } image = (Image) component.findComponentById(ResourceTable.Id_img_listItem_image); image.setPixelMap(mImageIds[i]); name = (Text) component.findComponentById(ResourceTable.Id_tx_listItem_text); name.setText("A Cute Cat"+(i+1)); return component; } } ``` PinnedSectionGridView在实现列表内容项Provider与PinnedSectionListView相同。 3. 布局及初始化 3.1 xml布局 主页面布局：main_layout.xml ```xml ``` ```xml ``` ​ 内容项布局：list_item.xml ```xml ``` ​ 标题布局：list_item_header.xml ```xml ``` 3.2 代码中使用布局并初始化 列表布局SimpleSectionedListAdapter的使用 ```java /** * SimpleSectionedListAdapter 使用方法（需要自定义单项的 BaseItemProvider 或 直接使用 SimpleAdapter） * mAdapter 为实现 内容项 的 itemProvider * mHeaderPositions 为 需要添加置顶标题栏 的位置（内容项的坐标之前，从0开始） * mHeaderNames 为 需要添加置顶标题栏 的文字内容 * 实例化 SimpleSectionedListAdapter，传入 标题栏的 layoutId 和 标题栏中Text组件的 textId * 将刚刚设置好的 sections 传入 * 最后使用 setItemProvider 方法把 SimpleSectionedListAdapter 填入即可 */ lc_list_list = (PinnedSectionListViewWrapper) findComponentById(ResourceTable.Id_lc_list_list); //使用 ImageAdapter 作为 BaseItemProvider mAdapter = new ImageAdapter(this); //根据规定的 标题栏位置 创建 sections for(int i = 0; i < mHeaderPositions.length; i++) {tions.add(new Section(mHeaderPositions[i], mHeaderNames[i])); } //初始化 simpleSectionedListAdapter SimpleSectionedListAdapter simpleSectionedListAdapter = new SimpleSectionedListAdapter(this, mAdapter, ResourceTable.Layout_list_item_header, ResourceTable.Id_tx_listItemHeader_header); //设置sections simpleSectionedListAdapter.setSections(sections.toArray(new Section[0])); //设置adapter lc_list_list.setItemProvider(simpleSectionedListAdapter); ``` 网格布局SimpleSectionedGridAdapter的使用 ```java /** * SimpleSectionedGridAdapter 使用方法（需要自定义单项的 BaseItemProvider 或 直接使用 SimpleAdapter） * mAdapter 为实现 内容项 的 itemProvider * mHeaderPositions 为 需要添加置顶标题栏 的位置（内容项的坐标之前，从0开始） * mHeaderNames 为 需要添加置顶标题栏 的文字内容 * 实例化 SimpleSectionedListAdapter，传入 标题栏的 layoutId 和 标题栏的根组件id 和 标题栏中Text组件的 textId * 将 GridView 对象和 simpleSectionedGridAdapter 绑定 * 将刚刚设置好的 sections 传入 * 最后使用 setItemProvider 方法把 SimpleSectionedListAdapter 填入即可 */ tl_grid_grid = (GridView) findComponentById(ResourceTable.Id_tl_grid_grid); //使用 ImageAdapter 作为 BaseItemProvider mAdapter = new ImageAdapter(this); //根据规定的 标题栏位置 创建 sections for (int i = 0; i < mHeaderPositions.length; i++) { sections.add(new Section(mHeaderPositions[i], mHeaderNames[i])); //初始化 simpleSectionedGridAdapter SimpleSectionedGridAdapter simpleSectionedGridAdapter = new SimpleSectionedGridAdapter(this, mAdapter, ResourceTable.Layout_grid_item_header, ResourceTable.Id_dl_gridItemHeader, ResourceTable.Id_tx_gridItemHeader_header); //绑定GridView simpleSectionedGridAdapter.setGridView(tl_grid_grid); //设置sections simpleSectionedGridAdapter.setSections(sections.toArray(new Section[0])); //设置adapter tl_grid_grid.setItemProvider(simpleSectionedGridAdapter); ``` ##### 版本迭代 v0.2.0-alpha ##### 版权和许可信息 AStickyHeader_ohos经过[Apache License, version 2.0](http://www.apache.org/licenses/LICENSE-2.0)授权许可.