Android TabLayout 使用

最新推荐文章于 2025-06-11 16:35:14 发布

Android_小菜菜

最新推荐文章于 2025-06-11 16:35:14 发布

阅读量805

点赞数

CC 4.0 BY-SA版权

分类专栏： Android 文章标签：布局 Design TabLayout

本文链接：https://blog.youkuaiyun.com/xiaolaohuqwer/article/details/79017139

Android 专栏收录该内容

35 篇文章

订阅专栏

本文介绍如何使用TabLayout和ViewPager组件实现固定的标签导航栏，并通过示例代码展示如何设置TabLayout的各种属性，如颜色、模式等，同时展示了如何将TabLayout与ViewPager结合使用来实现动态切换内容。

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

依赖 
compile 'com.android.support:design:25.3.1'

TabLayout属性

app:tabMode="fixed"         固定
app:tabMode="scrollable"    可滑动
app:tabIndicatorColor       滚动下划线的颜色  
app:tabSelectedTextColor    tab选中后文字的颜色  
app:tabTextColor            tab默认显示的文字颜色  
app:tabMaxWidth             tab最大宽度
app:tabMinWidth             tab最小宽度

设置tabMode为 scrollable

<android.support.design.widget.TabLayout
     android:layout_width="match_parent"
     android:layout_height="48dp"
     app:tabMode="scrollable"
     app:tabIndicatorColor="#ff00ff"
     app:tabTextColor="#000000"
     app:tabSelectedTextColor="#ff0000"
     >

添加tab标题

TabLayout mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
mTabLayout.addTab(mTabLayout.newTab().setText("tab_1"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_2"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_3"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_4"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_5"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_6"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_7"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_8"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_9"));
mTabLayout.addTab(mTabLayout.newTab().setText("tab_10"));

运行后效果如下:

修改tabMode为 fixed重新运行

app:tabMode="fixed"

发现页面无法滑动。

通常TabLayout和ViewPager配合在一起使用，先看图：

布局代码：

<?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"
  >
    <android.support.design.widget.TabLayout
        android:id="@+id/tabLayout"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        app:tabMode="fixed"
        app:tabIndicatorColor="#ff00ff"
        app:tabTextColor="#000000"
        app:tabSelectedTextColor="#ff0000"
        >

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


    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

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

</LinearLayout>

创建layout_home，layout_address，layout_discover，layout_me布局
布局都一样，只有一个TextView，分别为首页，通讯录，发现，我。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">
    <TextView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:gravity="center"
        android:text="首页"
        />
</LinearLayout>

Activity 中代码

public class TabLayoutActivity extends AppCompatActivity {

    private TabLayout mTabLayout;
    private ViewPager mViewPager;
    private List<View> mViewList;
    private List<String> mTitleList;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_tab_layout);

        mTabLayout = (TabLayout) findViewById(R.id.tabLayout);
        View home = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_home, null);
        View address = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_address, null);
        View discover = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_discover, null);
        View me = LayoutInflater.from(getApplicationContext()).inflate(R.layout.layout_me, null);

        mViewList = new ArrayList<>();
        mViewList.add(home);
        mViewList.add(address);
        mViewList.add(discover);
        mViewList.add(me);

        mTitleList = new ArrayList<>();
        mTitleList.add("首页");
        mTitleList.add("通讯录");
        mTitleList.add("发现");
        mTitleList.add("我");

        mViewPager = (ViewPager) findViewById(R.id.view_pager);
        mViewPager.setAdapter(new PagerAdapter() {
            @Override
            public int getCount() {
                return mViewList.size();
            }

            @Override
            public boolean isViewFromObject(View view, Object object) {
                return view == object;
            }

            @Override
            public void destroyItem(ViewGroup container, int position, Object object) {
                container.removeView(mViewList.get(position));
            }

            @Override
            public Object instantiateItem(ViewGroup container, int position) {
                container.addView(mViewList.get(position));
                return mViewList.get(position);
            }

            @Override
            public CharSequence getPageTitle(int position) {
                return mTitleList.get(position);
            }
        });

        mTabLayout.setupWithViewPager(mViewPager);

        //TabLayout监听
        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                //切换tab时不使用ViewPager动画效果
                mViewPager.setCurrentItem(tab.getPosition(),false);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {

            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {

            }
        });
    }
}

运行即可实现图中的效果。