TabLayout + ViewPager 定制导航条(2)

现在，我们来实现一个带图片和文字的导航栏，基础工程参考
TabLayout + ViewPager 定制导航条(1)

后面的代码将在它的基础上修改。

首先，我们把activity_main.xml中TabLayout和ViewPager调换一下位置，将导航条放到底部

...
<android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:background="@android:color/white"/>

    <android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabSelectedTextColor="@color/colorTabSelected"
        app:tabTextColor="@color/colorTabNormal"/>
...

这里，我们给TabLayout添加了两个属性

app:tabSelectedTextColor="@color/colorTabSelected"
app:tabTextColor="@color/colorTabNormal"

用来设置导航条title默认颜色和选中的颜色，最后面你就会看到实际的效果了。当然，这里的颜色就需要你自己随便设置就可以了。

将SampleFragmentPagerAdapter中的下列代码注释掉

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

这里我们不再需要只显示一个title，我们要显示icon和title。

接下来，修改MainActivity.class, 再onCreate方法的最后添加以下代码

@Override
    protected void onCreate(Bundle savedInstanceState) {
              ...
   // 默认情况下的icon
        final int[] imageResId = {
                R.drawable.tab_home,
                R.drawable.tab_discovery,
                R.drawable.tab_profile
        };

// titles
        String tabTitles[] = new String[] {"Tab1", "Tab2", "Tab3"};

// 设置TabLayout.Tab的icon和title
        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setIcon(imageResId[i]);
            tab.setText(tabTitles[i]);
        }



        mTabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
            @Override
            public void onTabSelected(TabLayout.Tab tab) {
                int tabIconColor = ContextCompat.getColor(MainActivity.this, R.color.colorTabSelected);
                tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
            }

            @Override
            public void onTabUnselected(TabLayout.Tab tab) {
                int tabIconColor = ContextCompat.getColor(MainActivity.this, R.color.colorTabNormal);
                tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
            }

            @Override
            public void onTabReselected(TabLayout.Tab tab) {
                int tabIconColor = ContextCompat.getColor(MainActivity.this, R.color.colorTabSelected);
                tab.getIcon().setColorFilter(tabIconColor, PorterDuff.Mode.SRC_IN);
            }
        });

// 默认选中第二个Tab
        mTabLayout.getTabAt(1).select();
    }

这里，我们通过给mTabLayout添加addOnTabSelectedListener来修改选中和未选中Tab的icon颜色。最后，我们设置第二个tab被选中。

运行一下：

效果图

当然，我们一般看到的底部导航条都是没有下面的动态指示条的，下面我们给 TabLayout自定义一个样式，把指示条隐藏掉：
在styles.xml中添加下面的样式：

<!--自定义tab下面滑动条的颜色-->
    <style name="MyCustomeTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorHeight">0dp</item>
    </style>

同时，还可以在这里修改指示条的颜色(比如设为透明)：

<item name="tabIndicatorColor">@android:color/transparent</item>

然后，修改activity_main.xml，给TabLayout添加上面的样式即可：

...
<android.support.design.widget.TabLayout
        android:id="@+id/sliding_tabs"
        style="@style/MyCustomeTabLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        app:tabSelectedTextColor="@color/colorTabSelected"
        app:tabTextColor="@color/colorTabNormal"/>
...

效果图

---

补充:

通过mTabLayout.addOnTabSelectedListener来修改图标选中与未选中颜色很不方便，并且有一个问题，当用手势滑动Tab页面的时候，tab文字会根据滑动的程度自动变色，但是tab图标并不会变色。

这里，我们来自定义一个drawable文件来指定tab图标选中与未选中时的图片，

tab_home_pic.drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_home_selected" android:state_checked="true"/>
    <item android:drawable="@drawable/tab_home_selected" android:state_pressed="true"/>
    <item android:drawable="@drawable/tab_home_selected" android:state_selected="true"/>
    <item android:drawable="@drawable/tab_home"/>
</selector>

同样方式创建tab_discovery_pic.drawable和tab_profile_pic.drawable。

然后，修onCreate(Bundle savedInstanceState)代码如下：

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        mViewPager = findViewById(R.id.viewPager);
        final SampleFragmentPagerAdapter pagerAdapter = new SampleFragmentPagerAdapter(getSupportFragmentManager(), MainActivity.this);
        mViewPager.setAdapter(pagerAdapter);


        mTabLayout = findViewById(R.id.sliding_tabs);
        mTabLayout.setupWithViewPager(mViewPager);

        // 设置tab icon
        final int[] imageResId = {
                R.drawable.tab_home_pic,
                R.drawable.tab_discovery_pic,
                R.drawable.tab_profile_pic
        };

        String tabTitles[] = new String[] {"Tab1", "Tab2", "Tab3"};

        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            TabLayout.Tab tab = mTabLayout.getTabAt(i);
            tab.setIcon(imageResId[i]);
            tab.setText(tabTitles[i]);
        }
        
        mTabLayout.getTabAt(1).select();
    }

这样, Tab图标和标题的颜色就都会随着手势的滑动而变化了。