前言:
各位同学大家好有段时间没有给大家更新文章,具体多久我也不记得,最近在学习鸿蒙开发写了一些小demo 就想着分享给家 今天要讲的是 ListContainer 鸿蒙OS开发中的 列表组件
效果图:
具体实现:
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。必须重写的方法如下:
代码示例如下:
- 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;
- }
显示效果:
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();
- }
- });
效果如下
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;
- }
- });
效果如下
ListContainer的样式设置
表2 ListContainer的样式设置
设置ListContainer的布局方向:orientation设置为“horizontal”,表示横向布局;orientation设置为“vertical”,表示纵向布局。默认为纵向布局
在xml中设置:
- <ListContainer ... ohos:orientation="horizontal"/>
在Java代码中设置
- listContainer.setOrientation(Component.HORIZONTAL);
横向滑动效果如图
设置ListContainer的开始和结束偏移量
- listContainer.setContentOffSet(32,16);
为了便于观察,分别在子布局和ListContainer布局中添加背景色:
在item_sample.xml的根布局中添加背景色。
- <DirectionalLayout ... ohos:background_element="#FAEBD7"> ...</DirectionalLayout>
在ListContainer布局文件中添加背景色。
- <ListContainer ... ohos:background_element="#FFDEAD"/>
设置列表容器的开始偏移量为32,结束偏移量为16效果
设置回弹效果。
在xml中设置:
- <ListContainer ... ohos:rebound_effect="true"/>
在Java代码中设置
- listContainer.setReboundEffect(true);
在开启回弹效果后,可以调用setReboundEffectParams()方法调整回弹效果。
- listContainer.setReboundEffectParams(40,0.6f,20);
设置着色器颜色。
在xml中设置:
- <ListContainer ... ohos:shader_color="#90EE90"/>
在Java代码中设置:
- listContainer.setShaderColor(new Color(Color.getIntColor("#90EE90")));
效果如下图
到此鸿蒙os 列表组件 ListContainer 基础知识就讲完了
最后总结
鸿蒙 os ListContainer 列表组件基本用法和Android原生的lsitview 比较像 但是比起原生安卓的listview 更加强大 原生android 并不直接支持横向滑动 以及直接支持回弹效果 ListContainer 基本用法对于安卓程序员来说比较好上手 看一下api 学习下本就能灵活运用了 以上就是我个人在学习了2天的鸿蒙os开发 ListContainer 基础总结
原文链接:https://harmonyos.51cto.com