Tab切換選項卡同時更換內容

Tab選項卡是應用程序中最最經常使用，也是最廣泛存在的一種佈局形態，不管是在PC端仍是在移動端，都是一種清晰明瞭，層級關係簡單的，可以使用戶明確所處位置。Tab選項卡能夠置於頁面的底部，好比微信底部選項卡；也能夠置於頂部，好比新聞類的APP頂部的類別選項；還能夠置於左側或者右側，通常常見的是後臺應用左側的樹形導航欄。它們存在一個共同的特性，那就不管我點擊那個選項卡，都不會跳轉到二級頁面，而是在同級頁面中在選項卡下的內容區域中去渲染當前選中的選項卡內容。好比下面的示例圖片中，咱們有三個Tab，圖片、視頻以及音頻，首次加載時咱們選中的是圖片（Image）選項卡，底部內容區域是一些排列的圖片，若是咱們選擇視頻（Video），那麼底部的圖片將被移除，視頻列表頁將被載入。

一、首先修改ability_main.xml代碼，在佈局中添加頂部選項卡列表。

<?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:background_element="#444444"
    ohos:orientation="vertical">
    <TabList
        ohos:id="$+id:tab_list"
        ohos:weight="1"
        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="#FFFFFF"
        ohos:selected_tab_indicator_color="#FFFFFF"
        ohos:selected_tab_indicator_height="2vp"/>
</DirectionalLayout>

二、在MainAbilitySlice中爲TabList容器添加Tab選項卡。

//列表項
TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);

TabList.Tab imageTab = tabList.new Tab(getContext());
imageTab.setText("Image");
tabList.addTab(imageTab, true);
scrollView.addComponent(imageGrid);

TabList.Tab videoTab = tabList.new Tab(getContext());
videoTab.setText("Video");
tabList.addTab(videoTab);

TabList.Tab audioTab = tabList.new Tab(getContext());
audioTab.setText("Audio");
tabList.addTab(audioTab);

三、選項卡切換狀態須要監聽選項卡的選中狀態。咱們能夠在監聽事件中對選項卡的業務邏輯作處理，其提供給咱們三種方法，一當前選中的Tab，二取消選中的Tab，三再次選中當前Tab。在這三個方法中，咱們能夠具體的實現業務邏輯，好比當前選中的Tab被連續點擊時，咱們能夠刷新咱們呈現的內容。

tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
    @Override
    public void onSelected(TabList.Tab tab) {
       //TODO 具體業務邏輯代碼
    }

    @Override
    public void onUnselected(TabList.Tab tab) {
       //TODO 具體業務邏輯代碼
    }

    @Override
    public void onReselected(TabList.Tab tab) {
       //TODO 具體業務邏輯代碼
    }
});

四、頂部選項卡咱們已經實現了，那麼怎麼去實現點擊後內容的更改呢？這裏就須要用到一個新的組件ScrollView，ScrollView是一種帶有滾動功能的組件。若是咱們使用常規的佈局組件，內容超出範圍後，上下左右滾動是須要咱們本身去重寫，而ScrollView組件只須要設置它的子組件方向便可。修改ability_main.xml代碼添加ScrollView組件。

<?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:background_element="#444444"
    ohos:orientation="vertical">

    <TabList
       ... />

    <ScrollView
        ohos:id="$+id:tab_content"
        ohos:height="match_parent"
        ohos:width="match_parent"
        ohos:padding="10vp"
        ohos:weight="9">

    </ScrollView>
</DirectionalLayout>

五、首先初始化兩個TableLayout組件，在其中添加多個子組件，用於顯示圖片列表和視頻列表（僅供參考學習，未實現真正的圖片和視頻）。

private void initVideoGrid() {
    videoGrid = new TableLayout(this);
    videoGrid.setWidth(MATCH_PARENT);
    videoGrid.setHeight(MATCH_CONTENT);
    videoGrid.setColumnCount(1);
    videoGrid.setRowCount(2);
    for (int i = 1; i < 4; i++) {
        Text text = new Text(this);
        text.setWidth(MATCH_PARENT);
        text.setHeight(800);
        text.setTextAlignment(TextAlignment.CENTER);
        text.setText("第" + i + "塊視頻");
        ShapeElement shapeElement = new ShapeElement();
        shapeElement.setCornerRadius(20);
        shapeElement.setRgbColor(new RgbColor(192,0,255));
        text.setBackground(shapeElement);
        text.setPadding(10,10,10,10);
        text.setMarginsTopAndBottom(10,10);
        text.setMarginsLeftAndRight(20,20);
        text.setTextSize(50);
        videoGrid.addComponent(text);
    }
}
private void initImageGrid() {
    imageGrid = new TableLayout(this);
    imageGrid.setWidth(MATCH_PARENT);
    imageGrid.setHeight(MATCH_CONTENT);
    imageGrid.setColumnCount(4);
    imageGrid.setRowCount(2);
    for (int i = 1; i <= 10; i++) {
        Text text = new Text(this);
        text.setWidth(400);
        text.setHeight(400);
        text.setTextAlignment(TextAlignment.CENTER);
        text.setText("第" + i + "塊圖片");
        ShapeElement shapeElement = new ShapeElement();
        shapeElement.setCornerRadius(20);
        shapeElement.setRgbColor(new RgbColor(0,192,255));
        text.setBackground(shapeElement);
        text.setPadding(10,10,10,10);
        text.setMarginsTopAndBottom(10,10);
        text.setMarginsLeftAndRight(20,20);
        text.setTextSize(50);
        imageGrid.addComponent(text);
    }
}

六、 構建好各自的Tab的內容後，咱們須要在選擇監聽中去作顯示處理。選中圖片後，須要加載圖片列表，選中視頻後，須要加載視頻列表的同時移除圖片列表，否則會存在小問題，你也能夠嘗試一下。看看出現了什麼問題。

文章後續內容和相關附件能夠點擊下面的原文連接前往學習
原文連接：https://harmonyos.51cto.com/posts/2456#bkwz

想了解更多關於鴻蒙的內容，請訪問：

51CTO和華爲官方戰略合做共建的鴻蒙技術社區

https://harmonyos.51cto.com/#bkwz