Android TabLayout选项卡使用教程

 更新时间:2023年04月06日 09:49:34   作者:别偷我的猪_09  
这篇文章主要介绍了Android TabLayout选项卡使用,为什么会有这篇文章呢,是因为之前关于TabLayout的使用陆陆续续也写了好几篇了,感觉比较分散,且不成体系,写这篇文章的目的就是希望能把各种效果的实现一次性讲齐

脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用

TabLayout

TabLayout 在开发中一般作为选项卡使用,常与 ViewPager2 和Fragment 结合起来使用。

常用属性:

app:tabBackground 设置 TabLayout 的背景色,改变整个TabLayout 的颜色;

app:tabTextColor 设置未被选中时文字的颜色;

app:tabSelectorColor 设置选中时文字颜色;

app:tabTextAppearance="@android:style/TextAppearance.Large" 设置 TabLayout 的文本主题,无法通过 textSize 来设置文字大小,只能通过主题来设定;

app:tabMode="scrollable"设置 TabLayout 可滑动,当 tabItem 个数较多时,一个界面无法呈现所有的导航标签,此时就必须要用;

app:tabIndicator 设置指示器;

app:tabIndicatorColor 设置指示器颜色;

​​​​​​​ app:tabIndecatorHeight 设置指示器高度,当app:tabIndecatorHeight="0dp",隐藏 Indicator 效果;

app:tabTextAppearance="@android:style/TextAppearance.Holo.Large" 改变 TabLayout 里 TabItem 文字的大小;

app: tabPadding 设置 Tab 内部 item 的 padding。也可以单独设置某个方向的padding, 比如 app:tabPaddingStart 设置左边距;

app:paddingEdng / app:paddingStart 设置整个 TabLayout 的 padding;

app:tabGravity="center" 居中,如果是 fill,则充满;

app:tabMaxWidth / app:tabMinWidth 设置最大/最小的 tab 宽度,对 Tab 的宽度进行限制。

TabItem

给TabLayout 添加 Item 有两种方法,其中一种就是使用 TabItem 在 xml 里直接添加。

1. 使用TabItem 给 TabLayout 添加卡片。

1
2
3
4
5
<com.google.android.material.tabs.TabItem
     android:layout_width="wrap_content"
     android:layout_height="wrap_content"
     android:icon="@android:drawable/ic_menu_add"
     android:text="添加"/>

android:icon 设置图标;

Android:text 设置文本;

2. 通过代码添加。使用 TabLayoutMediator()

1
2
3
4
5
6
7
8
new TabLayoutMediator(binding.tab, binding.viewPager, new TabLayoutMediator.TabConfigurationStrategy() {
    @Override
    public void onConfigureTab(@NonNull TabLayout.Tab tab, int position) {
        //TODO 设置卡片的文本/图标
        tab.setText(mTitles.get(position))
           .setIcon(mIcons.get(position));
    }
}).attach();

其中 mTitles 和 mIcons 是存放 text 和 Icon 的list。效果如下:

可以看到 text 在英文状态下默认都是大写,这是因为在 TabLayout 的源码中默认设置属性 textAllCaps=true。所以可以在 TabLayout 中设置如下属性来改成小写。

app:tabTextAppearance="@android:style/TextAppearance.Widget.TabWidget"

