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来联动滑动。
  
  

 
 
 
 

  
  

 
 
 
 

  
  以下为整个源代码以及讲解。
 
 
 
 

  
      我们先来写布局界面
 
 
 
 

  
      
  
  
 
 
<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));
          }
      }
  }

  如果想要了解更多属性可以去看一下谷歌的官方文档
• http://developer.android.com/intl/zh-cn/reference/android/support/design/widget/TabLayout.html