原文地址为：
Android Tablayout使用示例及详解
转载请注明本文地址： Android Tablayout使用示例及详解
Tablayout是安卓新特性中的组件，之前很多地方都会用到这样的组件，只是我们一般都是通过tabactivity加fragment或者其他第三方框架来实现，谷歌推出tablayout以后，使这个组件简化了许多，只需要一个tablayout加一个viewpager就可以实现想要的效果。今天就讲一下tablayout如何配合viewpager一起使用。
我们要想使用安卓的新组建，如果你使用的是android studio进行开发的只要在build.gradle中加入compile 'com.android.support:design:22.2.0'即可。(此处注意如果你同时导入com.android.support:*****-v7:21+就会有冲突，无法使用tablayout，笔者就在使用的过程中遇到，添加了依赖包以后一直提示找不到tablayout)。如果是eclipse的话导入对应的库就可以。这个就不多废话了，开始原文吧。
开始之前我们先来看一下google官方文档的原文，如何与ViewPager进行联动：
意思就是You should set a listener via setOnTabSelectedListener(OnTabSelectedListener) to be notified when any tab’s selection state has been changed.
If you’re using a ViewPager together with this layout, you can use setTabsFromPagerAdapter(PagerAdapter) which will populate the tabs using the given PagerAdapter’s page titles. You should also use a TabLayout.TabLayoutOnPageChangeListener to forward the scroll and selection changes to this layout
通过setOnTabSelectedListener设置一个监听器来响应选项卡的选择状态
可以通过setTabsFromPagerAdapter来使用PagerAdapter的page title
使用TabLayout.TabLayoutOnPageChangeListener来联动滑动。
可以通过setTabsFromPagerAdapter来使用PagerAdapter的page title
使用TabLayout.TabLayoutOnPageChangeListener来联动滑动。
以下为整个源代码以及讲解。
我们先来写布局界面
<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/tablayout"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/titleBlue"
app:tabIndicatorColor="@color/white"
app:tabSelectedTextColor="@color/gray"
app:tabTextColor="@color/white"
/>
<android.support.v4.view.ViewPager
android:id="@+id/vviewpager"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1"
/>
</LinearLayout>
布局界面很简单，一个容器中放一个tablayout，放一个viewpager，tablayout有很多属性，这里就不一一介绍了。下面列出他的是哪个很重要的属性。
app:tabIndicatorColor="@color/white" // （指示器下表的颜色）下方滚动的下划线颜色 app:tabSelectedTextColor="@color/gray" // tab被选中后，文字的颜色 app:tabTextColor="@color/white" // tab默认的文字颜色（即未被选中的颜色）//如果用到app:的属性，需要在跟布局中加入xmlns:app="http://schemas.android.com/apk/res-auto"下面是类的代码。
/**
* Created by rain on 2015-12-09.
*/
public class HomeFragment extends Fragment {
private TabLayout tabLayout;
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
View view = inflater.inflate(R.layout.fragment_home, container, false);
ViewPager viewPager = (ViewPager) view.findViewById(R.id.viewpager);
if (viewPager != null) {
setupViewPager(viewPager);
}
setupTabLayout();
return super.onCreateView(inflater, container, savedInstanceState);
}
//设置tablayout，
private void setupTabLayout() {
tabLayout = (TabLayout) view.findViewById(R.id.tabs);
tabLayout.setupWithViewPager(viewPager);
//一下几个重要属性都可以自己选择性进行设置。
//tabLayout.setSelectedTabIndicatorColor();
//tabLayout.setSelectedTabIndicatorHeight();
//tabLayout.setOnTabSelectedListener();
//tabLayout.setTabGravity();
//tabLayout.setTabTextColors(int normalColor,int selectColor);
//将tablayout与viewpager进行绑定，下面会有讲解。
tabLayout.setupWithViewPager(viewPager);
}
//设置viewpager
private void setupViewPager(ViewPager viewPager) {
Adapter adapter = new Adapter(getActivity().getSupportFragmentManager());
adapter.addFragment(new CheeseListFragment(), "Category 1");
adapter.addFragment(new CheeseListFragment(), "Category 2");
adapter.addFragment(new CheeseListFragment(), "Category 3");
viewPager.setAdapter(adapter);
}
//设置viewpager的adapter
static class Adapter extends FragmentPagerAdapter {
private final List<Fragment> mFragments = new ArrayList<>();
private final List<String> mFragmentTitles = new ArrayList<>();
public Adapter(FragmentManager fm) {
super(fm);
}
public void addFragment(Fragment fragment, String title) {
mFragments.add(fragment);
mFragmentTitles.add(title);
}
@Override
public Fragment getItem(int position) {
return mFragments.get(position);
}
@Override
public int getCount() {
return mFragments.size();
}
@Override
public CharSequence getPageTitle(int position) {
return mFragmentTitles.get(position);
}
}
}相信这个代码很好理解，我这里是用fragment做的框架，大家改成activity也是一样的。我们先在布局文件里定义好tablayout和viewpager，在代码中实例化，先设置viewpaer的adapter，然后设置tablayout的属性。最后将tablayout与viewpager进行绑定就完成了。
我看到有人在使用tablayout的时候还在mTabLayout.setOnTabSelectedListener来设置viewpager，我想说这样就没有必要用tablayout。他已经在setupWithViewPager里面讲这些代码封装好了。大家只要使用就可以了；以下setupWithViewPager的源码，相信大家看了就会明白。
public void setupWithViewPager(@NonNull ViewPager viewPager) {
final PagerAdapter adapter = viewPager.getAdapter();
if (adapter == null) {
throw new IllegalArgumentException("ViewPager does not have a PagerAdapter set");
}
// First we'll add Tabs, using the adapter's page titles
setTabsFromPagerAdapter(adapter);
// Now we'll add our page change listener to the ViewPager
viewPager.addOnPageChangeListener(new TabLayoutOnPageChangeListener(this));
// Now we'll add a tab selected listener to set ViewPager's current item
setOnTabSelectedListener(new ViewPagerOnTabSelectedListener(viewPager));
// Make sure we reflect the currently set ViewPager item
if (adapter.getCount() > 0) {
final int curItem = viewPager.getCurrentItem();
if (getSelectedTabPosition() != curItem) {
selectTab(getTabAt(curItem));
}
}
}转载请注明本文地址： Android Tablayout使用示例及详解