HarmonyOS之常用组件ListContainer的功能和使用
2024-05-25 07:55:58
一、ListContainer 简介
- ListContainer 是用来呈现连续、多行数据的组件，包含一系列相同类型的列表项。
二、支持的 XML 属性
- ListContainer 的共有 XML 属性继承自 Component，详情请参考我的博客：HarmonyOS之组件通用的XML属性总览。
- ListContainer 的自有 XML 属性见下表：
| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
|---|---|---|---|---|
| rebound_effect | 开启/关闭回弹效果 | boolean类型 | 可以直接设置true/false，也可以引用boolean资源 | ohos:rebound_effect=“true” ohos:rebound_effect="$boolean:true" |
| shader_color | 着色器颜色 | color类型 | 可以直接设置色值，也可以引用color资源 | ohos:shader_color="#A8FFFFFF" ohos:shader_color="$color:black" |
| orientation | 列表项排列方向 | horizontal | 表示水平方向列表 | ohos:orientation=“horizontal” |
| orientation | 列表项排列方向 | vertical | 表示垂直方向列表 | ohos:orientation=“vertical” |
三、ListContainer 的使用方法
- 在 layout 目录下，AbilitySlice 对应的布局文件 page_listcontainer.xml 文件中创建 ListContainer：
<ListContainerohos:id="$+id:list_container"ohos:height="200vp"ohos:width="300vp"ohos:layout_alignment="horizontal_center"/>
- 在 layout 目录下新建 xml 文件（例：item_sample.xml），作为 ListContainer 的子布局：
<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns: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"><Textohos: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>
- 创建 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;}}
- ListContainer 每一行可以为不同的数据，因此需要适配不同的数据结构，使其都能添加到 ListContainer 上。
- 创建 SampleItemProvider.java，继承自 BaseItemProvider。必须重写的方法如下：
| 方法 | 作用 |
|---|---|
| int getCount() | 返回填充的表项个数 |
| Object getItem(int position) | 根据position返回对应的数据 |
| long getItemId(int position) | 返回某一项的id |
| Component getComponent(int position, Component covertComponent,ComponentContainer componentContainer) | 根据position返回对应的界面组件 |
- 代码示例如下：
import com.example.myapplication.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.agp.components.*;import java.util.List;public class SampleItemProvider extends BaseItemProvider {private List<SampleItem> list;private AbilitySlice slice;public SampleItemProvider(List<SampleItem> list, AbilitySlice slice) {this.list = list;this.slice = slice;}@Overridepublic int getCount() {return list == null ? 0 : list.size();}@Overridepublic Object getItem(int position) {if (list != null && position >= 0 && position < list.size()){return list.get(position);}return null;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {final Component cpt;if (convertComponent == null) {cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_item_sample, null, false);} else { cpt = convertComponent;}SampleItem sampleItem = list.get(position);Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);text.setText(sampleItem.getName());return cpt;}}
- 在 Java 代码中添加 ListContainer 的数据，并适配其数据结构：
@Overridepublic void onStart(Intent intent) {super.onStart(intent);super.setUIContent(ResourceTable.Layout_page_listcontainer);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);}private ArrayList<SampleItem> getData() {ArrayList<SampleItem> list = new ArrayList<>();for (int i = 0; i <= 8; i++) {list.add(new SampleItem("Item" + i));}return list;}
- listContainer 在 sampleItemProvider 初始化后修改数据：
private void initListContainer() {ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);List<SampleItem> list = getData();SampleItemProvider sampleItemProvider = new SampleItemProvider(list, this);listContainer.setItemProvider(sampleItemProvider);list.add(new SampleItem("Item" + sampleItemProvider.getCount()));listContainer.setBindStateChangedListener(new Component.BindStateChangedListener() {@Overridepublic void onComponentBoundToWindow(Component component) {// ListContainer初始化时数据统一在provider中创建，不直接调用这个接口；// 建议在onComponentBoundToWindow监听或者其他事件监听中调用。sampleItemProvider.notifyDataChanged();}@Overridepublic void onComponentUnboundFromWindow(Component component) {}});}
- ListContainer 的界面显示效果：
四、ListContainer 的常用 API
- 设置响应点击事件：
listContainer.setItemClickedListener((container, component, position, id) -> {SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(position);new ToastDialog(this).setText("you clicked:" + item.getName())// Toast显示在界面中间.setAlignment(LayoutAlignment.CENTER).show();});
- 响应点击事件效果：
- 设置响应长按事件：
listContainer.setItemLongClickedListener((container, component, position, id) -> {SampleItem item = (SampleItem) listContainer.getItemProvider().getItem(position);new ToastDialog(this).setText("you long clicked:" + item.getName()).setAlignment(LayoutAlignment.CENTER).show();return false;});
- 响应长按事件效果：
五、ListContainer 的样式设置
- ListContainer 的样式设置相关的接口如下：
| 属性 | Java方法 | 作用 |
|---|---|---|
| orientation | setOrientation(int orientation) | 设置布局方向 |
| - |
setContentStartOffSet(int startOffset) setContentEndOffSet(int endOffset) setContentOffSet(int startOffset, int endOffset) |
设置列表容器的开始和结束偏移量 |
| rebound_effect | setReboundEffect(boolean enabled) | 设置是否启用回弹效果 |
| - |
setReboundEffectParams(int overscrollPercent, float overscrollRate, int remainVisiblePercent) setReboundEffectParams(ListContainer.ReboundEffectParams reboundEffectParams) |
设置回弹效果参数 |
| shader_color | setShaderColor(Color color) | 设置着色器颜色 |
- 设置 ListContainer 的布局方向：orientation 设置为“horizontal”，表示横向布局；orientation 设置为“vertical”，表示纵向布局，默认为纵向布局。
- 在 xml 中设置：
<ListContainer...ohos:orientation="horizontal"/>
- 在 Java 代码中设置：
listContainer.setOrientation(Component.HORIZONTAL);
- 设置布局方向为 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")));
- 设置着色器效果如下：
六、ListContainer 性能优化
- 在适配 ListContainer 的数据时，无论是新创建的列表项实例，还是从缓存中获取到的，都需要调用方法 findComponentById() 获取所有子组件并进行数据填充，大量调用该方法，会损耗 ListContainer 的性能。比较好的解决方案是在创建列表项实例时进行调用，将获取到的所有子组件绑定到列表项的实例中，当从缓存中获取到列表项实例后，直接使用绑定的的子组件填充新数据。
- 创建 SettingItem.java，作为 ListContainer 的数据包装类：
public class SettingItem {private int imageId;private String settingName;private boolean isChecked;public SettingItem(int imageId, String settingName, boolean isChecked) {this.imageId = imageId;this.settingName = settingName;this.isChecked = isChecked;}public int getImageId() {return imageId;}public void setImageId(int imageId) {this.imageId = imageId;}public String getSettingName() {return settingName;}public void setSettingName(String settingName) {this.settingName = settingName;}public boolean isChecked() {return isChecked;}public void setChecked(boolean checked) {isChecked = checked;}}
- 在 layout 目录下创建列表项布局 layout_item_setting.xml：
<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="80vp"ohos:width="match_parent"ohos:padding="8vp"ohos:orientation="horizontal"><Imageohos:id="$+id:ima_setting"ohos:height="match_parent"ohos:width="0"ohos:layout_alignment="vertical_center"ohos:weight="2"></Image><Textohos:id="$+id:text_setting"ohos:height="match_content"ohos:width="0"ohos:padding="4fp"ohos:text_size="20fp"ohos:start_padding="8vp"ohos:end_padding="8vp"ohos:weight="6"ohos:layout_alignment="vertical_center"/><Switchohos:id="$+id:switch_setting"ohos:height="20vp"ohos:width="0vp"ohos:weight="1"ohos:layout_alignment="vertical_center"/></DirectionalLayout>
- 创建 SettingProvider.java，用于保存子组件的数据信息：
import com.example.myapplication.ResourceTable;import ohos.aafwk.ability.AbilitySlice;import ohos.agp.components.*;import ohos.agp.components.element.ShapeElement;import ohos.agp.components.element.StateElement;import java.util.List;public class SettingProvider extends BaseItemProvider{// ListContainer的数据集合private List<SettingItem> settingList;private AbilitySlice slice;public SettingProvider(List<SettingItem> list, AbilitySlice slice) {this.settingList = list;this.slice = slice;}// 用于保存列表项中的子组件信息public class SettingHolder {Image settingIma;Text settingText;Switch settingSwitch;SettingHolder(Component component) {settingIma = (Image) component.findComponentById(ResourceTable.Id_ima_setting);settingText = (Text) component.findComponentById(ResourceTable.Id_text_setting);settingSwitch = (Switch) component.findComponentById(ResourceTable.Id_switch_setting);settingSwitch.setTrackElement(trackElementInit(new ShapeElement(slice, ResourceTable.Graphic_track_on_element),new ShapeElement(slice, ResourceTable.Graphic_track_off_element)));settingSwitch.setThumbElement(thumbElementInit(new ShapeElement(slice, ResourceTable.Graphic_thumb_on_element),new ShapeElement(slice, ResourceTable.Graphic_thumb_off_element)));}private StateElement trackElementInit(ShapeElement on, ShapeElement off) {StateElement trackElement = new StateElement();trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);trackElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);return trackElement;}private StateElement thumbElementInit(ShapeElement on, ShapeElement off) {StateElement thumbElement = new StateElement();thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_CHECKED}, on);thumbElement.addState(new int[]{ComponentState.COMPONENT_STATE_EMPTY}, off);return thumbElement;}}@Overridepublic int getCount() {return settingList == null ? 0 : settingList.size();}@Overridepublic Object getItem(int position) {if (settingList != null && position >= 0 && position < settingList.size()){return settingList.get(position);}return null;}@Overridepublic long getItemId(int position) {return position;}@Overridepublic Component getComponent(int position, Component component, ComponentContainer componentContainer) {final Component cpt;SettingHolder holder;SettingItem setting = settingList.get(position);if (component == null) {cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_layout_item_setting, null, false);holder = new SettingHolder(cpt);// 将获取到的子组件信息绑定到列表项的实例中cpt.setTag(holder);} else {cpt = component;// 从缓存中获取到列表项实例后，直接使用绑定的子组件信息进行数据填充。holder = (SettingHolder) cpt.getTag();}holder.settingIma.setPixelMap(setting.getImageId());holder.settingText.setText(setting.getSettingName());holder.settingSwitch.setChecked(setting.isChecked());return cpt;}}
- 其中使用到的 graphic 资源文件如下：
- thumb_off_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="oval"><solidohos:color="#FFFFFF"/><boundsohos:top="0"ohos:left="0"ohos:right="20vp"ohos:bottom="20vp"/></shape>
- thumb_on_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="oval"><solidohos:color="#1E90FF"/><boundsohos:top="0"ohos:left="0"ohos:right="20vp"ohos:bottom="20vp"/></shape>
- track_on_element.xml：
<?xml version="1.0" encoding="utf-8"?><shape xmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:shape="rectangle"><solidohos:color="#87CEFA"/><cornersohos:radius="20vp"/></shape>
- 在 layout 目录下，AbilitySlice 对应的布局文件 page_listcontainer.xml 文件中创建 ListContainer：
<?xml version="1.0" encoding="utf-8"?><DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:padding="8vp"ohos:orientation="vertical"><ListContainerohos:id="$+id:list_container"ohos:height="match_parent"ohos:width="match_parent"/></DirectionalLayout>
- ListContainer 添加数据：
@Overrideprotected void onStart(Intent intent) {super.onStart(intent);setUIContent(ResourceTable.Layout_layout_listcontainer);ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);SettingProvider provider = new SettingProvider(getData(), this);listContainer.setItemProvider(provider);}private List<SettingItem> getData() {ArrayList<SettingItem> data = new ArrayList<>();for (int i = 0; i < 100; i++) {data.add(new SettingItem(ResourceTable.Media_icon,"SettingName" + i,i % 3 == 0));}return data;}
- 效果如下：
- 完整示例：HarmonyOS之以长列表联系人为例，演示ListContainer组件的基本使用。
HarmonyOS之常用组件ListContainer的功能和使用相关推荐
- HarmonyOS之常用组件RoundProgressBar的功能和使用
RoundProgressBar 继承自 ProgressBar,拥有 ProgressBar 的属性,在设置同样的属性时用法和 ProgressBar 一致,用于显示环形进度. RoundProgr ...
- HarmonyOS之常用组件TextField的功能和使用
一.支持的 XML 属性 TextField 的共有 XML 属性继承自:Text. Text 的自有 XML 属性,请参考我之前的博客:HarmonyOS之深入分析常用组件Text的功能和使用. T ...
- HarmonyOS之常用组件Button的功能和使用
一.Button 组件 Button 是一种常见的组件,点击可以触发对应的操作,通常由文本或图标组成,也可以由图标和文本共同组成. 文本按钮,如下所示: 图标按钮,如下所示: 图标和文本共同组成的按钮 ...
- HarmonyOS之常用组件ScrollView的功能和使用
一.ScrollView 功能 ScrollView 是一种带滚动功能的组件,它采用滑动的方式在有限的区域内显示更多的内容. 二.支持的 XML 属性 ScrollView 的共有 XML 属性继承自 ...
- HarmonyOS之常用组件Text的功能和使用
一.支持的 XML 属性 Text 是用来显示字符串的组件,在界面上显示为一块文本区域.Text 作为一个基本组件,有很多扩展,常见的有按钮组件 Button,文本编辑组件 TextField. Te ...
- HarmonyOS之常用组件ProgressBar的功能和使用
一.简介 ProgressBar 用于显示内容或操作的进度. ProgressBar 的共有 XML 属性继承自 Component,详情请参考我的博客:HarmonyOS之组件通用的XML属性总览. ...
- HarmonyOS之常用组件Image的功能和使用
一.支持的 XML 属性 Image 的共有 XML 属性继承自 Component,详情请参考我的博客:HarmonyOS之组件通用的XML属性总览. Image 的自有 XML 属性见下表: 属性 ...
- HarmonyOS之常用组件ToastDialog的功能和使用
一.ToastDialog 的使用 ToastDialog 是在窗口上方弹出的对话框,是通知操作的简单反馈.ToastDialog 会在一段时间后消失,在此期间,用户还可以操作当前窗口的其他组件. 创 ...
- HarmonyOS之常用组件TabList与Tab的功能和使用
一.什么是 Tablist 与 Tab ? Tablist 可以实现多个页签栏的切换,Tab 为某个页签. 子页签通常放在内容区上方,展示不同的分类. 页签名称应该简洁明了,清晰描述分类的内容. 二. ...
最新文章
- mac 怎么查找大于200m的文件_U盘无法拷贝大于4GB的文件怎么办？
- 性能优化技巧 - 内存关联计算
- Centos添加其他yum源
- 获取一亿数据获取前100个最大值
- 【JVM】CMS垃圾回收器（不推荐使用的垃圾回收器）
- python的map函数和reduce_python函数_map()、filter()和reduce()
- Redis GEO 特性在 LBS 中的应用总结
- RocketMQ类关系图之broker/store
- java 多线程课件_Thread_java多线程参考源码_ppt_大学课件预览_高等教育资讯网
- 数学作图工具_分别用于教学、排版、科研的数学作图软件
- 互联网行业的那些缩写PM,RD,FE,UE,QA,OP,BRD,MRD,PRD,FSD
- 山无棱-天地合-乃敢与君绝
- 高潮再次来袭：马云，东哥两位电商大佬，强行助攻 996
- 阿里巴巴年报来了，一天收入6.85亿
- MAC 权限Permission denied XXX
- Mentor Graphics Calibre 2017.1 Linux 1DVD寄生參數萃取
- matlab求多元函数的极小值,[转载]利用MATLAB求多元函数的极值（2）
- Linux(CentOS7)查看虚拟机IP
- ajax：php数组数据类型
- 干掉AlibabaProtect【windows10】