IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> 系统运维 -> 鸿蒙应用开发 | 选项卡(TabList / Tab)的功能和用法 -> 正文阅读

[系统运维]鸿蒙应用开发 | 选项卡(TabList / Tab)的功能和用法

导语:大家好,我是你们的朋友 朋哥,十年码农经验,对技术情有独钟。

今天来一个大招,鸿蒙中的顶部 切换 选项卡 TabList,开发应用的时候会经常用到,一般作为二级内容分类来用的?。

图片

不多说,今天的内容很多,下面我们开始今天的文章,还是老规矩,通过如下几点来说:
?

1,简介 2,属性? 3,实战

简介

Tablist可以实现多个页签栏的切换,Tab为某个页签。子页签通常放在内容区上方,展示不同的分类。页签名称应该简洁明了,清晰描述分类的内容。

一般应用场景 都是作为应用首页的 二级菜单的多个分类:
?

图片

用到的属性

Tablist的共有XML属性继承自:ScrollView
?

图片

图片

图片

图片

官网属性一大堆,看到都头大,其实使用起来就几个属性。


常用接口:
?

图片

实战

1,创建项目,添加默认Tablist

<TabList
    ohos:id="$+id:tab_list"
    ohos:text_size="20fp"
    ohos:height="50vp"
    ohos:width="match_parent"
    ohos:layout_alignment="center"
    ohos:orientation="horizontal"
????ohos:text_alignment="center"
/>

添加Tab

TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
TabList.Tab tab = tabList.new Tab(getContext());
tab.setText("推荐");
tabList.addTab(tab);
TabList.Tab tab2 = tabList.new Tab(getContext());
tab2.setText("视频");
tabList.addTab(tab2);
TabList.Tab tab3 = tabList.new Tab(getContext());
tab3.setText("新闻");
tabList.addTab(tab3);
TabList.Tab tab4 = tabList.new Tab(getContext());
tab4.setText("问答");
tabList.addTab(tab4);


新增选项,在两个之间插入一个。

//?本示例中在"推荐"和"视频"之间的页签中新增"资源"页签
  TabList.Tab tab5 = tabList.new Tab(getContext());
  tab5.setText("资源");
  tab5.setMinWidth(80);
  tab5.setPadding(12, 0, 12, 0);
??tabList.addTab(tab5,?1);?//?1?表示位置,在第一个后新增一个

默认选中第几个:
???????

// 默认选中 某一个tab
  tab2.select();
  tab2.getPosition(); // 获取tab的当前索引下标

设置点击某一个选中后的?操作:
???????

// 设置监听
  tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
      @Override
      public void onSelected(TabList.Tab tab) {
          // 当某个Tab从未选中状态变为选中状态时的回调
          System.out.println("名称:"+tab.getText()+"- 下标:"+tab.getPosition());
          text_title.setText(tab.getText());
      }

      @Override
      public void onUnselected(TabList.Tab tab) {
          // 当某个Tab从选中状态变为未选中状态时的回调
      }

      @Override
      public void onReselected(TabList.Tab tab) {
          // 当某个Tab已处于选中状态,再次被点击时的状态回调
      }
  });

设置显示样式

<TabList
    ohos:id="$+id:tab_list"
    ohos:text_size="20fp"
    ohos:height="50vp"
    ohos:width="match_parent"
    ohos:layout_alignment="center"
    ohos:orientation="horizontal"
    ohos:text_alignment="center"

????ohos:tab_margin="20vp"?//tab间距
    ohos:tab_length="60vp" //tab长度

    ohos:normal_text_color="#000000" //未选中字体颜色
    ohos:selected_text_color="#CE0000" // 选中字体样式

    ohos:selected_tab_indicator_color="#CE0000" // 选中下面的划线样式
????ohos:selected_tab_indicator_height="2vp"/>?//选中划线的高度

完整代码:

