鸿蒙HarmonyOS官方模板学习 之 Grid Ability(Java)

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

目前创新互联已为1000多家的企业提供了网站建设、域名、雅安服务器托管、网站改版维护、企业网站设计、梅列网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

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

https://harmonyos.

Grid Ability(Java)

介绍

使用Java语言开发，用于Phone设备的Feature Ability模板，使用XML布局，显示内容为两部分网格表，网格每行显示4个项目，网格内元素可进行拖拽排序。

搭建环境

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

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

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

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

代码结构解读

注意：'#'代表注释

后台功能

 
 
 
 
      
  
  
  
  1. gridabilityjava 
    2.   
  
  
  
  2.      │  MainAbility.java 
    3.   
  
  
  
  3.      │  MyApplication.java 
    4.   
  
  
  
  4.      │ 
    5.   
  
  
  
  5.      ├─component 
    6.   
  
  
  
  6.      │      DragLayout.java #自定义的拖拽功能组件 
    7.   
  
  
  
  7.      │      GridView.java #自定义的Grid视图组件，extends TableLayout 
    8.   
  
  
  
  8.      │ 
    9.   
  
  
  
  9.      ├─model 
    10.   
  
  
  
  10.      │      GridItemInfo.java #Grid item 模型 
    11.   
  
  
  
  11.      │ 
    12.   
  
  
  
  12.      ├─provider 
    13.   
  
  
  
  13.      │      GridAdapter.java #给Grid提供实例化好的item 组件列表;提供了计算单个item的宽度的方法 
    14.   
  
  
  
  14.      │ 
    15.   
  
  
  
  15.      ├─slice 
    16.   
  
  
  
  16.      │      MainAbilitySlice.java #主能力页，负责实例化自定义的DragLayout拖拽组件 
    17.   
  
  
  
  17.      │ 
    18.   
  
  
  
  18.      └─utils 
    19.   
  
  
  
  19.              AppUtils.java #工具类，提供了从element资源中中获取value；获取屏幕的坐标的方法 
    20.

这是几个java类之间的关系

页面资源

 
 
 
 
      
  
  
  
  1. resources 
    2.   
  
  
  
  2.     ├─base 
    3.   
  
  
  
  3.     │  ├─element 
    4.   
  
  
  
  4.     │  │      color.json 
    5.   
  
  
  
  5.     │  │      float.json 
    6.   
  
  
  
  6.     │  │      integer.json 
    7.   
  
  
  
  7.     │  │      string.json 
    8.   
  
  
  
  8.     │  │ 
    9.   
  
  
  
  9.     │  ├─graphic 
    10.   
  
  
  
  10.     │  │      background_bottom_button.xml  #页面底部按钮形状 
    11.   
  
  
  
  11.     │  │      background_bottom_layout.xml  #页面底部布局形状 
    12.   
  
  
  
  12.     │  │      background_item_active_button.xml #grid item 激活形状 
    13.   
  
  
  
  13.     │  │      background_item_button.xml    #grid item 默认形状 
    14.   
  
  
  
  14.     │  │      background_table_layout_down.xml  #下面的 grid 形状 
    15.   
  
  
  
  15.     │  │      background_table_layout_up.xml    #上面的 grid 形状 
    16.   
  
  
  
  16.     │  │ 
    17.   
  
  
  
  17.     │  ├─layout 
    18.   
  
  
  
  18.     │  │      ability_main.xml #主显示页面 
    19.   
  
  
  
  19.     │  │      app_bar_layout.xml #app工具栏布局页面 
    20.   
  
  
  
  20.     │  │      grid_item.xml #单个grid item布局页面 
    21.   
  
  
  
  21.     │  │ 
    22.   
  
  
  
  22.     │  ├─media 
    23.   
  
  
  
  23.     │  │      5G.png 
    24.   
  
  
  
  24.     │  │      back.png 
    25.   
  
  
  
  25.     │  │      back_white.png 
    26.

页面布局

ability_main.xml #主显示页

此页面由DirectionalLayout、StackLayout、DependentLayout 布局构成，整体布局是上下布局。

上面时app工具栏，使用了StackLayout布局，通过includ标签引入到主页面。

