Android 底部导航栏 (底部 Tab) 最佳实践

最新推荐文章于 2025-06-29 09:59:57 发布

iam王有才

最新推荐文章于 2025-06-29 09:59:57 发布

阅读量1.7k

点赞数 4

CC 4.0 BY-SA版权

分类专栏： Tab 导航

本文链接：https://blog.youkuaiyun.com/qq_35549248/article/details/76627430

本文介绍了如何在Android中实现底部导航栏的最佳实践，通过使用TabLayout并去掉默认Indicator。文章指出，虽然TabLayout提供了基本的配置选项，但无法调整图标大小和间距。为了解决这个问题，作者建议使用TabLayout的setCustomView方法来创建自定义布局，以实现所需的设计效果。文章最后提供了实现此功能的代码示例和注意事项。

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

效果
这里写图片描述

Android 底部导航栏 (底部 Tab) 最佳实践

要实现这样一个底部导航栏，大家最容易想到的当然就是TabLayout，Tab 切换嘛，TabLayout 就是专门干这个事的，不过TabLayout 默认是带有Indicator的，我们是不需要的，因此需要把它去掉，看一下布局文件：

<?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"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/home_container"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
    </FrameLayout>

    <View android:layout_width="match_parent"
          android:layout_height="0.5dp"
          android:alpha="0.6"
          android:background="@android:color/darker_gray"
        />
    <android.support.design.widget.TabLayout
        android:id="@+id/bottom_tab_layout"
        android:layout_width="match_parent"
        app:tabIndicatorHeight="0dp"
        app:tabSelectedTextColor="@android:color/black"
        app:tabTextColor="@android:color/darker_gray"
        android:layout_height="50dp">

    </android.support.design.widget.TabLayout>

</LinearLayout>

整个布局分为三个部分，最上面是一个Framelayout 用做装Fragment 的容器，接着有一根分割线，最下面就是我们的TabLayout，去掉默认的Indicator直接设置app:tabIndicatorHeight属性的值为0就行了。

布局文件写好之后，接下来看一下Activity的代码：

public class BottomTabLayoutActivity extends AppCompatActivity {

最低0.47元/天解锁文章

200万优质内容无限畅学