[鸿蒙/Harmony] HarmonyOS Codelab挑战赛记录之组件模块-Java 布局

上一期介绍了安装鸿蒙的开发环境以及开发工具，这一期主要展示在鸿蒙当中的所有布局

目录

1.HarmonyOS开发工具的安装

2.组件模块-Java 布局

3.基于图像模块实现图库图片的四种常见操作

 

 1.下载Codelab起步应用

1. 获取Codelab起步应用ComponentCodelab，可从gitee源码或github源码下载（或者点击这里直接下载）
2. 压缩包下载完毕后解压，放到你自己的项目文件夹下

2.安装模拟器

打开后需要先登录华为账号，授权成功后就可以运行模拟器了

 

3.体验控件

• 1.TabList和Tab组件

1.先创建一个布局文件

2.这是我预先写好的内容，可以复制进去体验一下

<?xml version="1.0" encoding="utf-8"?> 
<!-- 父布局 包裹需要设计的内容 -->
<!-- DirectionalLayout 类似于Android中的LinearLayout，可以水平和垂直摆放控件 -->
<!-- ohos:orientation="vertical" 水平摆放：horizontal 垂直摆放：vertical -->
<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>

 

3.设计好布局后，我们创建一个类，用来展示这个布局

4.创建完成后，我们要继承一下 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);
        //设置我们刚刚设计好的布局文件(命名风格就是：Layout_我们的布局文件名)
        super.setUIContent(ResourceTable.Layout_tab_list);
        initComponent();
        addTabSelectedListener();
    }

    private void initComponent() {
        //获取布局文件里边的Text控件
        tabContent = (Text) findComponentById(ResourceTable.Id_tab_content);
        //获取布局文件里边的TabList控件
        tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
        initTab();
    }

    /**
     * 初始化一下Tab的内容
     * 这里我打算添加三个选项，分别是图片（Image）、视频（Video）、音频（Audio）
     */
    private void initTab() {
        if( tabList.getTabCount() > 0 ) return;
        tabList.addTab(createTab("Image"));
        tabList.addTab(createTab("Video"));
        tabList.addTab(createTab("Audio"));
        //setFixedMode 是否允许tab滑动。false：适合tab过多的情况，可以左右滑动超出屏幕的tab
        tabList.setFixedMode(true);
        //默认选择第一个tab
        tabList.getTabAt(0).select();
        //默认Text控件被选中的文本
        tabContent.setText("Select the " + tabList.getTabAt(0).getText());
    }

    /**
     * 创建一个tab控件
     * @param text      tab展示的内容
     * @return          tab
     */
    private TabList.Tab createTab(String text) {
        TabList.Tab tab = tabList.new Tab(this);
        //展示的内容
        tab.setText(text);
        //最小宽度
        tab.setMinWidth(64);
        //设置左右内间距为12
        tab.setPadding(12, 0, 12, 0);
        return tab;
    }

    /**
     * tab被选择时事件监听器
     */
    private void addTabSelectedListener() {
        tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {
                //tab被选中的时候改变Text控件中的文本内容
                tabContent.setText("Select the " + tab.getText());
            }

            @Override
            public void onUnselected(TabList.Tab tab) {
            }

            @Override
            public void onReselected(TabList.Tab tab) {
            }
        });
    }
}

5.最后我们在同目录下找到 MainAbilitySlice

    @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);
    }

6.最后我们运行一下，点击TabList and Tab 按钮后就打开了我们写好的控件

还有很多好玩的控件和这个教程大同小异，点击这里可以去到HarmonyOS开发文档学习JAVA通用组件

在这里我就不一一介绍了