Harmony OS — ListContainer列表

Posted 2021-07-16 王睿丶

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Harmony OS — ListContainer列表相关的知识，希望对你有一定的参考价值。

文章目录

1、ListContainer 是什么？

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

2、简单使用

在这里插入图片描述

ability_main.xml

<?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"
    ohos:left_padding="40vp"
    ohos:top_padding="40vp">

    <ListContainer
        ohos:id="$+id:list_container"
        ohos:height="200vp"
        ohos:width="300vp"
        ohos:layout_alignment="horizontal_center"/>

</DirectionalLayout>

在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>

创建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。必须重写的方法如下：

代码示例如下：

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;
    }
    @Override
    public int getCount() {
        return list == null ? 0 : list.size();
    }
    @Override
    public Object getItem(int position) {
        if (list != null && position >= 0 && position < list.size()){
            return list.get(position);
        }
        return null;
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    @Override
    public 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的数据，并适配其数据结构

public class MainAbilitySlice extends AbilitySlice {

    @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);
    }
    private ArrayList<SampleItem> getData() {
        ArrayList<SampleItem> list = new ArrayList<>();
        for (int i = 0; i <= 30; i++) {
            list.add(new SampleItem("Item" + i));
        }
        return list;
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

3、ListContainer 常用接口

（1）设置响应点击事件
在这里插入图片描述

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();
});

（2）设置响应长按事件

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;
});

4、ListContainer 样式设置

ListContainer的样式设置相关的接口如下：
在这里插入图片描述

（1）设置水平布局

在这里插入图片描述

<ListContainer
    ...
    ohos:orientation="horizontal"/>

listContainer.setOrientation(Component.HORIZONTAL);

（2）自定义样式
实现：在子布局和ListContainer布局中添加背景色

在这里插入图片描述

设置ListContainer的开始和结束偏移量

listContainer.setContentOffSet(32, 16);

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

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

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

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

（3）设置回弹效果

在这里插入图片描述

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

listContainer.setReboundEffect(true);

在开启回弹效果后，可以调用setReboundEffectParams()方法调整回弹效果。

listContainer.setReboundEffectParams(40, 0.6f, 20);

（4）设置着色器颜色
在这里插入图片描述

<ListContainer
    ...
    ohos:shader_color="#90EE90"/>

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

5、ListContainer 性能优化

在适配ListContainer的数据时，无论是新创建的列表项实例，还是从缓存中获取到的，都需要调用方法findComponentById()获取所有子组件并进行数据填充，大量调用该方法，会损耗ListContainer的性能。比较好的解决方案是在创建列表项实例时进行调用，将获取到的所有子组件绑定到列表项的实例中，当从缓存中获取到列表项实例后，直接使用绑定的的子组件填充新数据。完整示例代码如下：

在这里插入图片描述

SettingItem.java

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_item_setting.xml

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="80vp"
    ohos:width="match_parent"
    ohos:padding="8vp"
    ohos:orientation="horizontal">

    <Image
        ohos:id="$+id:ima_setting"
        ohos:height="match_parent"
        ohos:width="0"
        ohos:layout_alignment="vertical_center"
        ohos:weight="2">
    </Image>

    <Text
        ohos: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"/>

    <Switch
        ohos:id="$+id:switch_setting"
        ohos:height="20vp"
        ohos:width="0vp"
        ohos:weight="1"
        ohos:layout_alignment="vertical_center"/>

</DirectionalLayout>

SettingProvider.java

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;
        }
    }

    @Override
    public int getCount() {
        return settingList == null ? 0 : settingList.size();
    }

    @Override
    public Object getItem(int position) {
        if (settingList != null && position >= 0 && position < settingList.size()){
            return settingList.get(position);
        }
        return null;
    }

    @Override
    public long getItemId(int position) {
        return position;
    }

    @Override
    public 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);
        Harmony OS — DatePicker日期选择器
 Harmony OS — PageSlider滑动页面
 Harmony OS 组件篇
 Harmony OS — TimePicker时间选择器
 Harmony OS — RoundProgressBar圆形进度条
 Harmony OS — ScrollView滑动视图