鴻蒙 TabList和Tab基礎用法教程

前言：

各位同學大家好，有段時間沒有給大家更新文章了 具體多久我也不記得，最近在學習鴻蒙開發（第三天學）寫了一些小demo 就想着分享給家 今天要講的是TabList和Tab 鴻蒙OS開發中的 頂部導航控件

准備工作

1 安裝鴻蒙開發環境 大家可以看我之前的文章
華為鴻蒙系統開發初體驗 ：https://www.jianshu.com/p/f94c847c7fdc
效果圖：

具體實現：

Tablist可以實現多個頁簽欄的切換，Tab為某個頁簽。子頁簽通常放在內容區上方，展示不同的分類。頁簽名稱應該簡潔明了，清晰描述分類的內容。

• xml中創建TabList

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:orientation="vertical">

    <TabList
        ohos:id="$+id:tab_list"
        ohos:top_margin="10vp"
        ohos:tab_margin="12vp"
        ohos:tab_length="60vp"
        ohos:text_size="15fp"
        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="#FF0000"
        ohos:selected_tab_indicator_color="#FF0000"
        ohos:selected_tab_indicator_height="2vp"
        />
</DirectionalLayout>

• 設置默認狀態和選中狀態的字體顏色和indicator的顏色

<TabList
       ohos:normal_text_color="#999999"
        ohos:selected_text_color="#FF0000"
        ohos:selected_tab_indicator_color="#FF0000"
        ohos:selected_tab_indicator_height="2vp">

• TabList中添加Tab

     for (int i = 0; i < str.length; i++) {
                TabList.Tab tab = tabList.new Tab(getContext());
                tab.setText(str[i]);
                tabList.addTab(tab);
            }

• 假數據

    private  String[] str={"image","Video","Audio","HuaweiShare"};

• 在代碼中設置Tab的布局

tabList.setTabLength(60); // 設置Tab的寬度
tabList.setTabMargin(26); // 設置兩個Tab之間的間距

展示效果圖：

• 設置FixedMode
  默認為false，該模式下TabList的總寬度是各Tab寬度的總和，若固定了TabList的寬度，當超出可視區域，則可以通過滑動TabList來顯示。如果設置為true，TabList的總寬度將與可視區域相同，各個Tab的寬度也會根據TabList的寬度而平均分配，該模式適用於Tab較少的情況。

tabList.setFixedMode(true);

展示效果圖：

• 在某個位置新增Tab

// 本示例中在"圖片"和"視頻"之間的頁簽中新增"新聞"頁簽
TabList.Tab tab = createTab("News");
tabList.addTab(tab, 1); // 1表示位置

定義一個創建Tab並設置Tab 的方法

// 創建Tab並設置Tab
private TabList.Tab createTab(String name) {
    TabList.Tab tab = tabList.new Tab(this);
    tab.setText(name);
    tab.setName(name);
    tab.setMinWidth(64);
    tab.setPadding(12, 0, 12, 0);
    return tab;
}

• 在某個位置新增Tab展示效果圖
  
• 響應焦點變化事件監聽

   tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
                @Override
                public void onSelected(TabList.Tab tab) {
                    // 當某個Tab從未選中狀態變為選中狀態時的回調

                    new ToastDialog(MainAbility.this)
                            .setText("從未選中狀態變為選中狀態時的回調")
                            .setAlignment(LayoutAlignment.CENTER)
                            .show();
                }

                @Override
                public void onUnselected(TabList.Tab tab) {
                    // 當某個Tab從選中狀態變為未選中狀態時的回調
                    new ToastDialog(MainAbility.this)
                            .setText("從選中狀態變為未選中狀態時的回調")
                            .setAlignment(LayoutAlignment.CENTER)
                            .show();
                }

                @Override
                public void onReselected(TabList.Tab tab) {
                    // 當某個Tab已處於選中狀態，再次被點擊時的狀態回調
                    new ToastDialog(MainAbility.this)
                            .setText("已處於選中狀態，再次被點擊時的狀態回調")
                            .setAlignment(LayoutAlignment.CENTER)
                            .show();
                }
            });

• 響應監聽事件效果圖：
  

TabList常用接口

Tab的使用

• 設置Tab屬性

tab.setMinWidth(64);
tab.setPadding(12, 0, 12, 0);

• 選中某個Tab

tab.select();

• 獲取Tab在TabList中的位置索引

tab.getPosition();

• 完整java代碼：

package com.example.tablist;
import com.example.tablist.slice.MainAbilitySlice;
import ohos.aafwk.ability.Ability;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TabList;
import ohos.agp.utils.LayoutAlignment;
import ohos.agp.window.dialog.ToastDialog;

/**
 *
 * 創建人：xuqing
 * 創建時間：2020年12月20日15:33:53
 * 類說明：  tablist 示例
 *
 *
 */
public class MainAbility extends Ability {
    private  String[] str={"image","Video","Audio","HuaweiShare"};
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);
        initview();
    }

    private void initview() {
        TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
        if(tabList!=null){
            for (int i = 0; i < str.length; i++) {
                TabList.Tab tab = tabList.new Tab(getContext());
                tab.setText(str[i]);
                tabList.addTab(tab);
            }
           /* tabList.setTabLength(60); // 設置Tab的寬度
            tabList.setTabMargin(26); // 設置兩個Tab之間的間距*/
            tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
                @Override
                public void onSelected(TabList.Tab tab) {
                    // 當某個Tab從未選中狀態變為選中狀態時的回調

                    new ToastDialog(MainAbility.this)
                            .setText("從未選中狀態變為選中狀態時的回調")
                            .setAlignment(LayoutAlignment.CENTER)
                            .show();
                }
                @Override
                public void onUnselected(TabList.Tab tab) {
                    // 當某個Tab從選中狀態變為未選中狀態時的回調
                    new ToastDialog(MainAbility.this)
                            .setText("從選中狀態變為未選中狀態時的回調")
                            .setAlignment(LayoutAlignment.CENTER)
                            .show();
                }
                @Override
                public void onReselected(TabList.Tab tab) {
                    // 當某個Tab已處於選中狀態，再次被點擊時的狀態回調
                    new ToastDialog(MainAbility.this)
                            .setText("已處於選中狀態，再次被點擊時的狀態回調")
                            .setAlignment(LayoutAlignment.CENTER)
                            .show();
                }
            });
        }
    }
}

到此我們的鴻蒙os中 TabList和Tab 基礎用法就講完了

最后總結：

我們看完 鴻蒙 TabList和Tab基礎用法后感覺和安卓里面的 TabLayout以及flutter 中tabbar 很類似 是用來處理APP UI布局中頂部導航 多個標簽頁切換和滑動效果， 總得來說鴻蒙 TabList和Tab 功能還算齊全
各種事件的監聽方法 和官方暴露給我們調用的方法都是很完備 可以讓我們輕松的實現各種復雜的頂部導航效果，由於篇幅有限 我這邊就不展開細講 有興趣的同學可以自己私下多研究 可以完成其他更炫的交互效果， 以上就是我個人在學習了3天的鴻蒙os開發 對於鴻蒙TabList和Tab 基礎用法的總結 如果有紕漏和錯誤的地方希望大家指正 最后希望我的文章能幫助到各位解決問題 ，以后我還會貢獻更多有用的代碼分享給大家。各位同學如果覺得文章還不錯 ，麻煩給關注和star，小弟在這里謝過啦 也可以加我個人QQ/微信（1693891473）

項目地址：

碼雲 ：https://gitee.com/qiuyu123/hm_tablist

QQ 交流群: