TabLayout中使用selector

最近项目中使用到tabLayout，但是一般使用的都是纯文字，或者纯图片，再或者就是图片加文字，但是图片颜色不会变，满足不了需求，然后看网上很多说自己自定义一个view来实现，然后也就尝试写了一下，轻松搞定，废话不多说，上代码。

1，先看一下效果图

2，首先是页面布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.example.cui.tablayouttest.MainActivity">

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

    <android.support.design.widget.TabLayout
        android:id="@+id/tab_layout"
        android:layout_width="match_parent"
        style="@style/MyCustomTabLayout"
        android:layout_alignParentBottom="true"
        android:layout_height="wrap_content"/>
</RelativeLayout>

3，写图片选择器

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:drawable="@drawable/ic_work_info_checked" android:state_selected="true"/>
    <item android:drawable="@drawable/ic_work_info"/>

</selector>

4，写tabItem的自定义view

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center">

    <ImageView
        android:id="@+id/selector_item_imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/user_name"/>
    <TextView
        android:id="@+id/selector_item_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="text"/>
</LinearLayout>

5，写适配器，重点重写getTabView方法，加载上面tebItem布局

 class MyAdapter extends FragmentPagerAdapter {
        private final List<Fragment> mFragments = new ArrayList<>();
        final int PAGE_COUNT = 3;
        private String tabTitles[] = new String[]{"tab1", "tab2", "tab3"};
        private int[] imageResId = {R.drawable.person_selector,
                R.drawable.company_selector,
                R.drawable.cost_selector};

        public MyAdapter(FragmentManager fm) {
            super(fm);
            mFragments.add(new PersonalFragment());
            mFragments.add(new WorkFragment());
            mFragments.add(new MonthFragment());
        }

        @Override
        public Fragment getItem(int position) {
            return mFragments.get(position);
        }

        @Override
        public int getCount() {
            return PAGE_COUNT;
        }

        @Override
        public CharSequence getPageTitle(int position)  {
            return null;
        }
        public View getTabView(int position){
            View view = LayoutInflater.from(MainActivity.this).inflate(R.layout.simple, null);
            TextView tv= (TextView) view.findViewById(R.id.selector_item_textView);
            tv.setText(tabTitles[position]);
            ImageView img = (ImageView) view.findViewById(R.id.selector_item_imageView);
            img.setImageResource(imageResId[position]);
            return view;
        }
    }

6，适配器的使用

private ViewPager viewPager;
private TabLayout tabLayout;

@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);
    viewPager= (ViewPager) findViewById(R.id.view_pager);
    tabLayout= (TabLayout) findViewById(R.id.tab_layout);

    MyAdapter adapter=new MyAdapter(getSupportFragmentManager());
    viewPager.setAdapter(adapter);
    tabLayout.setupWithViewPager(viewPager);
    for (int i = 0; i < tabLayout.getTabCount(); i++) {
        TabLayout.Tab tab = tabLayout.getTabAt(i);
        tab.setCustomView(adapter.getTabView(i));
    }
}

注意：里边有个坑，加入图片后不显示，这个是因为 TabLayout创建的tab默认设置textAllCaps属性为true，这阻止了ImageSpan被渲染出来，可以通过下面的样式文件定义来改变：

<style name="MyCustomTabLayout" parent="Widget.Design.TabLayout">
    <item name="tabTextAppearance">@style/MyCustomTextAppearance</item>
</style>

<style name="MyCustomTextAppearance" parent="TextAppearance.Design.Tab">
    <item name="textAllCaps">false</item>
</style>