关于harmonyos:43HarmonyOS鸿蒙开发组件ListContainer上

36次阅读

共计 14789 个字符,预计需要花费 37 分钟才能阅读完成。

4.3【HarmonyOS 鸿蒙开发】组件 ListContainer(上)

作者:韩茹

公司:程序咖(北京)科技有限公司

鸿蒙巴士专栏作家

ListContainer 是用来出现间断、多行数据的组件,蕴含一系列雷同类型的列表项。

MVC 的设计模式
    m:model:数据模型
        data:数组,汇合,。。。V:view:视图
        ListContainer
    c:control:控制器
        Provider

一、反对的 XML 属性

ListContainer 的共有 XML 属性继承自:Component

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”
vertical 示意垂直方向列表。 ohos:orientation=”vertical”

二、ListContainer 的应用办法

咱们先来说一下思路步骤:

 应用 ListContainer
    step1:先 xml 布局:控件 ListContainer
    step2:对应的 AbilitySlice 中找到控件
    step3:设置数据源
        List,Array,Map 等
    step4:创立 Provider
        自定义类,继承 BaseItemProvider,重写 4 个必要的办法。step5:设置 Provider,适配数据
    step6:增加监听
        OnItemClickListener

1、在 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:alignment="center"
    ohos:orientation="vertical">

    <ListContainer
        ohos:id="$+id:list_container1"
        ohos:height="200vp"
        ohos:width="300vp"
        ohos:background_element="#eeeeee"
        ohos:layout_alignment="horizontal_center"/>

</DirectionalLayout>

2、在 layout 目录下,新建每个 item 的布局文件:list_item_demo1.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: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:background_element="#33ff00ff"
        ohos:padding="4vp"
        ohos:text="Item0"
        ohos:text_size="20fp"
        ohos:margin="10vp"
        ohos:layout_alignment="center"/>
</DirectionalLayout>

3、在 java 代码中,com.example.hanrulistcontainer 目录下新建一个包:provider

该包下先提供一个 java 文件:ItemDemo.java,

package com.example.hanrulistcontainer.provider;

/**
 * ListContainer 中的每一个 Item
 */
public class ItemDemo {
    private String name;
    public ItemDemo(String name) {this.name = name;}
    public String getName() {return name;}
    public void setName(String name) {this.name = name;}
}

4、ListContainer 每一行能够为不同的数据,因而须要适配不同的数据结构,使其都能增加到 ListContainer 上。

在下面的包下再创立一个 Java 文件:ItemProvider.java,让它继承自 BaseItemProvider。必须重写的办法如下:

办法 作用
int getCount() 返回填充的表项个数。
Object getItem(int position) 依据 position 返回对应的数据。
long getItemId(int position) 返回某一项的 id。
Component getComponent(int position, Component covertComponent,ComponentContainer componentContainer) 依据 position 返回对应的界面组件。

示例代码:

package com.example.hanrulistcontainer.provider;

import com.example.hanrulistcontainer.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;

import java.util.List;

/**
 * 应用 BaseItemProvider
 *   1. 继承 BaseItemProvider
 *
 *   2. 重写必要的办法:4 个
 *      getCount()=== 获取数据的总量,也就是要绘制的总数。个别是数据源的长度。*      getItem(int position)=== 依据 position,要绘制的地位,返回对应的数据。*      getItemId(int position)=== 依据 position 地位,获取要绘制的条目标 id,其实就是 position。*      getComponent(int position, Component component, ComponentContainer componentContainer) ===position,绘制每一个 item。其实就是获取 component。*
 *
 *      A:先创立一个 item 每一个条目对应的 xml 布局。*      B:应用 LayoutScatter,用处是将 xml 布局,转为 Component 对象。*      C:在 Component 上获取控件:view.findViewById()-- 控件
 *      D:依据 position 获取数据源中对应的数据。而后设置到对应的控件上。*      E:返回该 Component 对象。*/
// step1:继承 BaseItemProvider
public class ItemProvider extends BaseItemProvider {
    // 提供数据源
    private List<ItemDemo> list;
    private AbilitySlice slice ;

    // 构造方法
    public ItemProvider(List<ItemDemo> list, AbilitySlice slice) {
        this.list = list;
        this.slice = slice;
    }

    //step2:重写 4 个必要的办法

    /**
     * getCount(),数据源中有多少条数据,示意要绘制的 item 的数量。*
     * @return 个别是返回数据源的长度。*/
    @Override
    public int getCount() {return list == null?0: list.size();// 个别返回数据源的长度
    }

