HarmonyOS：使用TableLayout实现Android开发中的GridView
使用TableLayout布局方式实现Android开发中GridView的效果。
·
Android开发中GridView是一种网格布局的控件，其效果如下：
具体实现请参考：Android自定义较为精美的GridView
1 实现效果
鸿蒙开发中没有类似于GridView的控件，只有一种网格布局方式TableLayout，因此我们可以利用TableLayout来实现类似的效果。效果如下：
2 实现步骤
2.1 布局文件
通过观察上图我们可以知道，每一个小的按钮都是一张图下跟着一行文字，因此布局文件中我们采用DirectionalLayout，每一个垂直布局的DirectionalLayout包裹着一个Image和一个Text。布局文件代码如下：
<?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:background_element="#DDDDDD"
ohos:orientation="vertical">
<DirectionalLayout
ohos:id="$+id:banner_d"
ohos:height="match_parent"
ohos:width="match_parent"
ohos:orientation="vertical">
<com.youth.banner.Banner
ohos:id="$+id:banner"
ohos:height="195vp"
ohos:width="match_parent">
</com.youth.banner.Banner>
<DirectionalLayout
ohos:id="$+id:info"
ohos:height="20vp"
ohos:width="match_parent"
ohos:top_margin="4vp"
ohos:background_element="#F7F7F7"
ohos:orientation="horizontal">
<Text
ohos:height="match_parent"
ohos:width="match_parent"
ohos:left_margin="10vp"
ohos:text="个人教务"
ohos:text_color="#000000"
ohos:text_size="16fp">
</Text>
</DirectionalLayout>
<TableLayout
ohos:id="$+id:table1"
ohos:height="200vp"
ohos:top_margin="4vp"
ohos:width="match_parent"
ohos:column_count="4"
ohos:row_count="2"
ohos:padding="8vp"
ohos:orientation="horizontal"
ohos:background_element="#F7F7F7">
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_1"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:query_mark"/>
<Text
ohos:id="$+id:tv_grid_1"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="成绩查询"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_2"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:query_timetable"/>
<Text
ohos:id="$+id:tv_grid_2"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="课表查询"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_3"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:query_exam"/>
<Text
ohos:id="$+id:tv_grid_3"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="考试安排"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_4"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:query_credit"/>
<Text
ohos:id="$+id:tv_grid_4"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="GPA"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_5"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:query_cult"/>
<Text
ohos:id="$+id:tv_grid_5"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="培养方案"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_6"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:grade_total_1"/>
<Text
ohos:id="$+id:tv_grid_6"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="成绩总表"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_7"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:query_zc"/>
<Text
ohos:id="$+id:tv_grid_7"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="综合测评"/>
</DirectionalLayout>
</TableLayout>
<DirectionalLayout
ohos:height="20vp"
ohos:width="match_parent"
ohos:top_margin="4vp"
ohos:background_element="#F7F7F7"
ohos:orientation="horizontal">
<Text
ohos:height="match_parent"
ohos:width="match_parent"
ohos:left_margin="10vp"
ohos:text="数据可视化"
ohos:text_color="#000000"
ohos:text_size="16fp">
</Text>
</DirectionalLayout>
<TableLayout
ohos:height="200vp"
ohos:top_margin="4vp"
ohos:width="match_parent"
ohos:orientation="horizontal"
ohos:padding="8vp"
ohos:column_count="4"
ohos:row_count="2"
ohos:background_element="#F7F7F7">
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_8"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:grade_rate"/>
<Text
ohos:id="$+id:tv_grid_8"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="成绩占比"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_9"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:grade_pk"/>
<Text
ohos:id="$+id:tv_grid_9"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="成绩比较"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_10"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:grade_tend"/>
<Text
ohos:id="$+id:tv_grid_10"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="GPA走势"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_11"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:single_major_2"/>
<Text
ohos:id="$+id:tv_grid_11"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="单科分析"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_12"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:major_sort"/>
<Text
ohos:id="$+id:tv_grid_12"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="专业排名"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_13"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:grade_loss"/>
<Text
ohos:id="$+id:tv_grid_13"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="挂科分析"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_14"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:query_single_sort"/>
<Text
ohos:id="$+id:tv_grid_14"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="单科排名"/>
</DirectionalLayout>
<DirectionalLayout
ohos:width="match_content"
ohos:height="match_content"
ohos:alignment="center"
ohos:orientation="vertical"
ohos:padding="0vp">
<Image
ohos:id="$+id:iv_grid_15"
ohos:width="85vp"
ohos:height="68vp"
ohos:image_src="$media:radar"/>
<Text
ohos:id="$+id:tv_grid_15"
ohos:width="match_content"
ohos:height="20vp"
ohos:top_margin="3vp"
ohos:layout_alignment="center"
ohos:text_size="14fp"
ohos:text="个人分析"/>
</DirectionalLayout>
</TableLayout>
</DirectionalLayout>
</DirectionalLayout>
其中，TableLayout的属性信息如下所示：
<TableLayout
ohos:id="$+id:table1"
ohos:height="200vp"
ohos:top_margin="4vp"
ohos:width="match_parent"
ohos:column_count="4"
ohos:row_count="2"
ohos:padding="8vp"
ohos:orientation="horizontal"
ohos:background_element="#F7F7F7">
</TableLayout>
column_count和row_count分别表示列数和行数，本例中是2行4列。padding="8vp"表示布局内两个小的格子间的间隔为8vp。orientation是一个极其重要的属性，orientation="horizontal"表示横向布局，也就是TableLaout中包裹的东西会优先布满第一行，然后是第二行。
2.2 Ability文件
package com.example.ncepu.Student.Query;
import com.example.ncepu.ResourceTable;
import com.example.ncepu.Student.Query.slice.QueryFragmentSlice;
import com.youth.banner.loader.ImageLoader;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import com.youth.banner.Banner;
import com.youth.banner.listener.OnBannerListener;
import ohos.agp.components.*;
import ohos.app.Context;
import ohos.global.resource.NotExistException;
import ohos.global.resource.WrongTypeException;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;
public class QueryFragment extends Ability {
private Banner banner;
private List<Integer> list;
private List<String> titles;
private TableLayout layout1, layout2;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setMainRoute(QueryFragmentSlice.class.getName());
super.setUIContent(ResourceTable.Layout_ability_query_fragment);
initViews();
try {
initBanner();
} catch (NotExistException e) {
e.printStackTrace();
} catch (WrongTypeException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
}
private void initViews() {
layout1 = (TableLayout) findComponentById(ResourceTable.Id_table1);
layout1.setClickedListener(new Component.ClickedListener() {
@Override
public void onClick(Component component) {
switch (component.getId()) {
case ResourceTable.Id_iv_grid_1:
break;
}
}
});
}
private void initBanner() throws NotExistException, WrongTypeException, IOException {
list = new ArrayList<>();
titles = new ArrayList<>();
banner = (Banner) findComponentById(ResourceTable.Id_banner);
// list.add(ResourceTable.Media_ncepu_1);
list.add(ResourceTable.Media_ncepu_2);
list.add(ResourceTable.Media_ncepu_3);
list.add(ResourceTable.Media_ncepu_4);
list.add(ResourceTable.Media_ncepu_5);
list.add(ResourceTable.Media_ncepu_6);
for(int i = 1; i <= 5; i++) {
titles.add(String.valueOf(i));
}
//设置参数
banner.setImages(list)
.setBannerTitles(titles)
.setDelayTime(3000)
.setBannerStyle(5)
.setTitleTextSize(60);
banner.start();
}
}
为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。
更多推荐
6
0- 0
已为社区贡献23条内容
所有评论(0)