鸿蒙系统之Codelab布局组件尝鲜
目录
-
前言
-
正文
-
一切的前提：注册鸿蒙开发者帐号
-
一、Codelab组件整体预览
-
- 获取工程源码
-
- 打开 DevEco IDE
-
- 运行示例程序
-
-
二、TabList和Tab组件
-
- 设计布局
-
- 创建执行类
-
- 关联主页
-
- 运行程序
-
-
总结
前言
华为鸿蒙系统作为国产移动端手机系统的希望（不限于移动端），本人虽然不能参与其研发，但还是想出一份力，推广一波儿的。所以，平时一直关注着它的发展，比如某些阶段性的突破和新的重大功能推出。
正文
鸿蒙系统发布这么久了，很多功能也在不断完善过程中。
系统平台肯定会为大家准备很多的轮子，今天我们就来看看一个轮子——Codelab布局组件。
我们今天的讨论的重点也将围绕布局组件进行展开。
一切的前提：注册鸿蒙开发者帐号
这是很多人都会忽略的地方，特别是习惯了安卓开发的同学。
这一点，是我没有想到的，我原本以为鸿蒙系统开发者会和安卓一样，可以直接进行移动端的开发工作。但是实际上并非如此，鸿蒙开发团队选择和苹果一样的策略，需要先注册开发者帐号。
这让我想起了 《辟邪剑谱》 中第一式给人的感觉，只不过鸿蒙的第一式是：欲要开发，必先注册！
但是，鸿蒙有一点是比苹果强的，那就是注册免费。
注册地址：https://developer.huawei.com/consumer/cn/console#/serviceCards/
服务地址页面如下：
一、Codelab组件整体预览
具体步骤：
1. 获取工程源码
获取Codelab工具集的起步应用工程ComponentCodelab，可以从下面的地址获取源码。
gitee仓库地址：https://gitee.com/openharmony/codelabs/tree/master/ComponentCodelab
github仓库地址：https://github.com/huaweicodelabs/harmonyos-codelabs/tree/main/ComponentCodelab
大家可以根据自己的喜好选择地址下载，个人平时使用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 组件，并设置其样式。
具体代码参考如下：
<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
xmlns:ohos="http://schemas.huawei.com/res/ohos"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:top_margin="15vp"
ohos:orientation="vertical">
<TabList
ohos:id="$+id:tab_list"
ohos:top_margin="10vp"
ohos:tab_margin="24vp"
ohos:tab_length="140vp"
ohos:text_size="20fp"
ohos:height="36vp"
ohos:width="match_parent"
ohos:layout_alignment="center"
ohos:orientation="horizontal"
ohos:text_alignment="center"
ohos:normal_text_color="#999999"
ohos:selected_text_color="#afaafa"
ohos:selected_tab_indicator_color="#afaafa"
ohos:selected_tab_indicator_height="2vp"/>
<Text
ohos:id="$+id:tab_content"
ohos:width="match_parent"
ohos:height="match_parent"
ohos:text_alignment="center"
ohos:background_element="#70dbdb"
ohos:text_color="#2e2e2e"
ohos:text_size="16fp"/>
</DirectionalLayout>
2. 创建执行类
在 src/main/java/com/huawei/codelab/slice 目录下新建 TabListSlice.java 文件，继承自AbilitySlice。
在类内完成成员变量的定义，加载布局，组件的初始化，绑定点击事件。
代码实例：
package com.huawei.codelab.slice;
import com.huawei.codelab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TabList;
import ohos.agp.components.Text;
public class TabListSlice extends AbilitySlice {
private TabList tabList;
private Text tabContent;
@Override
public void onStart(Intent intent) {
super.onStart(intent);
super.setUIContent(ResourceTable.Layout_tab_list);
initComponent();
addTabSelectedListener();
}
private void initComponent() {
tabContent = (Text) findComponentById(ResourceTable.Id_tab_content);
tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
initTab();
}
private void initTab() {
if (tabList.getTabCount() == 0) {
tabList.addTab(createTab("Image"));
tabList.addTab(createTab("Video"));
tabList.addTab(createTab("Audio"));
tabList.setFixedMode(true);
tabList.getTabAt(0).select();
tabContent.setText("Select the " + tabList.getTabAt(0).getText());
}
}
private TabList.Tab createTab(String text) {
TabList.Tab tab = tabList.new Tab(this);
tab.setText(text);
tab.setMinWidth(64);
tab.setPadding(12, 0, 12, 0);
return tab;
}
private void addTabSelectedListener() {
tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
@Override
public void onSelected(TabList.Tab tab) {
tabContent.setText("Select the " + tab.getText());
}
@Override
public void onUnselected(TabList.Tab tab) {
}
@Override
public void onReselected(TabList.Tab tab) {
}
});
}
}
3. 关联主页
在 src/main/java/com/huawei/codelab/slice/MainAbilitySlice.java 的 onClick 方法中增加相关联的跳转逻辑。
具体代码如下：
@Override
public void onClick(Component component) {
String className = "";
switch (component.getId()) {
case ResourceTable.Id_tab_list:
className = "com.huawei.codelab.slice.TabListSlice";
break;
default:
break;
}
abilitySliceJump(className);
}
4. 运行程序
使用虚拟器运行上述程序，进入到程序主页，点击主页的TabList and Tab，即可看到TabList页面，点击页面上方不同的Tab（图片、视频、音频），页面内容将同步变化。
效果如下所示：
- 图片标签页
- 视频标签页
- 音频标签页
如果是TV设备，则其效果图展示如下：
- 图片标签页
- 视频标签页
- 音频标签页
如果是可穿戴设备，则其效果图展示如下：
总结
我们可以看到鸿蒙系统API日益完善，很多基础功能也在一步步完善，我们鸿蒙系统有更加广阔的舞台。
今天，我们主要介绍了Codelab的布局组件，期待更多工具组件持续推出。我也会继续关注鸿蒙OS的发展进步。
华为加油，鸿蒙加油！
- 点赞
- 收藏
- 关注作者
评论（0）