#夏日挑战赛#十分钟挑战鸿蒙Codelab组件 原创

发布于 2022-7-7 19:04
浏览
2收藏

本文正在参加星光计划3.0–夏日挑战赛,活动链接:https://ost.51cto.com/posts/13641

目录

前言

正文

一切的前提:注册鸿蒙开发者帐号

一、Codelab组件整体预览

  1. 获取工程源码

  2. 打开 DevEco IDE

  3. 运行示例程序

二、TabList和Tab组件

  1. 设计布局

  2. 创建执行类

  3. 关联主页

  4. 运行程序

总结

前言

华为鸿蒙系统作为国产移动端手机系统的希望(不限于移动端),本人虽然不能参与其研发,但还是想出一份力,推广一波儿的。

正文

鸿蒙系统推出那么久了,很多功能也在不断完善过程中。

系统平台肯定会为大家准备很多的轮子,今天我们就来看看一个轮子——Codelab布局组件。

一切的前提:注册鸿蒙开发者帐号

这是很多人都会忽略的地方,特别是习惯了安卓开发的同学。

这一点,是我没有想到的,我原本以为鸿蒙系统开发者会和安卓一样,可以直接进行移动端的开发工作。但是实际上并非如此,鸿蒙开发团队选择和苹果一样的策略,需要先注册开发者帐号。

这让我想起了《辟邪剑谱》中第一式给人的感觉,只不过鸿蒙的第一式是:欲要开发,必先注册!

但是,鸿蒙有一点是比苹果强的,那就是注册免费。

一、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示例工程。

打开工程后,界面如下图所示:

#夏日挑战赛#十分钟挑战鸿蒙Codelab组件-开源基础软件社区

猛的一看IDE的界面,和Android Studio还是很像的。所以,大家不用感觉那么陌生,基本上玩过Android Studio的小伙伴,上手DevEco Studio应该算轻车熟路。

3. 运行示例程序

接下来,我们有两种方式运行该程序,分别是虚拟器方式和实体设备方式,下面具体介绍。

1)模拟器运行

1.1 点击 Tools > HVD Manager,打开虚拟设备管理器。

#夏日挑战赛#十分钟挑战鸿蒙Codelab组件-开源基础软件社区

点击后,我们可以看到支持的虚拟设备,包括手机Phone、电视TV、手表Tablet、可穿戴设备Wearable、汽车Car。从这里我们也可以看出,鸿蒙系统的定位是整个物联网,布局要比安卓Android和苹果iOS大很多,远很多,这也是谷歌和苹果比较担心的地方。因此,有传言说苹果打算自己造车了。

1.2 选择P40设备,点击启动按钮。

这个时候,我们的设备列表里就会多出一个P40设备,我们选择这个虚拟设备。

1.3 点击 Run ‘entry’ ,启动应用程序。

程序运行成功后,界面如下图所示:

#夏日挑战赛#十分钟挑战鸿蒙Codelab组件-开源基础软件社区

通过上图,我们可以看到Codelab的一些基础组件,比如TabList和Tab组件、ListContainer组件、RadioContainer组件等。

当然,我们也可以选择TV虚拟机,注意需要修改配置文件中config.json的deviceType属性为“tv”,这样运行结果的效果图如下所示:

#夏日挑战赛#十分钟挑战鸿蒙Codelab组件-开源基础软件社区

还可以选择穿戴设备,界面如下:

#夏日挑战赛#十分钟挑战鸿蒙Codelab组件-开源基础软件社区

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>
  1. 创建执行类
    在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) {
            }
        });
    }
}
  1. 关联主页
    在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); 
}
  1. 运行程序
    使用虚拟器运行上述程序,进入到程序主页,点击主页的TabList and Tab,即可看到TabList页面,点击页面上方不同的Tab(图片、视频、音频),页面内容将同步变化。

效果如下所示:

#夏日挑战赛#十分钟挑战鸿蒙Codelab组件-开源基础软件社区

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

  1. 图片标签页

#夏日挑战赛#十分钟挑战鸿蒙Codelab组件-开源基础软件社区

  1. 视频标签页

#夏日挑战赛#十分钟挑战鸿蒙Codelab组件-开源基础软件社区

  1. 音频标签页

#夏日挑战赛#十分钟挑战鸿蒙Codelab组件-开源基础软件社区

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

#夏日挑战赛#十分钟挑战鸿蒙Codelab组件-开源基础软件社区

总结

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

今天,我们主要介绍了某些Codelab组件,期待更多工具组件持续推出。

华为加油,鸿蒙加油!

作者简介:😄大家好,我是 Data-Mining(liuzhen007),是一位典型的音视频技术爱好者,前后就职于传统广电巨头和音视频互联网公司,具有丰富的音视频直播和点播相关经验,对 WebRTC、FFmpeg 和 Electron 有非常深入的了解,😄公众号:玩转音视频。同时也是 CSDN 博客专家(博客之星)、华为云享专家(共创编辑、十佳博主)、51CTO社区编辑、InfoQ 签约作者,欢迎关注我分享更多干货!😄

©著作权归作者所有,如需转载,请注明出处,否则将追究法律责任
标签
已于2022-7-7 19:11:40修改
7
收藏 2
回复
举报
回复
添加资源
添加资源将有机会获得更多曝光,你也可以直接关联已上传资源 去关联
    相关推荐