HarmonyOS官方模板学习之Category Ability(Java)

想了解更多内容，板学请访问：

和华为官方合作共建的板学鸿蒙技术社区

https://harmonyos.51cto.com

Category Ability(Java)

介绍

使用Java语言开发，用于Phone设备的板学Feature Ability模板，使用XML布局，板学显示分类页效果。板学

搭建环境

安装DevEco Studio，板学详情请参考DevEco Studio下载。板学

设置DevEco Studio开发环境，板学DevEco Studio开发环境需要依赖于网络环境，板学需要连接上网络才能确保工具的板学正常使用，可以根据如下两种情况来配置开发环境：

如果可以直接访问Internet，板学只需进行下载HarmonyOS SDK操作。板学

如果网络不能直接访问Internet，板学需要通过代理服务器才可以访问，板学请参考配置开发环境。板学

代码结构解读

注意：#代表注释

功能逻辑代码

├─java │  └─com │      └─buty │          └─categoryabilityjava │              │  MainAbility.java │              │  MyApplication.java │              │ │              ├─data │              │      CategoryData.java #用来构造分类数据 │              │ │              ├─model │              │      CategoryList.java #分类列表模型 │              │      Item.java #子项模型 │              │      ItemChild.java #小子项模型 │              │      ItemList.java #子项列表模型 │              │ │              ├─provider │              │      CategoryListProvider.java #继承自BaseItemProvider为ListContainer提供数据 │              │ │              ├─slice │              │      MainAbilitySlice.java #主页片 │              │ │              ├─utils │              │      ElementUtil.java #获取element颜色值， │              │      LogUtils.java #日志工具类 │              │      Toast.java #Toast工具类 │              │ │              └─view │                      GridAdapter.java #grid适配器，适配不同的云服务器gridview │                      GridView.java #自定义组件，类似grid，继承自TableLayout并且实现Component.LayoutRefreshedListener │ 

布局及样式代码

└─resources     ├─base     │  ├─element     │  │      color.json     │  │      float.json     │  │      string.json     │  │     │  ├─graphic     │  │      background_ability_main.xml     │  │      background_item_grid_per.xml     │  │      background_search_bar.xml     │  │     │  ├─layout     │  │      ability_main.xml  #主页面     │  │      category_list_per.xml #每个分类组件     │  │      item_child_per.xml #分类下面的子类别     │  │      item_child_per_grid_per.xml #子类别下的网格项组件     │  │      item_grid_per.xml #分类下面的网格项     │  │      search_bar.xml #search组件     │  │      tab.xml #单个tab组件     │  │      title_bar.xml #标题组件     │  │     │  ├─media     │  │      addIcon.png     │  │      icon.png     │  │      icon_actived.png     │  │      icon_normal.png     │  │      rightIcon.png     │  │      searchIcon.png     │  │     │  └─profile     ├─en     │  └─element     │          string.json     │     ├─rawfile     └─zh         └─element                 string.json 

效果展示

我们先看一下运行起来的效果

相关权限

不需要额外申请权限

页面布局

1.ability_main.xml #主页面

页面的布局包括DependentLayout和DirectionalLayout布局。

包括ListContainer、ScrollView、自定义的GridView 等组件

还使用了include标签来导入预设的组件，导入了search组件和标题组件。

2.category_list_per.xml #每个分类组件

分类组件比较简单，DirectionalLayout包含一个Text。

<?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:bottom_margin="$float:defaultMargin"     ohos:orientation="vertical"     ohos:top_margin="$float:defaultMargin">      <Text         ohos:id="$+id:categoryListPerText"         ohos:height="match_parent"         ohos:width="match_parent"         ohos:bottom_padding="$float:componentPadding"         ohos:end_padding="$float:defaultPadding"         ohos:multiple_lines="true"         ohos:text_alignment="vertical_center|left"         ohos:text_size="16vp"         ohos:top_padding="$float:componentPadding"/> 

3.item_child_per.xml #分类下面的子类别

