鸿蒙HarMonyOS的UI组件学习四之自定义选项卡

Posted 2021-07-21 笔触狂放

今天分享一个手机应用主界面的选项卡页面，可能很多朋友不理解什么叫选项卡界面，那么接下来举几个栗子:

大家都熟悉QQ这个应用软件，那么整个软件其实就分为三大类，消息，联系人，动态，点击界面的最下面的三个进行切换不同的页面，那么这三个就称为选项卡，再比如微信:

微信软件的主界面也是这种结构，只不过它下面是四个选项卡，微信，通讯录，发现，我
，如果大家观察的比较仔细一点，有些软件也可能会出现五个选项卡，甚至有些软件的选项卡不在界面的底部，可能在界面的顶部。所有在手机和平板等移动设备中，这个选项卡的功能使用率非常普遍，既然任何软件都在用，那么今天我们也来学习一下，怎么搭建类似的选项卡结构界面。
在鸿蒙系统中，要完成这种结构，需要用TabList这个组件。
那么我们先来创建布局，因为整个页面的结构其实就分为两部分，内容和选项卡。屏幕的大部分是内容占据，小部分是选项卡占据，并且是上下结构，所有我们选择用线性布局DirectionalLayout.代码如下:

<?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">
	<!-- 第一部分，用于显示内容-->
    <DirectionalLayout
        ohos:id="$+id:dl"
        ohos:height="match_content"
        ohos:weight="1"
        ohos:alignment="center"
        ohos:width="match_parent">
        <!--根据选项卡的切换，显示对应选项卡的内容 -->
        <Text
            ohos:id="$+id:tv"
            ohos:height="match_content"
            ohos:width="match_content"
            ohos:text_size="30fp"
            ohos:text_alignment="center"
            />
    </DirectionalLayout>
    <!--第二部分，用于添加自定义选项卡 -->
    <TabList
        ohos:id="$+id:tl"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_size="25fp"
        ohos:background_element="#FF1BCED4"
        ohos:normal_text_color="#000000"
        ohos:selected_text_color="#FF0000"
        ohos:selected_tab_indicator_color="#ff0000"
        ohos:text_alignment="center"
        ohos:fixed_mode="true"
        ohos:tab_margin="20px"/>

</DirectionalLayout>

ohos:background_element="#FF1BCED4"设置整个选项卡容器的背景颜色
ohos:normal_text_color="#000000"设置未选中的选项卡的文字颜色
ohos:selected_text_color="#FF0000"设置选中的选项卡的文字颜色
ohos:selected_tab_indicator_color="#ff0000"
ohos:text_alignment="center"设置每个选项卡的文字居中对齐
ohos:fixed_mode="true"设置添加的多个选项卡平均平分屏幕的宽度
ohos:tab_margin="20px"设置每个选项卡之间的间距

这个只是布局的代码，那么接下来我们需要通过java代码来动态的添加自定义选项卡，在项目的java文件夹的slice文件夹中新建一个界面TableListAbilitySlice，其代码如下:

package com.example.hm_phone_java.slice;

import com.example.hm_phone_java.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.colors.RgbColor;
import ohos.agp.components.DependentLayout;
import ohos.agp.components.DirectionalLayout;
import ohos.agp.components.TabList;
import ohos.agp.components.Text;
import ohos.agp.components.element.ShapeElement;

public class TableListAbilitySlice extends AbilitySlice {
	//定义四个选项卡的文本信息
    private String[] texts = {"新闻", "图片", "视频", "我的"};
    //定义一个选项卡数组，用于保存创建的四个选项卡的对象
    private TabList.Tab[] tabs = new TabList.Tab[texts.length];
    //定义一个颜色数组，添加了四种颜色，分别为红，绿，蓝，黄，用于改变选项卡时，同时替换内容的背景颜色
    private RgbColor[] colors={new RgbColor(255,0,0),
            new RgbColor(0,255,0),
            new RgbColor(0,0,255),
            new RgbColor(255,255,0)};

    @Override
    protected void onStart(Intent intent) {
        super.onStart(intent);
        //加载布局文件
        this.setUIContent(ResourceTable.Layout_ability_tablist);
        //获得text组件对象
        Text tv = (Text) this.findComponentById(ResourceTable.Id_tv);
        //获得选项卡容器的对象
        TabList tl = (TabList) this.findComponentById(ResourceTable.Id_tl);
        //获得显示内容的布局对象
        DirectionalLayout dl= (DirectionalLayout) this.findComponentById(ResourceTable.Id_dl);
        //创建选项卡，动态添加至选项卡组件容器中
        for (int i = 0; i < texts.length; i++) {
            tabs[i] = tl.new Tab(this.getContext());//创建多个选项卡
            tabs[i].setText(texts[i]);//给不同选项卡添加文本信息
            tl.addTab(tabs[i]);//将创建的选项卡添加至容器
            tabs[i].setPaddingTop(40);//设置每一个选项卡的上边内部间距
            tabs[i].setPaddingBottom(40);//设置每一个选项卡的下边内部间距
        }
        //设置第一个选项卡的选中背景颜色
        ShapeElement se=new ShapeElement();
        se.setRgbColor(new RgbColor(164,145,27));
        tabs[0].setBackground(se);
        //默认选中第一个选项卡
        tl.selectTab(tabs[0]);

        //设置内容页的背景颜色和显示的内容
        ShapeElement se1=new ShapeElement();
        se1.setRgbColor(colors[0]);
        dl.setBackground(se1);
        tv.setText(texts[0]);


        //给TabList组件添加选项卡改变事件
        tl.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {
                //当有选项卡被选中执行
                ShapeElement se=new ShapeElement();
                se.setRgbColor(new RgbColor(164,145,27));
                tab.setBackground(se);
                //选中了哪个选项卡，就将该选项卡的文本信息显示在Text组件上
                tv.setText(tab.getText());
                //并改变内容的背景颜色
                ShapeElement se1=new ShapeElement();
                se1.setRgbColor(colors[tab.getPosition()]);
                dl.setBackground(se1);
            }

            @Override
            public void onUnselected(TabList.Tab tab) {
                //当有选项卡从选中状态变为未选中状态执行
                //当选项卡变为未选中时，恢复选项卡的背景颜色
                tab.setBackground(null);
            }

            @Override
            public void onReselected(TabList.Tab tab) {
                //当同一选项卡被点击多次执行
            }
        });
    }
}

接下来就可以开启华为手机模拟器，将该项目运行起来，其效果图如下:




一个软件的主体结构搭建好了，那么接下来只需要根据自己的需求完成对应不同模块的内容显示即可，怎么样是不是挺简单，大家可以动手试试。
今天分享到这里，感谢大家的阅读和关注，一起学习一起进步！！！
下一篇 【鸿蒙】HarMonyOS的UI组件学习五之面试宝典