写点什么

鸿蒙系统之 Codelab 布局组件尝鲜

用户头像
liuzhen007
关注
发布于: 2021 年 05 月 12 日
鸿蒙系统之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(图片、视频、音频),页面内容将同步变化。


效果如下所示:


  1. 图片标签页



  1. 视频标签页



  1. 音频标签页



如果是 TV 设备,则其效果图展示如下:


  1. 图片标签页



  1. 视频标签页



  1. 音频标签页



如果是可穿戴设备,则其效果图展示如下:


总结

我们可以看到鸿蒙系统 API 日益完善,很多基础功能也在一步步完善,我们鸿蒙系统有更加广阔的舞台。


今天,我们主要介绍了 Codelab 的布局组件,期待更多工具组件持续推出。我也会继续关注鸿蒙 OS 的发展进步。


华为加油,鸿蒙加油!

发布于: 2021 年 05 月 12 日阅读数: 1449
用户头像

liuzhen007

关注

敲代码,搞开发。 2021.05.01 加入

本人深耕音视频技术,走全栈路线,前后端通吃,兼顾各端与流媒体服务器。 博客主页地址:https://liuzhen.blog.csdn.net 微信公众号:玩转音视频 欢迎交流学习!

评论

发布
暂无评论
鸿蒙系统之Codelab布局组件尝鲜