    /**
     * 依据 position 的地位,获取数据源中的数据对象
     *
     * @param position,要绘制的是第几个条目
     * @return,该条目中要展现的数据对象
     */
    @Override
    public Object getItem(int position) {if(list!= null && position >= 0 && position < list.size()){return list.get(position);
        }
        return null;
    }

    /**
     * 依据 position 的地位,获取指定 id
     * @param position
     * @return
     */
    @Override
    public long getItemId(int position) {return position;}

    /**
     *
     * 用于绘制每一个 item。返回值就是绘制好的 Component 对象。*
     * @param position 第一个参数, 要绘制的 item 的地位。* @param convertComponent 第二个参数,被复用的 Component
     * @param componentContainer 第三个参数,指 listContainer 自身。* @return
     */
    @Override
    public Component getComponent(int position, Component convertComponent, ComponentContainer componentContainer) {
        final Component cpt;
        // 如果还没有 convertComponent 对象,那么将 xml 布局文件转为一个 Component 对象。if(convertComponent == null){
            // 从以后的 AbilitySlice 对应的 xml 布局中,cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_list_item_demo1,null,false);
        }else{cpt = convertComponent;}
        ItemDemo  item=list.get(position);// 获取数据
        Text text = (Text) cpt.findComponentById(ResourceTable.Id_item_index);
        text.setText(item.getName());
        return cpt;
    }
}

5、在 MainAbilitySlice.java 中,增加办法,增加 ListContainer 的数据,并适配其数据结构。

先增加一个办法,提供数据:

        // 初始化数据源
    private List<ItemDemo> getData(){List<ItemDemo> list = new ArrayList<>();
        for(int i=0;i<=8;i++){list.add(new ItemDemo("Item"+i));
        }
        return list;
    }

再提供一个办法,初始化 ListContainer,并适配其数据结构。

        // 初始化 ListContainer
    private void initListContainer(){
        // 1. 获取 xml 布局中的 ListContainer 组件
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container1);
        // 2. 实例化数据源
        List<ItemDemo> list = getData();
        // 3. 初始化 Provider 对象
        ItemProvider itemProvider = new ItemProvider(list, this);
        // 4. 适配要展现的内容数据
        listContainer.setItemProvider(itemProvider);

    }

而后别忘了在 onStart() 办法中调用它:

        @Override
    public void onStart(Intent intent) {super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        // 调用
        initListContainer();}

到此咱们就能够运行了:

<img src=”https://img.chengxuka.com/listcontaineryunxing1.gif” alt=”listcontaineryunxing1″ style=”zoom:50%;” />

三、ListContainer 的罕用接口

1、设置响应点击事件。

 public interface ItemClickedListener {void onItemClicked(ListContainer container, Component component, int position, long id);
}
阐明:第一个参数:ListContainer container,指的就是以后的 ListContainer
  第二个参数:Component component,每一个 Item 对应的 Component。被点击 id 条目标 component
  第三个参数:int position,被点击的条目标地位,从 0 开始
  第四个参数:long id,被点击的条目标 id,从 0 开始

示例代码:

                // 4. 适配要展现的内容数据
        listContainer.setItemProvider(itemProvider);
        // 5. 设置每个 Item 的点击事件
                /**
         * public interface ItemClickedListener {*         void onItemClicked(ListContainer container, Component component, int position, long id);
         *
         *     }
         *     第一个参数:ListContainer container,指的就是以后的 ListContainer
         *
         *     第二个参数:Component component,每一个 Item 对应的 Component。被点击 id 条目标 component
         *
         *     第三个参数:int position,被点击的条目标地位,从 0 开始
         *
         *     第四个参数:long id,被点击的条目标 id,从 0 开始
         */
        listContainer.setItemClickedListener((container, component, position, id) -> {ItemDemo item = (ItemDemo) listContainer.getItemProvider().getItem(position);
            new ToastDialog(this)
                    .setText("你点击了:" + item.getName())
                    // Toast 显示在界面两头
                    .setAlignment(LayoutAlignment.CENTER)
                    .show();});

响应点击事件成果:

<img src=”https://img.chengxuka.com/listcontaineryunxing6.gif” alt=”listcontaineryunxing6″ style=”zoom:50%;” />

2、设置响应长按事件。

public interface ItemLongClickedListener {boolean onItemLongClicked(ListContainer container, Component component, int position, long id);
}
阐明:该函数的返回值:true,解决。既绑定单击事件,又长按事件
  true,解决了。事件不向下散发。false,不解决。波及到事件散发。

