HarmonyOS官方模板学习 之 Grid Ability(Java) 原创 精华
目录
Grid Ability(Java)
介绍
使用Java语言开发,用于Phone设备的Feature Ability模板,使用XML布局,显示内容为两部分网格表,网格每行显示4个项目,网格内元素可进行拖拽排序。
搭建环境
安装DevEco Studio,详情请参考DevEco Studio下载。
设置DevEco Studio开发环境,DevEco Studio开发环境需要依赖于网络环境,需要连接上网络才能确保工具的正常使用,可以根据如下两种情况来配置开发环境:
如果可以直接访问Internet,只需进行下载HarmonyOS SDK操作。
如果网络不能直接访问Internet,需要通过代理服务器才可以访问,请参考配置开发环境。
代码结构解读
注意:'#'代表注释
后台功能
这是几个java类之间的关系
页面资源
页面布局
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)。
2.初始化下面的GridView
逻辑同上
3.初始化底部的按钮
这个地方做了一个屏幕适配,就是根据屏幕的宽度、边距来设置按钮的宽度,
同时添加了按钮的监听事件,点击按钮 关闭当前Ability。
4.初始化app工具栏
这个没做什么,似乎是想根据本地化信息,设置返回箭头的方向,因为有的语言是从右往左看的。
5.初始化监听事件
包括返回按钮的返回事件、ScrollView的touch事件。
touch事件包含大量的细节操作,如拖拽时有一个阴影效果,滚动条的处理,拖拽交换结束的处理,过渡效果,上下grid 有效区域的计算,拖拽完成将拖拽的组件添加到对应grid的操作等,参照着拿来用吧。
归纳总结
1.自定义组件在构造函数中传递slice
这样的目的是便于获取页面的其它组件。
需要注意的是slice指代的是页面,但是自定义组件往往是有自己的布局文件的,一般不在slice中,所以不要通过slice获取自定义组件的子组件,获取不到,不过可以通过LayoutScatter获取
2.单位转换vp2px
java组件对象宽高、边距的单位默认时px,
从element中获取的值需要进行单位转换,可以使用AttrHelper.vp2px 将vp转换为px。
3.子组件的获取
获取一个组件对象后,可以使用该组件对象的findComponentById方法继续获取内部的子组件
4.TableLayout的使用
TableLayout继承自ComponentContainer,提供用于在带有表格的组件中排列组件的布局。
TableLayout 提供了用于对齐和排列组件的接口,以在带有表格的组件中显示组件。 排列方式、行列数、元件位置均可配置。
例如 removeAllComponents();可以用来清除 ComponentContainer 管理的所有组件,addComponent 用来将组件添加到ComponentContainer 容器中。示例中GridView就是继承自TableLayout。
效果展示
示例代码模拟了一下手机控制中心,编辑快捷开关的效果
原效果 | 模拟效果 |
---|---|
![]() |
![]() |
完整代码
附件直接下载
很好的指导文章,感谢分享。
很喜欢大佬的学习方式,跟着大佬的脚步走
共同学习哈,恭喜你成为社区明星!
哈哈哈,我就划水,产出没你多!