包含了一个自定义的GridView，我们可以学习一下如何自定义组件。亿华云

4.item_child_per_grid_per.xml #子类别下的网格项组件

比较简单

<?xml version="1.0" encoding="utf-8"?>  <DirectionalLayout     xmlns:ohos="http://schemas.huawei.com/res/ohos"     ohos:height="match_content"     ohos:width="60vp"     ohos:alpha="0"     ohos:top_margin="$float:defaultMargin">      <Image         ohos:height="60vp"         ohos:width="match_parent"         ohos:background_element="$graphic:background_item_grid_per"/>      <Text         ohos:id="$+id:itemChildPerGridPerText"         ohos:height="match_content"         ohos:width="match_parent"         ohos:bottom_padding="$float:componentPadding"         ohos:multiple_lines="true"         ohos:text_alignment="center"         ohos:text_size="16vp"         ohos:top_padding="$float:componentPadding"/> </DirectionalLayout> 

5.item_grid_per.xml #分类下面的网格项

<?xml version="1.0" encoding="utf-8"?> <DependentLayout     xmlns:ohos="http://schemas.huawei.com/res/ohos"     ohos:height="match_content"     ohos:width="108vp"     ohos:background_element="$graphic:background_item_grid_per">      <Image         ohos:id="$+id:itemGridPerImage"         ohos:height="65vp"         ohos:width="match_parent"/>      <Text         ohos:id="$+id:itemGridPerText"         ohos:height="match_content"         ohos:width="match_parent"         ohos:align_parent_start="true"         ohos:align_parent_top="true"         ohos:bottom_padding="$float:componentPadding"         ohos:end_padding="$float:defaultPadding"         ohos:multiple_lines="true"         ohos:start_padding="$float:defaultPadding"         ohos:text_alignment="vertical_center"         ohos:text_size="16vp"         ohos:top_padding="$float:componentPadding"/> </DependentLayout> 

6.search_bar.xml #search组件

<?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:background_element="$color:colorSubBackground">      <DependentLayout         ohos:height="match_content"         ohos:width="match_parent"         ohos:background_element="$graphic:background_search_bar"         ohos:bottom_margin="$float:componentPadding"         ohos:end_margin="$float:defaultMargin"         ohos:start_margin="$float:defaultMargin"         ohos:top_margin="$float:componentPadding">          <Image             ohos:id="$+id:searchImage"             ohos:height="match_content"             ohos:width="match_content"             ohos:image_src="$media:searchIcon"             ohos:start_margin="$float:defaultMargin"             ohos:vertical_center="true"/>          <TextField             ohos:id="$+id:searchTextField"             ohos:height="match_content"             ohos:width="match_parent"             ohos:bottom_padding="$float:componentPadding"             ohos:element_cursor_bubble="#00000000"             ohos:end_of="$id:searchImage"             ohos:end_padding="$float:defaultPadding"             ohos:hint="$string:search"             ohos:multiple_lines="false"             ohos:start_padding="$float:defaultPadding"             ohos:text_alignment="vertical_center"             ohos:text_size="16fp"             ohos:top_padding="$float:componentPadding"             ohos:vertical_center="true"/>     </DependentLayout>  </DirectionalLayout> 

7.tab.xml #单个tab组件

<?xml version="1.0" encoding="utf-8"?>  <DirectionalLayout     xmlns:ohos="http://schemas.huawei.com/res/ohos"     ohos:id="$+id:tab"     ohos:height="match_content"     ohos:width="0vp"     ohos:alignment="center"     ohos:orientation="vertical"     ohos:weight="1">      <Image         ohos:id="$+id:bottom_tab_button_image"         ohos:height="$float:heightTab"         ohos:width="$float:widthTab"/>      <Text         ohos:id="$+id:bottom_tab_button_text"         ohos:height="match_content"         ohos:width="match_parent"         ohos:text_alignment="top|horizontal_center"         ohos:text_color="$color:colorTabTextNormal"         ohos:text_size="$float:textSizeTab"         ohos:top_margin="2vp"/>  </DirectionalLayout> 