演示效果的xml

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity">
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_margin="8dp">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="添加"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_delete"
            android:text="删除"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="相机"/>
    </com.google.android.material.tabs.TabLayout>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs1"
        style="@style/Widget.MaterialComponents.TabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabMode="scrollable"
        android:layout_margin="8dp">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="添加"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_delete"
            android:text="删除"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="相机"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="添加"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_delete"
            android:text="删除"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="相机"/>
    </com.google.android.material.tabs.TabLayout>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs2"
        style="@style/Widget.MaterialComponents.TabLayout.Colored"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="@color/purple_700"
        android:layout_margin="8dp">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="添加"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_delete"
            android:text="删除"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="相机"/>
    </com.google.android.material.tabs.TabLayout>
    <com.google.android.material.tabs.TabLayout
        android:layout_margin="8dp"
        android:id="@+id/tabs3"
        style="@style/Widget.Design.TabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="添加" />
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_call"
            android:text="删除" />
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="菜单" />
    </com.google.android.material.tabs.TabLayout>
    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabs4"
        app:tabTextAppearance="@android:style/TextAppearance.Holo.Large"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorHeight="0dp"
        android:layout_margin="8dp">
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_add"
            android:text="add"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_delete"
            android:text="删除"/>
        <com.google.android.material.tabs.TabItem
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:icon="@android:drawable/ic_menu_camera"
            android:text="相机"/>
    </com.google.android.material.tabs.TabLayout>
</LinearLayout>

到此这篇关于Android TabLayout选项卡使用教程的文章就介绍到这了,更多相关Android TabLayout内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

蓄力AI

微信公众号搜索 “ 脚本之家 ” ,选择关注

程序猿的那些事、送书等活动等着你

原文链接:https://blog.csdn.net/qq_44950283/article/details/128656967

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!

相关文章

  • Android Flutter绘制有趣的 loading加载动画

    Android Flutter绘制有趣的 loading加载动画

    在网络速度较慢的场景,一个有趣的加载会提高用户的耐心和对 App 的好感。本篇我们利用Flutter 的 PathMetric来玩几个有趣的 loading 效果,感兴趣的可以动手尝试一下
    2022-07-07
  • Android Xutils3网络请求的封装详解及实例代码

    Android Xutils3网络请求的封装详解及实例代码

    这篇文章主要介绍了Android Xutils3网络请求的封装详解及实例代码的相关资料,需要的朋友可以参考下
    2016-12-12
  • Android中一个应用实现多个图标的几种方式

    Android中一个应用实现多个图标的几种方式

    这篇文章主要给大家介绍了在Android中一个应用如何实现多个图标的几种方式,其中包括了多Activity + intent-filter方式、activity-alias方式以及网页标签-添加快捷方式,分别给出了详细的示例代码,需要的朋友可以参考借鉴。
    2017-05-05
  • Android startActivityForResult的调用与封装详解

    Android startActivityForResult的调用与封装详解

    startActivityForResult 可以说是我们常用的一种操作了,目前有哪些方式实现 startActivityForResult 的功能呢?本文就来和大家详细聊聊
    2023-03-03
  • 实例解析Android系统中的ContentProvider组件用法

    实例解析Android系统中的ContentProvider组件用法

    这篇文章主要介绍了Android系统中的ContentProvider组件用法,举例讲解了ContentProvider传递数据及监听ContentProvider数据改变的方法,十分详细,需要的朋友可以参考下
    2016-04-04
  • android编程实现图片库的封装方法

    android编程实现图片库的封装方法

    这篇文章主要介绍了android编程实现图片库的封装方法,涉及Android针对图片的下载、保存、获取及操作缓存图片等相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11
  • Kotlin 挂起函数CPS转换原理解析

    Kotlin 挂起函数CPS转换原理解析

    这篇文章主要为大家介绍了Kotlin 挂起函数CPS转换原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-12-12
  • Android拆轮子系列之写验证码控件的方法

    Android拆轮子系列之写验证码控件的方法

    这篇文章主要介绍了Android拆轮子系列之写验证码控件的方法的, 涉及到Canvas和pint的使用和View的基本用法等相关知识点,本文给大家介绍的非常详细,感兴趣的朋友一起看看吧
    2016-10-10
  • eclipse导入appcompat项目报错解决办法

    eclipse导入appcompat项目报错解决办法

    这篇文章主要介绍了eclipse导入appcompat项目报错解决办法的相关资料,需要的朋友可以参考下
    2017-04-04
  • Android实现全屏截图或长截屏功能

    Android实现全屏截图或长截屏功能

    这篇文章主要为大家详细介绍了Android实现全屏截图或长截屏功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-05-05

最新评论