代码拉取完成，页面将自动刷新
本项目是基于开源项目AStickyHeader进行鸿蒙化的移植和开发的，可以通过项目标签以及github地址（https://github.com/DWorkS/AStickyHeader）追踪到原安卓项目版本。
项目名称：AStickyHeader_ohos
所属系列：鸿蒙的第三方组件适配移植
功能：支持ListContainer的分组效果，支持给每一个分组添加标题,不支持分组标题栏滑动时置顶效果
项目移植状态：80%，由于harmonyos缺少dispatchdraw的对应方法，导致不能实现置顶效果
调用差异：将列表分组标题栏置顶的类名由 PinnedSectionListView 更改为 PinnedSectionListViewWrapper
开发版本：sdk5，DevEco Studio3.0 Beta2
项目发起作者：刘磊
原项目Doc地址：https://github.com/DWorkS/AStickyHeader
dependencies {
implementation fileTree(dir: 'libs', include: ['*.jar', '*.har'])
……
}
这里以PinnedSectionListView为例
//定义一个标题栏置顶的列表
private PinnedSectionListViewWrapper list;
//自定义的内容项的BaseItemProvider
private ImageAdapter mAdapter;
//定义标题列表
private List<SimpleSectionedListAdapter.Section> 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<SimpleSectionedListAdapter.Section>换为List<SimpleSectionedGridAdapter.Section>即可。
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.1 xml布局
主页面布局：main_layout.xml
<!-- PinnedSectionListView -->
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<!-- 使用app命名空间传输自定义参数-->
<!-- xmlns:app="http://schemas.huawei.com/res/ohos-auto"-->
<com.huawei.astickyheader.lib.ui.PinnedSectionListViewWrapper
ohos:id="$+id:lc_list_list"
ohos:height="match_parent"
ohos:width="match_parent"/>
<!-- 如需侧边导航栏需要增加下面的参数-->
<!-- app:section_index="true"-->
</DirectionalLayout>
<!-- PinnedSectionGridView -->
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
xmlns:app="http://schemas.huawei.com/res/ohos-auto"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<ScrollView
ohos:height="match_parent"
ohos:width="match_parent">
<!-- vertical_spacing 和 horizontal_spacing-->
<!-- 是两个自定义参数，分别用于指定网格布局中的 垂直间距 和 水平间距-->
<com.huawei.astickyheader.lib.ui.PinnedSectionGridView
ohos:id="$+id:tl_grid_grid"
ohos:height="match_content"
ohos:width="match_parent"
ohos:left_margin="10vp"
ohos:right_margin="10vp"
app:vertical_spacing="4vp"
app:horizontal_spacing="4vp"
ohos:column_count="4"/>
</ScrollView>
</DirectionalLayout>
内容项布局：list_item.xml
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:height="65vp"
ohos:left_padding="10vp"
ohos:right_padding="10vp">
<Image
ohos:id="$+id:img_listItem_image"
ohos:width="65vp"
ohos:height="65vp"
ohos:scale_mode="clip_center"
ohos:image_src="$media:empty_photo" />
<Text
ohos:id="$+id:tx_listItem_text"
ohos:width="match_content"
ohos:height="match_content"
ohos:layout_alignment="vertical_center"
ohos:text="A Cute Cat"
ohos:text_size="60px"
ohos:margin="10vp"
ohos:text_color="#000000"/>
</DirectionalLayout>
标题布局：list_item_header.xml
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:height="30vp"
ohos:width="match_parent"
ohos:orientation="vertical"
ohos:left_padding="10vp">
<Text
ohos:id="$+id:tx_listItemHeader_header"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:text_size="15fp"
ohos:background_element="$ohos:color:id_color_background"
ohos:text_alignment="vertical_center"/>
</DirectionalLayout>
3.2 代码中使用布局并初始化
列表布局SimpleSectionedListAdapter的使用
/**
* 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的使用
/**
* 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授权许可.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
1. 开源生态
2. 协作、人、软件
3. 评估模型