“程”风破浪的开发者｜【模块 -Java 布局】十分钟挑战鸿蒙 Codelab 组件
目录
前言
华为鸿蒙系统作为国产移动端手机系统的希望（不限于移动端），本人虽然不能参与其研发，但还是想出一份力，推广一波儿的。
正文
鸿蒙系统推出那么久了，很多功能也在不断完善过程中。
系统平台肯定会为大家准备很多的轮子，今天我们就来看看一个轮子——Codelab 布局组件。
一切的前提：注册鸿蒙开发者帐号
这是很多人都会忽略的地方，特别是习惯了安卓开发的同学。
这一点，是我没有想到的，我原本以为鸿蒙系统开发者会和安卓一样，可以直接进行移动端的开发工作。但是实际上并非如此，鸿蒙开发团队选择和苹果一样的策略，需要先注册开发者帐号。
这让我想起了《辟邪剑谱》中第一式给人的感觉，只不过鸿蒙的第一式是：欲要开发，必先注册！
但是，鸿蒙有一点是比苹果强的，那就是注册免费。
注册地址：华为开发者联盟
服务地址页面如下：
一、Codelab 组件整体预览
具体步骤：
1. 获取工程源码
获取 Codelab 工具集的起步应用工程 ComponentCodelab，可以从下面的地址获取源码。
gitee 仓库地址：https://gitee.com/openharmony/codelabs/tree/master/ComponentCodelab
github 仓库地址：harmonyos-codelabs/ComponentCodelab at main · huaweicodelabs/harmonyos-codelabs · GitHub
大家可以根据自己的喜好选择地址下载，个人平时使用 github 比较多，所以就用 github 的仓库地址了。
2. 打开 DevEco IDE
打开华为的 DevEco Studio 集成开发环境，打开我们 clone 的 ComponentCodelab 示例工程。
打开工程后，界面如下图所示：
猛的一看 IDE 的界面，和 Android Studio 还是很像的。所以，大家不用感觉那么陌生，基本上玩过 Android Studio 的小伙伴，上手 DevEco Studio 应该算轻车熟路。
3. 运行示例程序
接下来，我们有两种方式运行该程序，分别是虚拟器方式和实体设备方式，下面具体介绍。
1）模拟器运行
1.1 点击 Tools > HVD Manager，打开虚拟设备管理器。
点击后，我们可以看到支持的虚拟设备，包括手机 Phone、电视 TV、手表 Tablet、可穿戴设备 Wearable、汽车 Car。从这里我们也可以看出，鸿蒙系统的定位是整个物联网，布局要比安卓 Android 和苹果 iOS 大很多，远很多，这也是谷歌和苹果比较担心的地方。因此，有传言说苹果打算自己造车了。
1.2 选择 P40 设备，点击启动按钮。
这个时候，我们的设备列表里就会多出一个 P40 设备，我们选择这个虚拟设备。
1.3 点击 Run 'entry' ，启动应用程序。
程序运行成功后，界面如下图所示：
通过上图，我们可以看到 Codelab 的一些基础组件，比如 TabList 和 Tab 组件、ListContainer 组件、RadioContainer 组件等。
当然，我们也可以选择 TV 虚拟机，注意需要修改配置文件中 config.json 的 deviceType 属性为“tv”，这样运行结果的效果图如下所示：
还可以选择穿戴设备，界面如下：
2）实体设备运行
1.1 点击 Build > Build App(s)/Hap(s)>Build Debug Hap(s)构建 hap 包
首先是创建 Hap 包，类似 Android 的 apk。
1.2 点击 Run> Run ‘entry'运行 hap 包，也可以实现上面的运行效果。
通过上面的例子，我们可以看出鸿蒙系统基本上可以实现一套代码多平台使用的目的。
二、TabList 和 Tab 组件
我们知道 Tablist 是移动端应用程序比较常用的组件之一，它可以实现空间利用率最大化。Tablist 可以在同一个位置展现多个页签栏切换的内容，其中，Tab 为某个页签。子页签通常放在内容区上方，展示不同的分类。页签名称应该简洁明了，清晰描述分类的内容，比如图片、视频、音频。
下面，我通过一个例子来看一下 TabList 和 Tab 组件的使用方法。
具体步骤：
1. 设计布局
在 src/main/resources/base/layout 目录下新建布局文件 tab_list.xml，此布局文件中主要使用 Tablist 组件，并设置其样式。
具体代码参考如下：
2. 创建执行类
在 src/main/java/com/huawei/codelab/slice 目录下新建 TabListSlice.java 文件，继承自 AbilitySlice。
在类内完成成员变量的定义，加载布局，组件的初始化，绑定点击事件。
代码实例：
3. 关联主页
在 src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java 的 onClick 方法中增加相关联的跳转逻辑。
具体代码如下：
4. 运行程序
使用虚拟器运行上述程序，进入到程序主页，点击主页的 TabList and Tab，即可看到 TabList 页面，点击页面上方不同的 Tab（图片、视频、音频），页面内容将同步变化。
效果如下所示：
如果是 TV 设备，则其效果图展示如下：
1. 图片标签页
2. 视频标签页
3. 音频标签页
如果是可穿戴设备，则其效果图展示如下：
总结
我们可以看到鸿蒙系统 API 日益完善，很多基础功能也在一步步完善，我们鸿蒙系统有更加广阔的舞台。
今天，我们主要介绍了某些 Codelab 组件，期待更多工具组件持续推出。华为加油，鸿蒙加油！
作者简介：😄大家好，我是 Data-Mining（liuzhen007），是一名典型的音视频技术爱好者，前后就职于传统广电巨头和音视频互联网公司，具有丰富的音视频直播和点播相关经验，对 WebRTC、FFmpeg 和 Electron 有非常深入的了解。同时也是 CSDN 博客专家（博客之星）、华为云享专家（共创编辑、十佳博主）、51CTO 社区编辑、InfoQ 签约作者，欢迎关注我分享更多干货！😄
版权声明: 本文为 InfoQ 作者【liuzhen007】的原创文章。
原文链接:【http://xie.infoq.cn/article/5e2c5f0e05452c0bf750c3351】。文章转载请联系作者。
敲代码，搞开发。 2021-05-01 加入
本人深耕音视频技术，走全栈路线，前后端通吃，兼顾各端与流媒体服务器。 博客主页地址：https://liuzhen.blog.csdn.net 微信公众号：玩转音视频 欢迎交流学习！
评论