号码百事通
从上一篇博客【鸿蒙】鸿蒙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>