java 中设置 listContainer 的长按事件:

                // 长按事件
                /**
         * public interface ItemLongClickedListener {*         boolean onItemLongClicked(ListContainer container, Component component, int position, long id);
         *     }
         *     该函数的返回值:*     true,解决。*     既绑定单击事件,又长按事件
         *     true,解决了。事件不向下散发。*     false,不解决。波及到事件散发。*/
        listContainer.setItemLongClickedListener((container, component, position, id) -> {ItemDemo item = (ItemDemo) listContainer.getItemProvider().getItem(position);
            new ToastDialog(this)
                    .setText("你长按了:" + item.getName())
                    .setAlignment(LayoutAlignment.CENTER)
                    .show();
            return false;
        });

响应长按事件成果:

<img src=”https://img.chengxuka.com/listcontaineryunxing7.gif” alt=”listcontaineryunxing7″ style=”zoom:50%;” />

四、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) 设置着色器色彩

1、设置 ListContainer 的布局方向:orientation 设置为“horizontal”,示意横向布局;orientation 设置为“vertical”,示意纵向布局。默认为纵向布局。

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

在 Java 代码中设置:

listContainer.setOrientation(Component.HORIZONTAL);

成果如下:

<img src=”https://img.chengxuka.com/listcontaineryunxing2.gif” alt=”listcontaineryunxing2″ style=”zoom:50%;” />

2、设置 ListContainer 的开始和完结偏移量。

listContainer.setContentOffSet(200,100);

java 中的代码:

// 初始化 ListContainer
    private void initListContainer(){
        // 1. 获取 xml 布局中的 ListContainer 组件
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container1);
        // 设置起始和完结地位的偏移量
        listContainer.setContentOffSet(200,100);
      
          
        // 2. 实例化数据源
        ...

    }

设置列表容器的开始偏移量为 100,完结偏移量为 100,示例成果:

<img src=”https://img.chengxuka.com/listcontaineryunxing3.gif” alt=”listcontaineryunxing3″ style=”zoom:50%;” />

3、设置回弹成果。

在 xml 中设置:

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

在 Java 代码中设置:

listContainer.setReboundEffect(true);

回弹成果:

<img src=”https://img.chengxuka.com/listcontaineryunxing4.gif” alt=”listcontaineryunxing4″ style=”zoom:50%;” />

在开启回弹成果后,能够调用 setReboundEffectParams() 办法调整回弹成果。

/*
*     setReboundEffectParams(int overscrollPercent, float overscrollRate, int remainVisiblePercent)
*/
listContainer.setReboundEffectParams(40, 0.6f, 20);

4、设置着色器色彩。

在 xml 中设置:

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

在 Java 代码中设置:

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

设置着色器成果:

<img src=”https://img.chengxuka.com/listcontaineryunxing5.gif” alt=”listcontaineryunxing5″ style=”zoom:50%;” />

五、写个例子

首先看一下效果图:

<img src=”https://img.chengxuka.com/listcontaineryunxing8.gif” alt=”listcontaineryunxing8″ style=”zoom:50%;” />

1、首先在 media 目录下搁置 10 个小图片:

2、在 layout 目录下,新建一个布局文件:list_container_layout.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">
    <ListContainer
        ohos:id="$+id:list_container2"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:background_element="#eeeeee"
        ohos:rebound_effect="true"
        ohos:layout_alignment="horizontal_center"/>


</DirectionalLayout>

在这里咱们搁置了一个 ListContainer,而后咱们持续创立 xml 布局文件,用来示意每个 item 的布局,list_item_demo2.xml

<?xml version="1.0" encoding="utf-8"?>
<DependentLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_content"
    ohos:width="match_parent"
    ohos:padding="20vp"
    ohos:margin="10vp"
    ohos:background_element="#11ff0000"
    >
    
    <Image
        ohos:id="$+id:image_icon"
        ohos:height="100vp"
        ohos:width="100vp"
        ohos:image_src="$media:icon"
        ohos:scale_mode="stretch"
        ohos:vertical_center="true"/>

    <Text
        ohos:id="$+id:text_name"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="Name"
        ohos:text_size="28fp"
        ohos:text_color="#AA0000"
        ohos:margin="10vp"
        ohos:right_of="$id:image_icon"
        ohos:align_top="$id:image_icon"
        />
    <Text
        ohos:id="$+id:text_note"
        ohos:height="match_content"
        ohos:width="match_content"
        ohos:text="Note"
        ohos:text_size="28fp"
        ohos:margin="10vp"
        ohos:text_color="#00AA00"
        ohos:right_of="$id:image_icon"
        ohos:below="$id:text_name"
        />

</DependentLayout>

