鸿蒙《校园通》--号码百事通模块

Posted 2021-08-30 笔触狂放

 号码百事通

从上一篇博客【鸿蒙】鸿蒙App应用-《校园通》开发步骤中，点击主页面中的号码百事通，进入以下界面，整个界面的显示是由二级列表展示。

1.功能效果展示 

2.xml布局搭建

该功能是一个二级列表，但目前鸿蒙系统并没有提供二级列表组件，那我们这里用java代码动态创建，布局对比来说就会比较简单一些

<?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:id="$+id:dl_hmbst"
    ohos:background_element="$media:bg"
    ohos:orientation="vertical">



</DirectionalLayout>

3.Java代码部分

新建AbilitySlice类，初始化静态数据，定义Text组件数组和ListContainer组件数组，根据数据量初始化数组大小，并设置对应的boolean类型数组，对二级列表进行显示和隐藏的控制。

package com.example.campusproject.slice;

import com.example.campusproject.ResourceTable;
import com.example.campusproject.adapter.HMBSTListAdapter;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.*;

public class HMBSTAbilitySlice extends AbilitySlice {

    private String[] group={"学院","老师","订餐"};
    private String[][] child={
            {"工商管理学院","会计学院","经济学院","金融学院","统计学院","信息管理学院","软件与通信工程学院",},
            {"王老师","刘老师","李老师","余老师","赵老师",},
            {"大食头","黄焖鸡","黄记煌","季季红"}
    };
    private DirectionalLayout dl;
    private Text[] texts=new Text[group.length];
    private ListContainer[] lcs=new ListContainer[group.length];
    private HMBSTListAdapter[] adapters=new HMBSTListAdapter[group.length];
    private Boolean[] booleans=new Boolean[group.length];
    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        this.setUIContent(ResourceTable.Layout_ability_hmbst);
        dl= (DirectionalLayout) this.findComponentById(ResourceTable.Id_dl_hmbst);
        for (int i = 0; i < group.length; i++) {
            booleans[i]=false;
            texts[i]=new Text(this);
            DirectionalLayout.LayoutConfig layoutConfig=
                    new DirectionalLayout.LayoutConfig(
                            ComponentContainer.LayoutConfig.MATCH_PARENT,
                            ComponentContainer.LayoutConfig.MATCH_CONTENT
                    );
            texts[i].setLayoutConfig(layoutConfig);
            texts[i].setText(group[i]);
            texts[i].setTextSize(80);
            texts[i].setTag(i);
            texts[i].setClickedListener(new Component.ClickedListener() {
                @Override
                public void onClick(Component component) {
                    int index= (int) ((Text)component).getTag();
                    booleans[index]=!booleans[index];
                    show();
                }
            });
            dl.addComponent(texts[i]);
            lcs[i]=new ListContainer(this);
            lcs[i].setLayoutConfig(layoutConfig);
            adapters[i]=new HMBSTListAdapter(this,child[i]);
            lcs[i].setItemProvider(adapters[i]);
            dl.addComponent(lcs[i]);
            //所有列表全部隐藏
            lcs[i].setVisibility(Component.HIDE);
        }
        booleans[0]=true;
        show();
    }

    public void show(){
        for (int i = 0; i < booleans.length; i++) {
            if (booleans[i])
                lcs[i].setVisibility(Component.VISIBLE);
            else
                lcs[i].setVisibility(Component.HIDE);
        }
    }
}

4.搭建列表适配器

二级列表中子列表需要列表展示大量数据，这里需要新建一个类继承至BaseItemProvider类，实现四个未实现的方法。根据二维数组的行号传递一维数组进行初始化加载

package com.example.campusproject.adapter;

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

public class HMBSTListAdapter extends BaseItemProvider {
    private AbilitySlice context;
    private String[] infos;

    public HMBSTListAdapter(AbilitySlice context, String[] infos) {
        this.context = context;
        this.infos = infos;
    }

    @Override
    public int getCount() {
        return infos.length;
    }

    @Override
    public Object getItem(int i) {
        return infos[i];
    }

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

    private class Holoder {
        Text text;

        public Holoder(Component component) {
            text = (Text) component.findComponentById(ResourceTable.Id_tv_hmbst_child);
        }
    }

    @Override
    public Component getComponent(int i, Component component, ComponentContainer componentContainer) {
        Component pc;
        Holoder holoder;
        if (component == null) {
            pc = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_ability_hmbst_item, null, false);
            holoder = new Holoder(pc);
            pc.setTag(holoder);
        } else {
            pc = component;
            holoder = (Holoder) pc.getTag();
        }
        holoder.text.setText(infos[i]);
        return pc;
    }
}

5.子布局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">

    <Text
        ohos:id="$+id:tv_hmbst_child"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="20fp"
        ohos:left_margin="20fp"/>

</DirectionalLayout>