TabLayout的使用分享

一、概述

相信大家实际开发中会经常碰到需要实现类似于网易新闻Tab标签效果的界面，为了加快开发效率，以前会经常使用到JakeWharton大神的开源框架Viewpager Indicator，框架好是好，但是毕竟比较旧了。其实Google官方也提供了一个TabLayout控件来实现类似的效果。

TabLayout是Google提供的design包中的一个控件，其实现的效果类似于Viewpager Indicator中TabPageIndicator的效果，但是也提供了更多的功能。与TabpagerIndicator相比，TabLayout的优势：

• 使用更加方便
• 可以方便的自定义Tab上显示的View
• 提供了对Tab点击事件的监听方式（单次点击监听，重复点击监听）
• Tab的指示器带一个动画效果

使用之前我们需要添加design包：

Android Studio中在Gradle中添加：compile 'com.android.support:design:23.1.0'
Eclipse则需要手动添加SDK下\extras\android\support\design\libs中的Jar包

二、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_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabIndicatorColor="#00eeff"
        app:tabSelectedTextColor="#00eeff"
        app:tabTextColor="#000000" />

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

我们可以看到TabLayout中使用了三个属性

   tabIndicatorColor            指示器（下划线）的颜色

   tabTextColor                    Tab文字颜色

   tabSelectedTextColor      Tab被选中时文字的颜色

然后给ViewPager写一个简单的适配器

public class TabPageAdapter extends PagerAdapter {

    private List<ImageView> imageViews;
    private String[] titles;

    public TabPageAdapter(List<ImageView> imageViews, String[] titles) {
        this.imageViews = imageViews;
        this.titles = titles;
    }

    @Override
    public int getCount() {
        return imageViews.size();
    }

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

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

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

    @Override
    public CharSequence getPageTitle(int position) {
        return titles[position];
    }
}

然后在MainActivity中写一下几行代码就可以实现效果

        //创建适配器
        TabPageAdapter adapter = new TabPageAdapter(imageViewList, titles);
        viewPager.setAdapter(adapter);
        //把ViewPager和TabLayout关联
        tabLayout.setupWithViewPager(viewPager);

setupWithViewPager()这个方法会在内部帮我们创建Tab添加到TabLayout，当然我们也可以手动自己添加

        for (int i = 0; i < 5; i++) {
            TabLayout.Tab tab = tabLayout.newTab();
            //为Tab设置文字
            tab.setText(titles[i]);
            //为Tab设置图标
            tab.setIcon(R.mipmap.ic_launcher);
            //为tab设置自定义显示布局
            //tab.setCustomView(customView);
            tabLayout.addTab(tab);
        }
        //创建适配器
        TabPageAdapter adapter = new TabPageAdapter(imageViewList, titles);
        viewPager.setAdapter(adapter);
        //设置Tab显示填满布局
        tabLayout.setTabGravity(TabLayout.GRAVITY_FILL);
        //设置Tab滚动模式为默认
        tabLayout.setTabMode(TabLayout.MODE_FIXED);
        //设置指示器高度
        tabLayout.setSelectedTabIndicatorHeight(10);

但这个时候我们就不能使用setupWithViewPager()来使TabLayout和ViewPager关联了，我们必须分别为ViewPager和TabLayout设置监听来实现关联

        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) {
<span style="white-space:pre">		</span>//当tab被重复选择时回调的方法
            }
        });
        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
                //如果想要指示器随着ViewPager一起滑动就使用此方法
                //第三个参数设置为true，表示滑动后更新tab的选择状态
                //就不需要在onPageSelected中写代码了
                tabLayout.setScrollPosition(position, positionOffset, true);
            }

            @Override
            public void onPageSelected(int position) {
//                tabLayout.getTabAt(position).select();
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

那为什么自己添加tab后不能用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));
            }
        }
    }

    public void setTabsFromPagerAdapter(@NonNull PagerAdapter adapter) {
        removeAllTabs();
        for (int i = 0, count = adapter.getCount(); i < count; i++) {
            addTab(newTab().setText(adapter.getPageTitle(i)));
        }
    }

这样原因就很明显了setupWithViewPager()中会调用setTabsFromPageAdapter()方法，而这个方法中会清空TabLayout中已经添加的Tab，然后再根据传入的适配器确定Tab的个数重新添加Tab和根据adapter中getPageTitle()设置Tab的标签。所以如果你为Tab设置的自定义View无法显示时，很有可能就是你在设置自定义View后误用了setupWithViewPager()或setTabsFromPageAdapter()方法。