Android中TabLayout使用详解

时间：2022-12-21 12:32:59

一、     什么是TabLayout

      我们在应用viewpager的时候，经常会使用TabPageIndicator来与其配合或者自定义RadioButton来达到很漂亮的效果。但是TabPageIndicator是第三方的和RaidoButton实现起来比较繁琐。在2015年的google大会上，google发布了新的Android Support Design库，里面包含了几个新的控件，其中就有一个TabLayout，它就可以完成TabPageIndicator的效果，而且还是官方的，最好的是它可以兼容到2.2以上版本，包括2.2。

二、使用TabLayout


1、         在gradle中添加依赖

compile 'com.android.support:design:23.1.1'

2、         在布局文件中添加TabLayout

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical">

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_FindFragment_title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#f00"
        app:tabIndicatorColor="#fff"
        app:tabSelectedTextColor="#00f"

app:tabMode="scrollable"
        app:tabTextColor="#fff"/>

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

其中：

app:tabIndicatorColor="#fff"  //下方滚动的下划线颜色
app:tabIndicatorHeight="10dp"  //滚动的下划线的宽度

app:tabSelectedTextColor="#00f" // tab被选中后，文字的颜色  
app:tabTextColor="#fff"  // tab默认的文字颜色 
app:tabMode="scrollable"  // Tab可滚动  默认不可以滚动
 

3、         给ViewPager设置与之关联的TabLayout

//给ViewPager添加OnPageChangeListener。TabLayout.TabLayoutOnPageChangeListener(tabLayout)
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));

4、         给TabLayout设置相关内容

//设置Tab的内容来自PagerAdapter
tabLayout.setTabsFromPagerAdapter(adapter);
//设置OnTabSelectedListener监听器来实现TabLayout和ViewPager的联动
tabLayout.setOnTabSelectedListener(new TabLayout.OnTabSelectedListener(){
@Override
    public void onTabSelected(TabLayout.Tab tab){
viewPager.setCurrentItem(tab.getPosition());
    }

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

    }

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

    }
});

 

三、     TabLayout官方进一步封装

上面的使用相对比较繁琐，google官方对TabLayout做了进一步封装。

tabLayout.setupWithViewPager(viewPager);

对上面的步骤进行了封装，省去了ViewPager和TabLayout之间的联动手动设置。

一步搞定。

注意：上面这行代码必须在ViewPager的Adapter设置完之后调用，否则会抛异常。

 

 

 

标签：

相关文章