8.title_bar.xml #标题组件

两个Text 加上一个Image

<?xml version="1.0" encoding="utf-8"?> <DependentLayout     xmlns:ohos="http://schemas.huawei.com/res/ohos"     ohos:height="$float:defaultHeight"     ohos:width="match_parent"     ohos:background_element="$color:colorSubBackground">      <Text         ohos:id="$+id:title_text"         ohos:height="match_content"         ohos:width="match_content"         ohos:align_parent_bottom="true"         ohos:bottom_padding="$float:defaultPadding"         ohos:end_padding="$float:defaultPadding"         ohos:multiple_lines="true"         ohos:start_padding="$float:defaultPadding"         ohos:text="$string:entry_MainAbility"         ohos:text_color="$color:appbar_title_color"         ohos:text_size="$float:appbar_title_text_size"/>      <Text         ohos:id="$+id:describe_text"         ohos:height="match_content"         ohos:width="match_content"         ohos:align_parent_bottom="true"         ohos:bottom_padding="$float:defaultPadding"         ohos:end_of="$id:title_text"         ohos:multiple_lines="true"         ohos:text="$string:describe"         ohos:text_color="$color:appbar_subtitle_color"         ohos:text_size="$float:appbar_text_size"/>      <Image         ohos:height="match_content"         ohos:width="match_content"         ohos:align_parent_bottom="true"         ohos:align_parent_end="true"         ohos:bottom_padding="$float:defaultPadding"         ohos:end_padding="$float:defaultPadding"         ohos:image_src="$media:addIcon"/>  </DependentLayout> 

业务逻辑

1.CategoryListProvider

部分关键代码

