#2020征文-手机#图解鸿蒙列表组件ListContainer 原创 精华

发布于 2020-12-21 18:39
浏览
164收藏

一、什么是ListContainer

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

#2020征文-手机#图解鸿蒙列表组件ListContainer-开源基础软件社区

二、ListContainer的架构视图

    ListContainer的架构视图如下所示:

#2020征文-手机#图解鸿蒙列表组件ListContainer-开源基础软件社区ListContainer作为列表,其中的列表项数据是由适配器Adapter提供的,适配器Adapter作为ListContainer和数据源之间的中介&桥梁,将数据源中的数据映射到要展示的ListContainer中,ListContainer负责以列表的形式显示适配器Adapter提供的数据。

三、ListContainer的使用步骤

    ListContainer的使用步骤主要包括:

1、创建ListContainer

2、创建列表项的布局

3、使用POJO类封装数据源中与每个列表项对应的数据

4、构造数据源

5、构造适配器Adapter

6、将数据源关联到适配器Adapter

7、将适配器Adapter应用到ListContainer

四、ListContainer的使用示例

    示例的运行效果如下图所示:

#2020征文-手机#图解鸿蒙列表组件ListContainer-开源基础软件社区    开发步骤如下:

1、创建ListContainer(ability_main.xml)

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

2、创建列表项的布局(item.xml)

<?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:orientation="vertical">

    <Text
        ohos:id="$+id:name"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:padding="5vp"
        ohos:auto_font_size="true"
        ohos:text_alignment="center"/>

    <Component
        ohos:height="1vp"
        ohos:width="match_parent"
        ohos:background_element="#CCCCCC"/>
</DirectionalLayout>

3、使用POJO类封装数据源中与每个列表项对应的数据(Item.java)

    POJO类指的是:只包含属性和相应的getter和setter,而没有业务逻辑的类。

public class Item {
    private String name;

    public Item(String name) {
        this.name = name;
    }

    public String getName() {
        return name;
    }

    public void setName(String name) {
        this.name = name;
    }
}

4、构造数据源(MainAbilitySlice.java)

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        List<Item> list = getData();
    }

    private List<Item> getData() {
        List<Item> list = new ArrayList<>();
        for (int i = 1; i <= 100; i++) {
            list.add(new Item("Item " + i));
        }
        return list;
    }
}

5、构造适配器Adapter(MyItemProvider.java)

    常用的适配器类是RecycleItemProvider,继承该类时需要重写四个方法:getCount()、getItem()、getItemId()和getComponent()。其中,对于方法getComponent(),当某个列表项从不可见变为可见时会自动调用该方法,在该方法中适配器Adapter会从数据源取数据,并将返回的数据封装在一个Component对象中,以便将该对象返回给ListContainer,从而将数据映射到对应的列表项。

public class MyItemProvider extends RecycleItemProvider {
    private List<Item> list;
    private AbilitySlice slice;

    public MyItemProvider(List<Item> list, AbilitySlice 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) {
        convertComponent = LayoutScatter.getInstance(slice)
                .parse(ResourceTable.Layout_item, null, false);
        Text text = (Text) convertComponent.findComponentById(ResourceTable.Id_name);
        text.setText(list.get(position).getName());
        return convertComponent;
    }
}

6、将数据源关联到适配器Adapter(MainAbilitySlice.java)

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ......

        List<Item> list = getData();
        MyItemProvider myItemProvider = new MyItemProvider(list, this);
    }
    ......
}

7、将适配器Adapter应用到ListContainer(MainAbilitySlice.java)

public class MainAbilitySlice extends AbilitySlice {
    @Override
    public void onStart(Intent intent) {
        ......
        MyItemProvider myItemProvider = new MyItemProvider(list, this);
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container);
        listContainer.setItemProvider(myItemProvider);
    }
    ......
}

五、适配器Adapter的优化

    对于上面的第5步,当某个列表项从不可见变为可见时,对于自动调用的方法getComponent(),我们是根据列表项的布局文件item.xml创建了一个列表项的实例。这样的做法性能较差。因为系统会对变为不可见的列表项实例进行缓存,所以对于方法getComponent()中的第二个参数convertComponent有可能不为null。当convertComponent不为null时,说明系统把缓存中的某个列表项实例传递过来了,因此,完全可以复用该列表项实例,而没有必要重新创建一个列表项实例。优化方式如下:

public class MyItemProvider extends RecycleItemProvider {
    ......

    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        if (convertComponent == null) {
            convertComponent = LayoutScatter.getInstance(slice)
                    .parse(ResourceTable.Layout_item, null, false);
        }
        Text text = (Text) convertComponent.findComponentById(ResourceTable.Id_name);
        text.setText(list.get(position).getName());
        return convertComponent;
    }
}

六、使用ViewHolder对适配器Adapter做终极优化

    在上面的代码中,得到列表项实例后(不管是新创建的列表项实例,还是从缓存中获得的列表项实例),都要调用方法findComponentById()以获得列表项中的子组件。调用方法findComponentById()是比较耗费性能的,所以好的做法是:在新创建列表项实例时,就调用方法findComponentById()以获得列表项中的所有子组件,并且将所有子组件通过ViewHolder绑定到列表项实例。这样,当从缓存中获得列表项实例后,就无需再调用方法findComponentById()了,直接获得列表项实例绑定的ViewHolder就可以得到所有子组件了。优化方式如下:

public class MyItemProvider extends RecycleItemProvider {
    ......

    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        ViewHolder viewHolder;

        if (convertComponent == null) {
            convertComponent = LayoutScatter.getInstance(slice)
                    .parse(ResourceTable.Layout_item, null, false);
            viewHolder = new ViewHolder();
            viewHolder.text = (Text) convertComponent.findComponentById(ResourceTable.Id_name);
            convertComponent.setTag(viewHolder);
        } else {
            viewHolder = (ViewHolder) convertComponent.getTag();
        }
        viewHolder.text.setText(list.get(position).getName());
        return convertComponent;
    }

    class ViewHolder {
        Text text;
    }
}

    如果你理解了为什么要这么优化,相信你会发现:当列表项中只有一个子组件时,也可以不引入ViewHolder,而是将这个子组件直接绑定到列表项实例。代码如下所示:

public class MyItemProvider extends RecycleItemProvider {
    ......

    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        Text text;
        if (convertComponent == null) {
            convertComponent = LayoutScatter.getInstance(slice)
                    .parse(ResourceTable.Layout_item, null, false);
            text = (Text) convertComponent.findComponentById(ResourceTable.Id_name);
            convertComponent.setTag(text);
        } else {
            text = (Text) convertComponent.getTag();
        }
        text.setText(list.get(position).getName());
        return convertComponent;
    }
}

 

示例源代码,请见附件。

 

欢迎订阅我的专栏【图解鸿蒙】:

https://harmonyos.51cto.com/column/27

 

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
ListContainer.zip 1.22M 912次下载
已于2020-12-21 18:39:13修改
174
收藏 164
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