<?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:text_size="20fp"
        ohos:height="50vp"
        ohos:width="match_parent"
        ohos:layout_alignment="center"
        ohos:orientation="horizontal"
        ohos:text_alignment="center"

        ohos:tab_margin="20vp"
        ohos:tab_length="60vp"

        ohos:normal_text_color="#000000"
        ohos:selected_text_color="#CE0000"

        ohos:selected_tab_indicator_color="#CE0000"
        ohos:selected_tab_indicator_height="2vp"/>

    <DirectionalLayout
        ohos:height="1vp"
        ohos:width="match_parent"
        ohos:top_margin="10vp"
        ohos:background_element="#333333"/>

    <Text
        ohos:id="$+id:text_title"
        ohos:text_size="20vp"
        ohos:text="内容"
        ohos:weight="1"
        ohos:height="match_content"
        ohos:width="match_parent"
        ohos:text_alignment="center"/>

</DirectionalLayout>

package com.example.tablist_tab.slice;

import com.example.tablist_tab.ResourceTable;
import ohos.aafwk.ability.AbilitySlice;
import ohos.aafwk.content.Intent;
import ohos.agp.components.TabList;
import ohos.agp.components.Text;

public class MainAbilitySlice extends AbilitySlice {
    private Text text_title;
    @Override
    public void onStart(Intent intent) {
        super.onStart(intent);
        super.setUIContent(ResourceTable.Layout_ability_main);

        text_title = (Text) findComponentById(ResourceTable.Id_text_title);

        TabList tabList = (TabList) findComponentById(ResourceTable.Id_tab_list);
        TabList.Tab tab = tabList.new Tab(getContext());
        tab.setText("推荐");
        tabList.addTab(tab);
        TabList.Tab tab2 = tabList.new Tab(getContext());
        tab2.setText("视频");
        tabList.addTab(tab2);
        TabList.Tab tab3 = tabList.new Tab(getContext());
        tab3.setText("新闻");
        tabList.addTab(tab3);
        TabList.Tab tab4 = tabList.new Tab(getContext());
        tab4.setText("问答");
        tabList.addTab(tab4);


        // 新增选项
        // 本示例中在"推荐"和"视频"之间的页签中新增"资源"页签
        TabList.Tab tab5 = tabList.new Tab(getContext());
        tab5.setText("资源");
        tab5.setMinWidth(80);
        tab5.setPadding(12, 0, 12, 0);
        tabList.addTab(tab5, 1); // 1 表示位置,在第一个后新增一个

        // 默认选中 某一个tab
        tab2.select();
        tab2.getPosition(); // 获取tab的当前索引下标

        // 设置监听
        tabList.addTabSelectedListener(new TabList.TabSelectedListener() {
            @Override
            public void onSelected(TabList.Tab tab) {
                // 当某个Tab从未选中状态变为选中状态时的回调
                System.out.println("名称:"+tab.getText()+"- 下标:"+tab.getPosition());
                text_title.setText(tab.getText());
            }

            @Override
            public void onUnselected(TabList.Tab tab) {
                // 当某个Tab从选中状态变为未选中状态时的回调
            }

            @Override
            public void onReselected(TabList.Tab tab) {
                // 当某个Tab已处于选中状态,再次被点击时的状态回调
            }
        });
    }

    @Override
    public void onActive() {
        super.onActive();
    }

    @Override
    public void onForeground(Intent intent) {
        super.onForeground(intent);
    }
}

源码:https://gitee.com/codegrowth/haomony-develop/tree/master/TabList_Tab???????

关注公众号【程序员漫话编程】,后台回复?”鸿蒙“?,即可获得上千鸿蒙开源组件。

原创不易,有用就关注一下。要是帮到了你 就给个三连吧,多谢支持。
?

觉得不错的小伙伴,记得帮我?点个赞和关注哟,笔芯笔芯~**

作者:码工
?

有问题请留言或者私信,可以 微信搜索:程序员漫话编程,关注公众号获得更多免费学习资料。

  系统运维 最新文章
配置小型公司网络WLAN基本业务(AC通过三层
如何在交付运维过程中建立风险底线意识,提
快速传输大文件,怎么通过网络传大文件给对
从游戏服务端角度分析移动同步(状态同步)
MySQL使用MyCat实现分库分表
如何用DWDM射频光纤技术实现200公里外的站点
国内顺畅下载k8s.gcr.io的镜像
自动化测试appium
ctfshow ssrf
Linux操作系统学习之实用指令(Centos7/8均
上一篇文章      下一篇文章      查看所有文章
加:2021-08-05 17:44:38  更:2021-08-05 17:45:29 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/25 18:37:05-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码