下面是支持拖拽的GridView，由DependentLayout 和DirectionalLayout布局组成，使用的组件有ScrollView、GridView、Text、Button、Image。

app_bar_layout.xml #app工具栏布局页面

grid_item.xml #单个grid item布局页面

后台逻辑

1.初始化上面的GridView

先构建item模拟数据列表，将构建好的数据传递给GridAdapter 初始化item组件列表，通过GridView.setAdapter方法给每个item组件绑定长按事件，并设置GridView的TAG属性(TAG就是指上面的GridView还是下面的GridView)。

 
 
 
 
      
  
  
  
  1. /** 
    2.   
  
  
  
  2.  * 初始化上面的Grid item 
    3.   
  
  
  
  3.  */ 
    4.   
  
  
  
  4. private void initUpListItem() { 
    5.   
  
  
  
  5.     //构建item模拟数据列表 
    6.   
  
  
  
  6.     List upperItemList = new ArrayList<>(); 
    7.   
  
  
  
  7.     for (int i = 0; i < UP_ITEM_COUNT; i++) { 
    8.   
  
  
  
  8.         int iconId = icons[i]; 
    9.   
  
  
  
  9.         String text = texts[i]; 
    10.   
  
  
  
  10.         upperItemList.add(new GridItemInfo(text, iconId, UP_GRID_TAG)); 
    11.   
  
  
  
  11.     } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.     GridView gridView = (GridView) slice.findComponentById(ResourceTable.Id_grid_view_up); 
    14.   
  
  
  
  14.     //将构建好的数据传递给GridAdapter 初始化item组件列表 
    15.   
  
  
  
  15.     GridAdapter adapter = new GridAdapter(slice.getContext(), upperItemList); 
    16.   
  
  
  
  16.  
    17.   
  
  
  
  17.     //通过GridView.setAdapter方法给每个item组件绑定长按事件 
    18.   
  
  
  
  18.     gridView.setAdapter(adapter, longClickListener); 
    19.   
  
  
  
  19.     //设置GridView的TAG属性 
    20.   
  
  
  
  20.     gridView.setTag(UP_GRID_TAG); 
    21.   
  
  
  
  21. } 
    22.

2.初始化下面的GridView

逻辑同上

 
 
 
 
      
  
  
  
  1. /** 
    2.   
  
  
  
  2.  * 初始化下面的Grid item 
    3.   
  
  
  
  3.  */ 
    4.   
  
  
  
  4. private void initDownListItem() { 
    5.   
  
  
  
  5.     String itemText = AppUtils.getStringResource(slice.getContext(), ResourceTable.String_grid_item_text); 
    6.   
  
  
  
  6.     List lowerItemList = new ArrayList<>(); 
    7.   
  
  
  
  7.     for (int i = 0; i < DOWN_ITEM_COUNT; i++) { 
    8.   
  
  
  
  8.         //随意取的图标 
    9.   
  
  
  
  9.         int iconId = icons[i + 5]; 
    10.   
  
  
  
  10.         String text = texts[i + 5]; 
    11.   
  
  
  
  11.         lowerItemList.add(new GridItemInfo(text, iconId, DOWN_GRID_TAG)); 
    12.   
  
  
  
  12.     } 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14.     if (slice.findComponentById(ResourceTable.Id_grid_view_down) instanceof GridView) { 
    15.   
  
  
  
  15.         GridView gridView = (GridView) slice.findComponentById(ResourceTable.Id_grid_view_down); 
    16.   
  
  
  
  16.         GridAdapter adapter = new GridAdapter(slice.getContext(), lowerItemList); 
    17.   
  
  
  
  17.         gridView.setAdapter(adapter, longClickListener); 
    18.   
  
  
  
  18.         gridView.setTag(DOWN_GRID_TAG); 
    19.   
  
  
  
  19.     } 
    20.   
  
  
  
  20. } 
    21.

 3.初始化底部的按钮

这个地方做了一个屏幕适配，就是根据屏幕的宽度、边距来设置按钮的宽度，

