目錄
- 1 實作效果
- 2 實作步驟
- 2.1 布局檔案
- 2.2 Ability檔案
??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();
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/317973.html
標籤：其他