2、而后咱们在 provider 包下新建一个 Provider:ListItemProvider.java 文件:

package com.example.hanrulistcontainer.provider;

import com.example.hanrulistcontainer.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.agp.components.*;

import java.util.List;
import java.util.Map;

public class ListItemProvider  extends  BaseItemProvider{

    private List<Map<String,Object>> list;
    private AbilitySlice  slice;

    public ListItemProvider(List<Map<String, Object>> 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;
        // 如果还没有 convertComponent 对象,那么将 xml 布局文件转为一个 Component 对象。if(convertComponent == null){
            // 从以后的 AbilitySlice 对应的 xml 布局中,cpt = LayoutScatter.getInstance(slice).parse(ResourceTable.Layout_list_item_demo2,null,false);
        }else{cpt = convertComponent;}
        Map<String,Object> map =list.get(position);// 获取数据
        Text textName = (Text) cpt.findComponentById(ResourceTable.Id_text_name);
        Text textNote = (Text) cpt.findComponentById(ResourceTable.Id_text_note);
        Image image =(Image) cpt.findComponentById(ResourceTable.Id_image_icon);

        textName.setText((String)map.get("name"));
        textNote.setText((String)map.get("note"));
        image.setPixelMap((int)map.get("image"));
        return cpt;
    }
}

3、slice 包下新建一个 AbilitySlice 文件:SecondAbilitySlice.java

package com.example.hanrulistcontainer.slice;

import com.example.hanrulistcontainer.ResourceTable;
import com.example.hanrulistcontainer.provider.ListItemProvider;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.ListContainer;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

public class SecondAbilitySlice  extends  AbilitySlice{
    @Override
    protected void onStart(Intent intent) {super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_list_container_layout);
        initListContainer();}


    // 初始化 ListContainer
    private void initListContainer(){
        // 1. 获取 xml 布局中的 ListContainer 组件
        ListContainer listContainer = (ListContainer) findComponentById(ResourceTable.Id_list_container2);
        // 2. 实例化数据源
        List<Map<String,Object>> list = getData();
        // 3. 初始化 Provider 对象
        ListItemProvider listItemProvider = new ListItemProvider(list,this);
        // 4. 适配要展现的内容数据
        listContainer.setItemProvider(listItemProvider);
        // 5. 设置每个 Item 的点击事件
        listContainer.setItemClickedListener((container, component, position, id) -> {Map<String,Object> item = (Map<String,Object>) listContainer.getItemProvider().getItem(position);
            new ToastDialog(this)
                    .setText("你点击了:" + item.get("name")+","+item.get("note"))
                    // Toast 显示在界面两头
                    .setAlignment(LayoutAlignment.CENTER)
                    .show();});



    }

    // 初始化数据源
    private List<Map<String,Object>> getData(){List<Map<String,Object>> list = new ArrayList<>();
        // icon 图标
        int[] images = {ResourceTable.Media_image_info1,ResourceTable.Media_image_info2,
                ResourceTable.Media_image_info3,ResourceTable.Media_image_info4,
                ResourceTable.Media_image_info5,ResourceTable.Media_image_info6,
                ResourceTable.Media_image_info7,ResourceTable.Media_image_info8,
                ResourceTable.Media_image_info9,ResourceTable.Media_image_info10};

        String[] names={"曹操","刘备","关羽","诸葛亮","小乔","貂蝉","吕布","赵云","黄盖","周瑜"};
        String[] notes={"一代枭雄","卖草鞋","财神","卧龙学生","周瑜媳妇","四大镁铝","天下无双","常胜将军","违心挨打","违心打人"};

        list= new ArrayList<Map<String,Object>>();
        for(int i=0;i<images.length;i++){Map<String, Object> map = new HashMap<String, Object>();
            map.put("image", images[i]);
            map.put("name", names[i]);
            map.put("note", notes[i]);
            list.add(map);
        }


        return list;
    }
}

思路和之前讲原理的时候一样,这里我就不再赘述了。然而数据源的类型我换了一下,之前讲原理的时候应用的是自定义类 ItemDemo,这里我间接应用了 Map。

4、批改一下程序的入口:

public class MainAbility extends Ability {
    @Override
    public void onStart(Intent intent) {super.onStart(intent);
//        super.setMainRoute(MainAbilitySlice.class.getName());
        super.setMainRoute(SecondAbilitySlice.class.getName());
    }

}

而后运行即可。

更多内容:

1、社区:鸿蒙巴士 https://www.harmonybus.net/

2、公众号:HarmonyBus

3、技术交换 QQ 群:714518656

4、视频课:https://www.chengxuka.com

正文完
 0