目錄java

前言git
正文github
一切的前提：註冊鴻蒙開發者賬號json
1、Codelab組件總體預覽markdown
- 1. 獲取工程源碼
- 1. 打開 DevEco IDE
- 1. 運行示例程序
2、TabList和Tab組件ide
- 1. 設計佈局
- 1. 建立執行類
- 1. 關聯主頁
- 1. 運行程序
總結工具

前言

華爲鴻蒙系統做爲國產移動端手機系統的但願（不限於移動端），本人雖然不能參與其研發，但仍是想出一份力，推廣一波兒的。因此，平時一直關注着它的發展，好比某些階段性的突破和新的重大功能推出。oop

正文

鴻蒙系統發佈這麼久了，不少功能也在不斷完善過程當中。佈局

系統平臺確定會爲你們準備不少的輪子，今天咱們就來看看一個輪子——Codelab佈局組件。ui

咱們今天的討論的重點也將圍繞佈局組件進行展開。

一切的前提：註冊鴻蒙開發者賬號

這是不少人都會忽略的地方，特別是習慣了安卓開發的同窗。

這一點，是我沒有想到的，我本來覺得鴻蒙系統開發者會和安卓同樣，能夠直接進行移動端的開發工做。可是實際上並不是如此，鴻蒙開發團隊選擇和蘋果同樣的策略，須要先註冊開發者賬號。

這讓我想起了 《辟邪劍譜》 中第一式給人的感受，只不過鴻蒙的第一式是：欲要開發，必先註冊！

可是，鴻蒙有一點是比蘋果強的，那就是註冊免費。

註冊地址：developer.huawei.com/consumer/cn…

服務地址頁面以下：

1、Codelab組件總體預覽

具體步驟：

1. 獲取工程源碼

獲取Codelab工具集的起步應用工程ComponentCodelab，能夠從下面的地址獲取源碼。

gitee倉庫地址：gitee.com/openharmony…

github倉庫地址：github.com/huaweicodel…

你們能夠根據本身的喜愛選擇地址下載，我的平時使用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包，也能夠實現上面的運行效果。

經過上面的例子，咱們能夠看出鴻蒙系統基本上能夠實現一套代碼多平臺使用的目的。

2、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的發展進步。

華爲加油，鴻蒙加油！

鴻蒙系統之Codelab佈局組件嚐鮮 | 創做者訓練營第二期

前言

正文