@Override     public Component getComponent(int index, Component component, ComponentContainer componentContainer) {            Component itemComponent = component;         CategoryListViewHolder viewHolder;          //获取布局组件         if (itemComponent == null) {              itemComponent =                     LayoutScatter.getInstance(context)                             .parse(ResourceTable.Layout_category_list_per, componentContainer, false);         }          //初始化ViewHolder         viewHolder = new CategoryListViewHolder();         viewHolder.text = (Text) itemComponent.findComponentById(ResourceTable.Id_categoryListPerText);         viewHolder.text.setText(getItem(index));          //对齐方式         if (TextTool.isLayoutRightToLeft(Locale.getDefault())) {              viewHolder.text.setTextAlignment(TextAlignment.VERTICAL_CENTER | TextAlignment.RIGHT);         } else {              viewHolder.text.setTextAlignment(TextAlignment.VERTICAL_CENTER | TextAlignment.LEFT);         }         //获取color.json中的颜色值，设置Text组件的颜色         if (selectIndex == index) {              viewHolder.text.setTextColor(new Color(ElementUtil.getColor(context, ResourceTable.Color_primary_color)));         } else {              viewHolder.text.setTextColor(new Color(ElementUtil.getColor(context, ResourceTable.Color_primary_default)));         }          return itemComponent;     }      /**      * 定义视图持有者      */     private static class CategoryListViewHolder {          Text text;     } 

2.ElementUtil

学习如何获取element color.json的颜色值，用java代码设置给组件。

package com.buty.categoryabilityjava.utils;  import ohos.agp.utils.Color; import ohos.app.Context; import ohos.global.resource.NotExistException; import ohos.global.resource.WrongTypeException;  import java.io.IOException; import java.util.logging.Level; import java.util.logging.Logger;  /**  * The ElementUtil  */ public class ElementUtil {      /**      * The getColor      *      * @param context    context      * @param resColorId resColorId      * @return color      */     public static int getColor(Context context, int resColorId) {          try {              //             String strColor = context.getResourceManager().getElement(resColorId).getString();              if (strColor.length() == 7) {                  //返回7位颜色值                 return context.getResourceManager().getElement(resColorId).getColor();             } else if (strColor.length() == 9) {                  //返回9位颜色值                 return Color.getIntColor(strColor);             } else {                  return 0x000000;             }         } catch (WrongTypeException | NotExistException | IOException e) {              Logger.getLogger(ElementUtil.class.getName()).log(Level.SEVERE, e.getMessage());         }         return 0x000000;     } } 

3.GridAdapter

package com.buty.categoryabilityjava.view;  import com.buty.categoryabilityjava.utils.LogUtils;  import ohos.agp.components.Component; import ohos.agp.components.Image; import ohos.agp.components.LayoutScatter; import ohos.agp.components.Text; import ohos.app.Context;  import java.util.ArrayList; import java.util.List; import java.util.Map; import java.util.stream.IntStream;  /**  * The GridAdapter, adapter of the gridView  */ public class GridAdapter {      private final List<Component> componentList = new ArrayList<>();      /**      * The GridAdapter, adapter of the gridView      *      * @param context context      * @param xmlId   xmlId, the xml layout of each item of gridView      * @param data    data, the number of key-value also the number of item      * @param from    from, the collection for the key in de data      * @param to      to, the value from the data to the component target      */     public GridAdapter(Context context, int xmlId, List<Map<String, Object>> data, String[] from, int[] to) {          for (Map<String, Object> datum : data) {              // get component for the xml             Component layoutComponent = LayoutScatter.getInstance(context).parse(xmlId, null, false);              // create each itemComponent for the args：data、from、to             IntStream.range(0, to.length)                     .forEach(                             index -> {                                  Component itemComponent = layoutComponent.findComponentById(to[index]);                                 if (itemComponent instanceof Image) {                                      Image image = (Image) itemComponent;                                     if (datum.get(from[index]) instanceof int[]) {                                          try {                                              image.setPixelMap(((int[]) datum.get(from[index]))[index]);                                         } catch (IndexOutOfBoundsException e) {                                              LogUtils.error("GridAdapter", "IndexOutOfBoundsException");                                         }                                     }                                 } else {                                      if (itemComponent instanceof Text) {                                          Text text = (Text) itemComponent;                                         if (datum.get(from[index]) instanceof String[]) {                                              try {                                                  text.setText(((String[]) datum.get(from[index]))[index]);                                             } catch (IndexOutOfBoundsException e) {                                                  LogUtils.error("GridAdapter", "IndexOutOfBoundsException");                                                 text.setText("null");                                             }                                         } else if (datum.get(from[index]) instanceof int[]) {                                              try {                                                  text.setText(((int[]) datum.get(from[index]))[index]);                                             } catch (IndexOutOfBoundsException e) {                                                  LogUtils.error("GridAdapter", "IndexOutOfBoundsException");                                                 text.setText("null");                                             }                                         } else {                                              text.setText("null");                                         }                                     }                                 }                             });              componentList.add(layoutComponent);         }     }      /**      * The getComponentList      *      * @return componentList      */     List<Component> getComponentList() {          return componentList;     } } 

4.GridView

package com.buty.categoryabilityjava.view;  import ohos.agp.components.AttrSet; import ohos.agp.components.Component; import ohos.agp.components.ComponentContainer; import ohos.agp.components.TableLayout; import ohos.agp.utils.TextTool; import ohos.app.Context;  import java.util.Locale;  /**  * The GridView， a custom component like grid  */ public class GridView extends TableLayout implements Component.LayoutRefreshedListener {      private OnItemClickListener onItemClickListener;     private OnRefreshedListener onRefreshedListener;      private GridAdapter adapter;      // custom Attr     private int columnMargin;     private int rowMargin;      //add custom attr     private int rowPadding;      private boolean isOnRefreshed = false;      public GridView(Context context) {          super(context);         setLayoutRefreshedListener(this);     }      public GridView(Context context, AttrSet attrSet) {          super(context, attrSet);         setLayoutRefreshedListener(this);         //获取自定义属性的预设值         columnMargin =                 attrSet.getAttr("columnMargin").isPresent()                         ? attrSet.getAttr("columnMargin").get().getDimensionValue()                         : 0;          rowMargin =                 attrSet.getAttr("rowMargin").isPresent() ? attrSet.getAttr("rowMargin").get().getDimensionValue() : 0;     }      public GridView(Context context, AttrSet attrSet, String styleName) {          super(context, attrSet, styleName);         setLayoutRefreshedListener(this);         columnMargin =                 attrSet.getAttr("columnMargin").isPresent()                         ? attrSet.getAttr("columnMargin").get().getDimensionValue()                         : 0;         rowMargin =                 attrSet.getAttr("rowMargin").isPresent() ? attrSet.getAttr("rowMargin").get().getDimensionValue() : 0;     }      @Override     public void onRefreshed(Component component) {          if (isOnRefreshed) {              return;         }         isOnRefreshed = true;          layoutAdapter();         if (onRefreshedListener != null) {              onRefreshedListener.onRefreshed(component);         }     }      /**      * The setAdapter      *      * @param adapter adapter      */     public void setAdapter(GridAdapter adapter) {          this.adapter = adapter;         isOnRefreshed = false;     }      private void layoutAdapter() {          removeAllComponents();          for (int i = 0; i < adapter.getComponentList().size(); i++) {              Component componentItem = adapter.getComponentList().get(i);              ComponentContainer.LayoutConfig configComponent = componentItem.getLayoutConfig();             int totalWidth = getWidth() - getPaddingStart() - getPaddingEnd();             int columnMarginTmp = columnMargin;             if (columnMargin == 0) {                  columnMarginTmp = (totalWidth - componentItem.getWidth() * getColumnCount()) / (getColumnCount() - 1);             } else {                  configComponent.width = (totalWidth - columnMargin * (getColumnCount() - 1)) / getColumnCount();                 componentItem.setLayoutConfig(configComponent);             }              if (i % getColumnCount() != 0) {                  if (TextTool.isLayoutRightToLeft(Locale.getDefault())) {                      componentItem.setMarginRight(columnMarginTmp);                 } else {                      componentItem.setMarginLeft(columnMarginTmp);                 }             }              if (i / getColumnCount() != 0) {                  componentItem.setMarginTop(rowMargin);             }              final int index = i;              componentItem.setClickedListener(                     component -> {                          if (onItemClickListener != null) {                              onItemClickListener.onclick(component, index);                         }                     });              addComponent(componentItem);         }     }      /**      * The setOnItemClickListener      *      * @param onItemClickListener onItemClickListener      */     public void setOnItemClickListener(OnItemClickListener onItemClickListener) {          this.onItemClickListener = onItemClickListener;     }      /**      * The setOnRefreshedListener      *      * @param onRefreshedListener onRefreshedListener      */     public void setOnRefreshedListener(OnRefreshedListener onRefreshedListener) {          this.onRefreshedListener = onRefreshedListener;     }      /**      * The OnItemClickListener      */     public static class OnItemClickListener {          /**          * The onclick          *          * @param component component          * @param index     index          */         public void onclick(Component component, int index) {          }     }      /**      * The onRefreshedListener      */     public static class OnRefreshedListener {          /**          * The onRefreshed          *          * @param component component          */         public void onRefreshed(Component component) {          }     } } 

3.MainAbilitySlice

package com.buty.categoryabilityjava.slice;  import com.buty.categoryabilityjava.MainAbility; import com.buty.categoryabilityjava.ResourceTable; import com.buty.categoryabilityjava.data.CategoryData; import com.buty.categoryabilityjava.model.Item; import com.buty.categoryabilityjava.model.ItemChild; import com.buty.categoryabilityjava.provider.CategoryListProvider; import com.buty.categoryabilityjava.utils.ElementUtil; import com.buty.categoryabilityjava.utils.Toast; import com.buty.categoryabilityjava.view.GridAdapter; import com.buty.categoryabilityjava.view.GridView;  import ohos.aafwk.ability.AbilitySlice; import ohos.aafwk.content.Intent; import ohos.agp.components.Component; import ohos.agp.components.DirectionalLayout; import ohos.agp.components.Image; import ohos.agp.components.LayoutScatter; import ohos.agp.components.ListContainer; import ohos.agp.components.ScrollView; import ohos.agp.components.Text; import ohos.agp.components.TextField; import ohos.agp.utils.TextAlignment; import ohos.agp.utils.TextTool; import ohos.global.configuration.Configuration; import ohos.multimodalinput.event.KeyEvent;  import java.util.ArrayList; import java.util.HashMap; import java.util.List; import java.util.Locale; import java.util.Map; import java.util.stream.IntStream;  /**  * The MainAbilitySlice, the first page of app  */ public class MainAbilitySlice extends AbilitySlice {      // Button number on the bottom     private static final int BOTTOM_TAB_BUTTON_NUM = 4;      private CategoryData categoryData;      private CategoryListProvider categoryListProvider;     private TextField searchTextField;     private ListContainer categoryList;     private ScrollView itemListScroll;     private GridView itemLayoutGrid;     private DirectionalLayout itemChildLayout;      @Override     public void onStart(Intent intent) {          super.onStart(intent);         setUIContent(ResourceTable.Layout_ability_main);         this.getWindow().setStatusBarColor(ElementUtil.getColor(this, ResourceTable.Color_colorSubBackground));         this.getWindow().setNavigationBarColor(ElementUtil.getColor(this, ResourceTable.Color_colorSubBackground));          categoryData = new CategoryData(this);          initView();         initListener();         initBottomTab();     }      /**      * The initView, get component from xml      */     private void initView() {          // Init component         searchTextField = (TextField) findComponentById(ResourceTable.Id_searchTextField);          //ListContainer组件         categoryList = (ListContainer) findComponentById(ResourceTable.Id_categoryList);         //ScrollView组件         itemListScroll = (ScrollView) findComponentById(ResourceTable.Id_itemListScroll);         //子项布局grid         itemLayoutGrid = (GridView) findComponentById(ResourceTable.Id_itemLayoutGrid);         //获取子项布局组件         itemChildLayout = (DirectionalLayout) findComponentById(ResourceTable.Id_itemChildLayout);          //设置样式         searchTextField.setTextAlignment(TextAlignment.START | TextAlignment.VERTICAL_CENTER);         if (TextTool.isLayoutRightToLeft(Locale.getDefault())) {              searchTextField.setLayoutDirection(Component.LayoutDirection.RTL);         } else {              searchTextField.setLayoutDirection(Component.LayoutDirection.LTR);         }     }      private void initLocaleChange() {          ((MainAbility) getAbility())                  .setLocaleChangeListener(                         //区域更改监听器                         new MainAbility.LocaleChangeListener() {                              @Override                             public void onLocaleChange(Configuration configuration) {                                  super.onLocaleChange(configuration);                                 if (!configuration                                         .getFirstLocale()                                         .getLanguage()                                         .equals(Locale.getDefault().getLanguage())) {                                      categoryData = new CategoryData(MainAbilitySlice.this);                                     int index = categoryListProvider.getSelectIndex();                                     categoryListProvider =                                             new CategoryListProvider(                                                     categoryData.getCategoryList().getListText(),                                                     MainAbilitySlice.this);                                     categoryList.setItemProvider(categoryListProvider);                                     categoryListProvider.setSelectIndex(index);                                      refreshItemGrid(                                             categoryData                                                     .getItemList(                                                             categoryData.getCategoryList().getListText().get(index))                                                     .getListItem());                                     initItemChild(                                             categoryData                                                     .getItemList(                                                             categoryData.getCategoryList().getListText().get(index))                                                     .getListItemChild());                                      categoryListProvider.notifyDataChanged();                                 }                             }                         });     }      /**      * The initListener, set listener of component      */     private void initListener() {          initLocaleChange();          searchTextField.setKeyEventListener(                 (component, keyEvent) -> {                      if (keyEvent.isKeyDown() && keyEvent.getKeyCode() == KeyEvent.KEY_ENTER) {                          Toast.makeToast(                                 MainAbilitySlice.this,                                 getString(ResourceTable.String_you_search) + searchTextField.getText(),                                 Toast.TOAST_SHORT)                                 .show();                     }                     return false;                 });          // Init categoryList         categoryList.setItemClickedListener(                 (listContainer, component, index, l1) -> {                      if (categoryListProvider.getSelectIndex() == index) {                          return;                     }                      String categoryName = categoryData.getCategoryList().getListText().get(index);                     categoryListProvider.setSelectIndex(index);                      refreshItemGrid(categoryData.getItemList(categoryName).getListItem());                      initItemChild(categoryData.getItemList(categoryName).getListItemChild());                      categoryListProvider.notifyDataChanged();                      itemListScroll.fluentScrollYTo(0);                 });          categoryListProvider = new CategoryListProvider(categoryData.getCategoryList().getListText(), this);         categoryList.setItemProvider(categoryListProvider);          // Init itemGrid         itemLayoutGrid.setOnItemClickListener(                 new GridView.OnItemClickListener() {                      @Override                     public void onclick(Component component, int index) {                          String text = ((Text) component.findComponentById(ResourceTable.Id_itemGridPerText)).getText();                         Toast.makeToast(                                 MainAbilitySlice.this,                                 getString(ResourceTable.String_you_clicked) + text,                                 Toast.TOAST_SHORT)                                 .show();                     }                 });          refreshItemGrid(categoryData.getItemList(categoryData.getCategoryList().getListText().get(0)).getListItem());         initItemChild(categoryData.getItemList(categoryData.getCategoryList().getListText().get(0)).getListItemChild());     }      /**      * The refreshItemGrid, refresh the itemGrid each time when select a category      *      * @param itemList itemList, the bean of itemGrid      */     private void refreshItemGrid(List<Item> itemList) {          List<Map<String, Object>> adapterData = new ArrayList<>();          // Create adapterData         IntStream.range(0, itemList.size()).forEach(index -> {              Map<String, Object> showItem = new HashMap<>();             String[] itemText = new String[]{ itemList.get(index).getItemText()};             showItem.put("itemGridPerText", itemText);             adapterData.add(showItem);         });          // Create gridAdapter         GridAdapter gridAdapter =                 new GridAdapter(                         this,                         ResourceTable.Layout_item_grid_per,                         adapterData,                         new String[]{ "itemGridPerText"},                         new int[]{ ResourceTable.Id_itemGridPerText});          // Set adapter         itemLayoutGrid.setAdapter(gridAdapter);     }      /**      * The initItemChild, init the itemChild each time when select a category      *      * @param itemChildList itemChildList, the bean of itemChild      */     private void initItemChild(List<ItemChild> itemChildList) {           //清空组件         itemChildLayout.removeAllComponents();         itemChildList.add(new ItemChild());         // Create itemChild         for (ItemChild itemChild : itemChildList) {              Component childComponent =                     LayoutScatter.getInstance(this).parse(ResourceTable.Layout_item_child_per, null, false);              Text text = (Text) childComponent.findComponentById(ResourceTable.Id_itemChildPerText);             Text more = (Text) childComponent.findComponentById(ResourceTable.Id_itemChildPerMore);             GridView gridView = (GridView) childComponent.findComponentById(ResourceTable.Id_itemChildPerGrid);              gridView.setOnItemClickListener(                     new GridView.OnItemClickListener() {                          @Override                         public void onclick(Component component, int index) {                              String text =                                     ((Text) component.findComponentById(ResourceTable.Id_itemChildPerGridPerText))                                             .getText();                             Toast.makeToast(                                     MainAbilitySlice.this,                                     getString(ResourceTable.String_you_clicked) + text,                                     Toast.TOAST_SHORT)                                     .show();                         }                     });              gridView.setOnRefreshedListener(                     new GridView.OnRefreshedListener() {                          @Override                         public void onRefreshed(Component component) {                              text.setText(itemChild.getItemChildText());                             more.setVisibility(Component.VISIBLE);                         }                     });              List<Map<String, Object>> adapterData = new ArrayList<>();              // Create adapterData             for (int j = 0; j < itemChild.getListItem().size(); j++) {                  Map<String, Object> showitem = new HashMap<>();                 String[] itemText = new String[]{ itemChild.getListItem().get(j).getItemText()};                 showitem.put("itemChildPerGridPerText", itemText);                 adapterData.add(showitem);             }              // Create gridAdapter             GridAdapter gridAdapter =                     new GridAdapter(                             this,                             ResourceTable.Layout_item_child_per_grid_per,                             adapterData,                             new String[]{ "itemChildPerGridPerText"},                             new int[]{ ResourceTable.Id_itemChildPerGridPerText});              // set adapter             gridView.setAdapter(gridAdapter);              itemChildLayout.addComponent(childComponent);         }     }      /**      * The initBottomTab, init the bottomTab      */     private void initBottomTab() {          DirectionalLayout bottomTab = (DirectionalLayout) findComponentById(ResourceTable.Id_bottom_tabMenu);         List<DirectionalLayout> tabList = new ArrayList<>();         //遍历创建tab 按钮         IntStream.range(0, BOTTOM_TAB_BUTTON_NUM).forEach(count -> {               // Use LayoutScatter to convert xml file into Component instance             DirectionalLayout tab =                     (DirectionalLayout)                             LayoutScatter.getInstance(getContext()).parse(ResourceTable.Layout_tab, bottomTab, false);              //按钮icon             Image buttonImage = (Image) tab.findComponentById(ResourceTable.Id_bottom_tab_button_image);             if (buttonImage != null) {                  buttonImage.setScaleMode(Image.ScaleMode.STRETCH);                 if (count == BOTTOM_TAB_BUTTON_NUM - 1) {                      buttonImage.setPixelMap(ResourceTable.Media_icon_actived);                 } else {                      buttonImage.setPixelMap(ResourceTable.Media_icon_normal);                 }             }             //按钮文本             Text buttonText = (Text) tab.findComponentById(ResourceTable.Id_bottom_tab_button_text);             if (buttonText != null) {                  //string.json 获取value的方法                 buttonText.setText(getString(ResourceTable.String_tab));             }             //点击事件             tab.setClickedListener(                     component -> {                          // Deselect all tabs in tab menu                         for (DirectionalLayout btn : tabList) {                              ((Image) btn.findComponentById(ResourceTable.Id_bottom_tab_button_image))                                     .setPixelMap(ResourceTable.Media_icon_normal);                         }                          // Set seleted state on the clicked tab                         ((Image) component.findComponentById(ResourceTable.Id_bottom_tab_button_image))                                 .setPixelMap(ResourceTable.Media_icon_actived);                     });             //初始化好的tab，添加道tab 列表中             tabList.add(tab);             //添加道主页片的布局中             bottomTab.addComponent(tab);         });     }      @Override     public void onActive() {          super.onActive();     }      @Override     public void onForeground(Intent intent) {          super.onForeground(intent);     } } 

去掉页面顶部标题的方法

config.json文件中在abilities后面增加metaData代码：

,"metaData":{       "customizeData": [        {           "name": "hwc-theme",          "value": "androidhwext:style/Theme.Emui.Light.NoTitleBar",          "extra": ""        }      ]    } 

文章相关附件可以点击下面的原文链接前往下载

原文链接：https://harmonyos.51cto.com/posts/4776

想了解更多内容，请访问：

和华为官方合作共建的高防服务器鸿蒙技术社区

https://harmonyos.51cto.com

-->