同时添加了按钮的监听事件，点击按钮 关闭当前Ability。

 
 
 
 
      
  
  
  
  1. /** 
    2.   
  
  
  
  2.  * Calculating button width based on screen width. 
    3.   
  
  
  
  3.  * The actual width is the screen width minus the margin of the buttons. 
    4.   
  
  
  
  4.  * 设置底部 2个按钮的宽度 
    5.   
  
  
  
  5.  */ 
    6.   
  
  
  
  6. private void initBottomItem() { 
    7.   
  
  
  
  7.     int screenWidth = AppUtils.getScreenInfo(slice.getContext()).getPointXToInt(); 
    8.   
  
  
  
  8.     //计算按钮宽度 
    9.   
  
  
  
  9.     int buttonWidth = (screenWidth - AttrHelper.vp2px(80, slice.getContext())) / 2; 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11.     Component leftButton = slice.findComponentById(ResourceTable.Id_bottom_left_button); 
    12.   
  
  
  
  12.     leftButton.setWidth(buttonWidth); 
    13.   
  
  
  
  13.     //关闭Ability 
    14.   
  
  
  
  14.     leftButton.setClickedListener(component -> slice.terminateAbility()); 
    15.   
  
  
  
  15.  
    16.   
  
  
  
  16.     Component rightButton = slice.findComponentById(ResourceTable.Id_bottom_right_button); 
    17.   
  
  
  
  17.     rightButton.setWidth(buttonWidth); 
    18.   
  
  
  
  18.     //关闭Ability 
    19.   
  
  
  
  19.     rightButton.setClickedListener(component -> slice.terminateAbility()); 
    20.   
  
  
  
  20.  
    21.   
  
  
  
  21. } 
    22.

4.初始化app工具栏

这个没做什么，似乎是想根据本地化信息，设置返回箭头的方向，因为有的语言是从右往左看的。

 
 
 
 
      
  
  
  
  1. /** 
    2.   
  
  
  
  2.  * 检查指定 Locale 的文本布局是否从右到左。 
    3.   
  
  
  
  3.  * 设置返回箭头的方向 
    4.   
  
  
  
  4.  */ 
    5.   
  
  
  
  5. private void initAppBar() { 
    6.   
  
  
  
  6.     if (TextTool.isLayoutRightToLeft(Locale.getDefault())) { 
    7.   
  
  
  
  7.         Image appBackImg = (Image) slice.findComponentById(ResourceTable.Id_left_arrow); 
    8.   
  
  
  
  8.         appBackImg.setRotation(180); 
    9.   
  
  
  
  9.     } 
    10.   
  
  
  
  10. } 
    11.

5.初始化监听事件

包括返回按钮的返回事件、ScrollView的touch事件。

