[鴻蒙/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通用組件

在這里我就不一一介紹了