TabLayout的简单运用和若干问题的解决

最新推荐文章于 2025-07-08 15:34:57 发布

Lindroy

最新推荐文章于 2025-07-08 15:34:57 发布

阅读量3.2k

点赞数 3

CC 4.0 BY-SA版权

分类专栏： Android学习 UI控件文章标签： android UI控件

本文链接：https://blog.youkuaiyun.com/Lindroid20/article/details/70185954

本文介绍了如何在Android中使用TabLayout实现导航标签，包括初步实现、修改字体大小、添加分割线、显示信息数目以及自定义标签布局。通过TabLayout与ViewPager结合，实现页面切换，并详细讲解了TabLayout的各个属性和使用方法，帮助开发者掌握更高级的定制技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、介绍和准备

我们在使用手机App时不难会看到这样的页面上面是一组起导航作用的标签，点击标签就会切换到相应的页面；在不同的页面中滑动时，标签的样式（文字大小或者颜色）也会发生变化。这样你任何时候都能一眼看出自己停留在哪个页面。这个布局出镜率实在太高了，我甚至敢说每个学Android的人都写过这样的布局（下面就是知乎中的页面）。

好了，废话少说，我们照例先来分析一下这个布局的组成。标签下面的页面比较容易想到：整体是一个左右滑动的ViewPager，每一页则可以用Fragment填充，也就是ViewPager+Fragment。但上面的标签部分就有点头大了，之前我们都是使用第三方的项目（如PagerSlidingTabStrip），高手的话也可以自定义一个控件。但是这样并非长久之计，所以谷歌后来人性化地推出了自家的标签控件TabLayout（注意可不要跟TableLayout搞混了，后者是Android的基本布局之一，而前者是一个控件）。TabLayout顾名思义就是包含Tab的布局，它包含在Design support library库中，要使用它，你需要在先添加依赖库：
这里写图片描述

我导入的是最新的26.0.0版本：

compile 'com.android.support:design:26.0.0-alpha1'

准备完这些，我们可以开始写代码了。

2、初步实现

之前在知乎上看到有人对微信的设计改动：将使用频率高的朋友圈、消息提醒和公众号这三个功能独立出来放在首页。我很赞同这样的设计思路，所以今天就来弄一个简陋版的吧。大体效果如下：
这里写图片描述

2.1 页面布局

<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:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.lindroid.tablayoutdemo.MainActivity">

    <android.support.design.widget.TabLayout
        android:id="@+id/tayLayout"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        app:tabIndicatorColor="#49dd12"
        app:tabSelectedTextColor="#49dd12"
        app:tabTextColor="@android:color/darker_gray"/>

    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1">

    </android.support.v4.view.ViewPager>
</LinearLayout>

上面的TabLayout的高度固定为60dp，然后让ViewPager占据剩余的空间即可。现在我来介绍一下用到的TabLayout的属性：

app:tabIndicatorColor：标签下面移动的横线的颜色。
app:tabTextColor：标签文字的颜色
app:tabSelectedTextColor ：标签被选中后的文字颜色

TabLayout还有很多其他的属性，比如你要是不想要下面的移动横线的话，可以调用属性app:tabIndicatorHeight ，将高度设置为0dp即可。关于TabLayout的其他属性，大家可以看看这篇博客，动手练习一下：http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2015/0731/3247.html