touch事件包含大量的细节操作，如拖拽时有一个阴影效果，滚动条的处理，拖拽交换结束的处理，过渡效果，上下grid 有效区域的计算，拖拽完成将拖拽的组件添加到对应grid的操作等，参照着拿来用吧。

 
 
 
 
      
  
  
  
  1. /** 
    2.   
  
  
  
  2.  * 初始化监听事件，包括返回按钮返回事件、ScrollView的touch事件 
    3.   
  
  
  
  3.  */ 
    4.   
  
  
  
  4. private void initEventListener() { 
    5.   
  
  
  
  5.  
    6.   
  
  
  
  6.     //‘返回按钮’的监听事件 
    7.   
  
  
  
  7.     if (slice.findComponentById(ResourceTable.Id_left_arrow) instanceof Image) { 
    8.   
  
  
  
  8.         Image backIcon = (Image) slice.findComponentById(ResourceTable.Id_left_arrow); 
    9.   
  
  
  
  9.         // 
    10.   
  
  
  
  10.         backIcon.setClickedListener(component -> slice.terminateAbility()); 
    11.   
  
  
  
  11.     } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13.     //ScrollView的 Touch事件监听，拿来用就可以了 
    14.   
  
  
  
  14.     scrollView.setTouchEventListener( 
    15.   
  
  
  
  15.             (component, touchEvent) -> { 
    16.   
  
  
  
  16.                 //按下屏幕的位置 
    17.   
  
  
  
  17.                 MmiPoint downScreenPoint = touchEvent.getPointerScreenPosition(touchEvent.getIndex()); 
    18.   
  
  
  
  18.  
    19.   
  
  
  
  19.                 switch (touchEvent.getAction()) { 
    20.   
  
  
  
  20.                     //表示第一根手指触摸屏幕。这表示交互的开始 
    21.   
  
  
  
  21.                     case TouchEvent.PRIMARY_POINT_DOWN: 
    22.   
  
  
  
  22.                         currentDragX = (int) downScreenPoint.getX(); 
    23.   
  
  
  
  23.                         currentDragY = (int) downScreenPoint.getY(); 
    24.   
  
  
  
  24.                         //获取指针索引相对于偏移位置的 x 和 y 坐标。 
    25.   
  
  
  
  25.                         MmiPoint downPoint = touchEvent.getPointerPosition(touchEvent.getIndex()); 
    26.   
  
  
  
  26.                         scrollViewTop = (int) downScreenPoint.getY() - (int) downPoint.getY(); 
    27.   
  
  
  
  27.                         scrollViewLeft = (int) downScreenPoint.getX() - (int) downPoint.getX(); 
    28.   
  
  
  
  28.                         return true; 
    29.   
  
  
  
  29.                     //表示最后一个手指从屏幕上抬起。这表示交互结束 
    30.   
  
  
  
  30.                     case TouchEvent.PRIMARY_POINT_UP: 
    31.   
  
  
  
  31.                         //恢复下面grid的描述 
    32.   
  
  
  
  32.                         changeTableLayoutDownDesc(ResourceTable.String_down_grid_layout_desc_text); 
    33.   
  
  
  
  33.                     case TouchEvent.CANCEL: 
    34.   
  
  
  
  34.                         if (isViewOnDrag) { 
    35.   
  
  
  
  35.                             selectedView.setScale(1.0f, 1.0f); 
    36.   
  
  
  
  36.                             selectedView.setAlpha(1.0f); 
    37.   
  
  
  
  37.                             selectedView.setVisibility(Component.VISIBLE); 
    38.   
  
  
  
  38.                             isViewOnDrag = false; 
    39.   
  
  
  
  39.                             isScroll = false; 
    40.   
  
  
  
  40.                             return true; 
    41.   
  
  
  
  41.                         } 
    42.   
  
  
  
  42.                         break; 
    43.   
  
  
  
  43.  
    44.   
  
  
  
  44.                     //表示手指在屏幕上移动 
    45.   
  
  
  
  45.                     case TouchEvent.POINT_MOVE: 
    46.   
  
  
  
  46.                         if (!isViewOnDrag) { 
    47.   
  
  
  
  47.                             break; 
    48.   
  
  
  
  48.                         } 
    49.   
  
  
  
  49.                         int pointX = (int) downScreenPoint.getX(); 
    50.   
  
  
  
  50.                         int pointY = (int) downScreenPoint.getY(); 
    51.   
  
  
  
  51.  
    52.   
  
  
  
  52.  
    53.   
  
  
  
  53.                         this.exchangeItem(pointX, pointY); 
    54.   
  
  
  
  54.  
    55.   
  
  
  
  55.                         if (UP_GRID_TAG.equals(selectedView.getTag())) { 
    56.   
  
  
  
  56.                             this.swapItems(pointX, pointY); 
    57.   
  
  
  
  57.                         } 
    58.   
  
  
  
  58.                         this.handleScroll(pointY); 
    59.   
  
  
  
  59.                         return true; 
    60.   
  
  
  
  60.                 } 
    61.   
  
  
  
  61.                 return false; 
    62.   
  
  
  
  62.             } 
    63.   
  
  
  
  63.     ); 
    64.   
  
  
  
  64.  
    65.   
  
  
  
  65. } 
    66.

复制归纳总结

1.自定义组件在构造函数中传递slice

这样的目的是便于获取页面的其它组件。

 
 
 
 
      
  
  
  
  1. Component itemLayout=LayoutScatter.getInstance(slice.getContext()) 
    2.   
  
  
  
  2. .parse(ResourceTable.Layout_grid_item, null, false); 
    3.

