#星光计划2.0# 鸿蒙 ListContainer 基本用法 原创 精华

xq9527
发布于 2021-12-6 08:13
浏览
1收藏

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

前言:

各位同学大家好有段时间没有给大家更新文章,具体多久我也不记得,最近在学习鸿蒙开发写了一些小demo 就想着分享给家 今天要讲的是 ListContainer 鸿蒙OS开发中的 列表组件

效果图:

#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区
#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区
#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区

具体实现:

ListContainer是用来呈现连续、多行数据的组件,包含一系列相同类型的列表项。

ListContainer的使用方法

1.在layout目录下的xml文件中创建ListContainer。

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">
    <ListContainer
        ohos:id="$+id:list_container"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:layout_alignment="horizontal_center"/>
</DirectionalLayout>

2.在layout目录下新建xml文件(例:item_sample.xml),作为ListContainer的子布局

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:left_margin="16vp"
    ohos:right_margin="16vp"
    ohos:orientation="vertical">
    <Text
        ohos:id="$+id:item_index"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:padding="4vp"
        ohos:text="Item0"
        ohos:text_size="20fp"
        ohos:layout_alignment="center"/>
</DirectionalLayout>

3.创建SampleItem.java,作为ListContainer的数据包装类。

public class SampleItem {
    private String name;
    public SampleItem(String name) {
        this.name = name;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
}

4.ListContainer每一行可以为不同的数据,因此需要适配不同的数据结构,使其都能添加ListContainer上。创建SampleItemProvider.java,继承自RecycleItemProvider。必须重写的方法如下:
#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区
代码示例如下:

package com.example.listview;
import ohos.agp.components.*;
import java.util.List;
/**
 * 创建人:xuqing
 * 创建时间:2020年12月18日13:37:27
 * 类说明: 适配器
 * 
 * 
 * 
 */
public class SampleItemProvider extends RecycleItemProvider {
    private List<SampleItem> list;
    private MainAbility slice;
    public SampleItemProvider(List<SampleItem> list, MainAbility slice) {
        this.list = list;
        this.slice = slice;
    }
    @Override
    public int getCount() {
        return list.size();
    }
    @Override
    public Object getItem(int position) {
        return list.get(position);
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        if (convertComponent== null) {
            Component cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample,null,false);
            SampleItem sampleItem = list.get(position);
            Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);
            text.setText(sampleItem.getName());
            return cpt;
        } else {
            return convertComponent;
        }
    }
}

5.在Java代码中添加ListContainer的数据,并适配其数据结构。

 @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        initListContainer();
    }
    private void initListContainer() {
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
        List<SampleItem> list = getData();
        SampleItemProvider sampleItemProvider = new SampleItemProvider(list,this);
        listContainer.setItemProvider(sampleItemProvider);

        listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
            @Override
            public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
                SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
                new ToastDialog(MainAbility.this)
                        .setText("你点点击是:"+item.getName())
                        // Toast显示在界面中间
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
            }
        });

        listContainer.setItemLongClickedListener(new ListContainer.ItemLongClickedListener() {
            @Override
            public boolean onItemLongClicked(ListContainer listContainer, Component component, int i, long l) {
                SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
                new ToastDialog(MainAbility.this)
                        .setText("长按事件点击:"+item.getName())
                        // Toast显示在界面中间
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
                return false;
            }
        });

    }
  private ArrayList<SampleItem> getData() {
        ArrayList<SampleItem> list = new ArrayList<>();
        for (int i = 0; i <= 10; i++) {
            list.add(new SampleItem("item"+i));
        }
        return list;
    }

假数据

    private ArrayList<SampleItem> getData() {
        ArrayList<SampleItem> list = new ArrayList<>();
        for (int i = 0; i <= 10; i++) {
            list.add(new SampleItem("item"+i));
        }
        return list;
    }

显示效果:
#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区

ListContainer的常用设置

item 子布局 的点击事件

   listContainer.setItemClickedListener(new ListContainer.ItemClickedListener() {
            @Override
            public void onItemClicked(ListContainer listContainer, Component component, int i, long l) {
                SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
                new ToastDialog(MainAbility.this)
                        .setText("你点点击是:"+item.getName())
                        // Toast显示在界面中间
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
            }
        });

效果如下
#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区
item 子布局 的长按事件

  listContainer.setItemLongClickedListener(new ListContainer.ItemLongClickedListener() {
            @Override
            public boolean onItemLongClicked(ListContainer listContainer, Component component, int i, long l) {
                SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(i);
                new ToastDialog(MainAbility.this)
                        .setText("长按事件点击:"+item.getName())
                        // Toast显示在界面中间
                        .setAlignment(LayoutAlignment.BOTTOM)
                        .show();
                return false;
            }
        });

效果如下
#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区

ListContainer的样式设置

表2 ListContainer的样式设置
#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区

  • 设置ListContainer的布局方向:orientation设置为“horizontal”,表示横向布局;orientation设置为“vertical”,表示纵向布局。默认为纵向布局
    在xml中设置:
<ListContainer    ...    ohos:orientation="horizontal"/>

在Java代码中设置

listContainer.setOrientation(Component.HORIZONTAL);

横向滑动效果如图
#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区
设置ListContainer的开始和结束偏移量

listContainer.setContentOffSet(32,16);

为了便于观察,分别在子布局和ListContainer布局中添加背景色:

在item_sample.xml的根布局中添加背景色。

<DirectionalLayout    ...    ohos:background_element="#FAEBD7">    ...</DirectionalLayout>

在ListContainer布局文件中添加背景色。

<ListContainer    ...    ohos:background_element="#FFDEAD"/>

设置列表容器的开始偏移量为32,结束偏移量为16效果
#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区
设置回弹效果。
在xml中设置:

<ListContainer    ...    ohos:rebound_effect="true"/>

在Java代码中设置

listContainer.setReboundEffect(true);

#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区
在开启回弹效果后,可以调用setReboundEffectParams()方法调整回弹效果。

listContainer.setReboundEffectParams(40,0.6f,20);
  • 设置着色器颜色。
    在xml中设置:
<ListContainer    ...    ohos:shader_color="#90EE90"/>

在Java代码中设置:

listContainer.setShaderColor(new Color(Color.getIntColor("#90EE90")));

效果如下图
#星光计划2.0# 鸿蒙 ListContainer 基本用法-鸿蒙开发者社区
到此鸿蒙os 列表组件 ListContainer 基础知识就讲完了

最后总结

鸿蒙 os ListContainer 列表组件基本用法和Android原生的lsitview 比较像 但是比起原生安卓的listview 更加强大 原生android 并不直接支持横向滑动 以及直接支持回弹效果 ListContainer 基本用法对于安卓程序员来说比较好上手 看一下api 学习下本就能灵活运用了 以上就是我个人在学习了2天的鸿蒙os开发 ListContainer 基础总结 如果有纰漏和错误的地方希望大家指正 最后希望我的文章能帮助到各位解决问题 ,以后我还会贡献更多有用的代码分享给大家。各位同学如果觉得文章还不错 ,麻烦给关注和star,小弟在这里谢过啦

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
分类
标签
已于2021-12-8 11:58:04修改
3
收藏 1
回复
举报
1条回复
按时间正序
/
按时间倒序
dstt_l3
dstt_l3

标题是不是写错了😄

回复
2021-12-6 17:53:42
回复
    相关推荐