TabLayout继承自HorizontalScrollView,它提供了一个水平方向的布局来显示tabs(标签)
还是先来看看官方API吧
每一个标签都是一个TabLayout.Tab的实例对象,你可以通过newTab()方法来创建tabs,你可以通过setText(int)方法来修改tab标签的名称,通过setIcon(int)方法来修改tab标签的图标。要想显示tab,你需要通过addTab(Tab)方法将tab添加到layout里面,例如:
TabLayout tabLayout = ....;
tabLayout.addTab(tabLayout.newTab.setText("A"));
tabLayout.addTab(tabLayout.newtab.setText("B"));
tabLayout.addTab(tabLayout.newtab.setText("C"));
你需要通过setOnTabSelectedListener(OnTabSelectedListener)方法给TabLayout设置一个监听事件,以方便当tab的选中状态发生改变的时候能做一些你想要做的事情。如果你将TabLayout和ViewPager结合起来使用,你可以通过setTabsFromPagerAdapter(PagerAdapter)将让TabLayout的tab标签显示PagerAdapter里面所给出的标题。你同样需要通过TabLayout.TabLayoutOnPageChangeListener转发滑动和tab标签选中状态的改变给TabLayout,就如下面这样
ViewPager viewPager = ...;
TabLayout tabLayout = ...;
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
TabLayout.OnTabSelectedListener,当TabLayout的tabs标签的选中状态发生改变的时候回调的接口,里面有三个方法,如下
//当某一个tab已经是选中状态时,又被用户选中时回调
onTabReselected(TabLayout.Tab tab);
//当某一个tab进入选中状态的时候回调
onTabSelected(TabLayout.Tab tab);
//当某一个tab从选中状态变成未选中状态的时候回调
onTabUnSelected(TabLayout.tab);
TabLayout.Tab,一个Tab的实例就是TabLayout里面的一个tab标签,可以通过newTab()方法来创建Tab的实例对象,常用的方法有
//设置Tab上面显示的文本
setText(int resId);
setText(CharSequence text);
//设置tab上面显示的图标
setIcon(int resId);
setIcon(Drawable drawable);
//设置tab上显示的布局
setCustomView(int layoutId);
setCustomView(View view);
//判断是否是选中状态
isSelected();
//选中某个tab
select();
//获取当前tab在ActionBar里面的索引
getPosition();
//设置一个tag
setTag(Object);
TabLayout.TabLayoutOnPageChangeListener
它是一个ViewPager.OnPageChangeListener,提供给TabLayout必要的回调来保证tab的position和ViewPager的切换是同步变化的
TabLayout.ViewPagerOnTabSelectedListener
它是一个TabLayout.OnTabSelectedListener,提供给ViewPager必要的回调来保证tab的position和ViewPager的切换时同步变化的
注意了,当你的ViewPager和TabLayout结合使用的时候,必须要给他们两个分别设置这两个监听事件,如果只给一个设置监听事件,那么必然会出现有一个切换 的时候另外一个不同步切换的问题,设置方法如下。
TabLayout tabLayout = ...;
ViewPager viewPager = ...;
//给TabLayout设置监听事件
tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPgaer));
//给ViewPager设置监听事件
viewPapger.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));
TabLayout一些方法
//给TabLayout添加Tab标签
addTab(TabLayout.Tab tab,boolean setSelected);
addTab(TabLayout.Tab tab,int position);
addTab(TabLayout.Tab tab, int position, boolean setSelected);
addTab(TabLayout.Tab tab);
//获取到TabLayout选中的Tab的位置
getSelectedTabPosition();
//获取到指定位置的Tab标签
getTabAt(int index);
//获取TabLayout上有多少个Tab标签
getTabCount();
//TabLayout的模式,有两种取值,一个是MODE_FIXED,一个是MODE_SCROLLABLE,前者表示将所有的标签都显示出来,后者表示,标签只显示出部分,其他的标签可以通过滑动显示出来
getTabMode();
setTabMode(int mode);
//创建一个Tab对象
newTab();
//移除标签
removeAllTabs();
removeTabAt(int position);
removeTab(TabLayout.Tab tab);
//设置选中Tab的颜色指示器
setSelectedTabIndicatorColor(int color);
//设置Tab在不同状态下的text颜色
setTabTextColors(ColorStateList textColor);
setTabTextColors(int normalColor,int selectedColor);
//从给定的PagerAdapter生成tab标签
setTabsFromPagerAdapter(PagerAdapter adapter);
//将TabLayout和ViewPager关联,测试了下,这个方法可以直接关联ViewPager和TabLayout,但是得通过setTabsFromPagerAdapter(PagerAdapter)方法设置Tabs
setupWithViewPager(ViewPager viewPager)
常用的XML属性
<!--设置选中时的tab字体颜色-->
app:tabSelectedTextColor=""
<!--设置未选中时的tab字体颜色-->
app:tabTextColor=""
<!--设置tab指示器的颜色-->
app:tabIndicatorColor=""
该说的都说完了,下面来看看一个简单的Demo,到目前为止,我们学习了三个控件了
XML代码如下所示
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout 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"
tools:context="com.destiny.tablayout.MainActivity">
<android.support.design.widget.AppBarLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:layout_width="match_parent"
android:layout_height="80dp"
android:background="#ffff00"
android:gravity="center"
android:text="我依旧是头部的可以滑动出屏幕的控件"
app:layout_scrollFlags="scroll|enterAlwaysCollapsed" />
<android.support.design.widget.TabLayout
android:id="@+id/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</android.support.design.widget.AppBarLayout>
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
app:layout_behavior="@string/appbar_scrolling_view_behavior" />
</android.support.design.widget.CoordinatorLayout>
Activity的代码如下所示
import android.graphics.Color;
import android.os.Bundle;
import android.support.design.widget.TabLayout;
import android.support.v4.app.Fragment;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import com.destiny.tablayout.adapter.MyPagerAdapter;
import com.destiny.tablayout.fragment.AFragment;
import com.destiny.tablayout.fragment.BFragment;
import com.destiny.tablayout.fragment.CFragment;
import com.destiny.tablayout.fragment.DFragment;
import java.util.ArrayList;
import java.util.List;
public class MainActivity extends AppCompatActivity {
private TabLayout tabLayout;
private ViewPager viewPager;
private List<Fragment> fragments;
private MyPagerAdapter adapter;
private String[] tabs = {"A", "B", "C", "D", "E", "F", "G"};
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
tabLayout = (TabLayout) findViewById(R.id.tablayout);
viewPager = (ViewPager) findViewById(R.id.viewpager);
initData();
}
private void initData() {
for (int i = 0; i < tabs.length; i++) {
tabLayout.addTab(tabLayout.newTab().setText(tabs[i]).setIcon(R.mipmap.ic_launcher));
}
tabLayout.setTabMode(TabLayout.MODE_SCROLLABLE);//设置TabLayout的模式
tabLayout.setSelectedTabIndicatorColor(Color.parseColor("#ff0000"));//设置选中的Tab下面的指示器颜色
fragments = new ArrayList<>();
fragments.add(AFragment.newInstance());
fragments.add(BFragment.newInstance());
fragments.add(CFragment.newInstance());
fragments.add(DFragment.newInstance());
adapter = new MyPagerAdapter(getSupportFragmentManager(), fragments);
viewPager.setAdapter(adapter);
viewPager.addOnPageChangeListener(new TabLayout.TabLayoutOnPageChangeListener(tabLayout));//设置联动
tabLayout.setOnTabSelectedListener(new TabLayout.ViewPagerOnTabSelectedListener(viewPager));//设置联动
}
}
Fragment里面就只有一个RecyclerView控件,我就不贴出来了。谢谢~