需要注意的是slice指代的是页面，但是自定义组件往往是有自己的布局文件的，一般不在slice中，所以不要通过slice获取自定义组件的子组件，获取不到，不过可以通过LayoutScatter获取

 
 
 
 
      
  
  
  
  1. //错误的方式 
    2.   
  
  
  
  2. Component gridItem=  slice.findComponentById(ResourceTable.Layout_grid_item); 
    3.   
  
  
  
  3. //正确的方式 
    4.   
  
  
  
  4. Component gridItem = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_grid_item, null, false); 
    5.

2.单位转换vp2px

java组件对象宽高、边距的单位默认时px，

从element中获取的值需要进行单位转换，可以使用AttrHelper.vp2px 将vp转换为px。

 
 
 
 
      
  
  
  
  1. if (gridItem.findComponentById(ResourceTable.Id_grid_item_text) instanceof Text) { 
    2.   
  
  
  
  2.     Text textItem = (Text) gridItem.findComponentById(ResourceTable.Id_grid_item_text); 
    3.   
  
  
  
  3.     textItem.setText(item.getItemText()); 
    4.   
  
  
  
  4.     textItem.setTextSize(AttrHelper.fp2px(10, context)); 
    5.   
  
  
  
  5. } 
    6.

3.子组件的获取

获取一个组件对象后，可以使用该组件对象的findComponentById方法继续获取内部的子组件

 
 
 
 
      
  
  
  
  1. Component gridItem = LayoutScatter.getInstance(context).parse(ResourceTable.Layout_grid_item, null, false); 
    2.   
  
  
  
  2. Image imageItem = (Image) gridItem.findComponentById(ResourceTable.Id_grid_item_image); 
    3.

4.TableLayout的使用

TableLayout继承自ComponentContainer，提供用于在带有表格的组件中排列组件的布局。

TableLayout 提供了用于对齐和排列组件的接口，以在带有表格的组件中显示组件。 排列方式、行列数、元件位置均可配置。

例如 removeAllComponents();可以用来清除 ComponentContainer 管理的所有组件，addComponent 用来将组件添加到ComponentContainer 容器中。示例中GridView就是继承自TableLayout。

 
 
 
 
      
  
  
  
  1. /** 
    2.   
  
  
  
  2.  * The setAdapter 
    3.   
  
  
  
  3.  * 
    4.   
  
  
  
  4.  * @param adapter adapter 
    5.   
  
  
  
  5.  * @param longClickedListener longClickedListener 
    6.   
  
  
  
  6.  */ 
    7.   
  
  
  
  7. void setAdapter(GridAdapter adapter, LongClickedListener longClickedListener) { 
    8.   
  
  
  
  8.     //清除 ComponentContainer 管理的所有组件 
    9.   
  
  
  
  9.     removeAllComponents(); 
    10.   
  
  
  
  10.     //遍历item组件列表 
    11.   
  
  
  
  11.     for (int i = 0; i < adapter.getComponentList().size(); i++) { 
    12.   
  
  
  
  12.         //为组件中的长按事件注册一个监听器（组件被点击并按住） 
    13.   
  
  
  
  13.         adapter.getComponentList().get(i).setLongClickedListener(longClickedListener); 
    14.   
  
  
  
  14.         //将组件添加到容器中 
    15.   
  
  
  
  15.         addComponent(adapter.getComponentList().get(i)); 
    16.   
  
  
  
  16.     } 
    17.   
  
  
  
  17. } 
    18.

效果展示

示例代码模拟了一下手机控制中心，编辑快捷开关的效果

原效果模拟效果

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

网站标题：鸿蒙HarmonyOS官方模板学习 之 Grid Ability(Java)
分享URL：http://www.shufengxianlan.com/qtweb/news46/91246.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

软件开发知识

各行业网站

手机网站版本　　 　小谭建站　　 　成都小程序开发　　 　眉山网站建设　　 　重庆水土双线托管　　 　成都企业网站定制　　 　眉山服务器租用　　 　宜宾网站建设　　 　温江服务器租用　　 　成都网站建设　　 　成都做网站建设公司　　 　高县网站建设　　 　特丽尔硅藻泥　　 　虚拟主机　　 　乐山网站建设　　 　中国西部信息中心　　 　平昌做网站　　 　联通服务器托管　　 　校园网站建设方案　　 　3D立体画