TabLayout + ViewPager 定制導(dǎo)航條(2)

現(xiàn)在，我們來實(shí)現(xiàn)一個帶圖片和文字的導(dǎo)航欄湘换，基礎(chǔ)工程參考
TabLayout + ViewPager 定制導(dǎo)航條(1)

后面的代碼將在它的基礎(chǔ)上修改宾舅。

首先，我們把activity_main.xml中TabLayout和ViewPager調(diào)換一下位置彩倚，將導(dǎo)航條放到底部

...
<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"

用來設(shè)置導(dǎo)航條title默認(rèn)顏色和選中的顏色，最后面你就會看到實(shí)際的效果了帆离。當(dāng)然蔬蕊，這里的顏色就需要你自己隨便設(shè)置就可以了。

將SampleFragmentPagerAdapter中的下列代碼注釋掉

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

這里我們不再需要只顯示一個title哥谷，我們要顯示icon和title岸夯。

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

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

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

// 設(shè)置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);
            }
        });

// 默認(rèn)選中第二個Tab
        mTabLayout.getTabAt(1).select();
    }

這里呼巷，我們通過給mTabLayout添加addOnTabSelectedListener來修改選中和未選中Tab的icon顏色囱修。最后，我們設(shè)置第二個tab被選中王悍。

運(yùn)行一下：

效果圖

當(dāng)然破镰，我們一般看到的底部導(dǎo)航條都是沒有下面的動態(tài)指示條的，下面我們給 TabLayout自定義一個樣式压储，把指示條隱藏掉：
在styles.xml中添加下面的樣式：

<!--自定義tab下面滑動條的顏色-->
    <style name="MyCustomeTabLayout" parent="Widget.Design.TabLayout">
        <item name="tabIndicatorHeight">0dp</item>
    </style>

同時鲜漩，還可以在這里修改指示條的顏色(比如設(shè)為透明)：

<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"/>
...

效果圖

補(bǔ)充:

通過mTabLayout.addOnTabSelectedListener來修改圖標(biāo)選中與未選中顏色很不方便孕似，并且有一個問題，當(dāng)用手勢滑動Tab頁面的時候刮刑，tab文字會根據(jù)滑動的程度自動變色喉祭，但是tab圖標(biāo)并不會變色。

這里雷绢，我們來自定義一個drawable文件來指定tab圖標(biāo)選中與未選中時的圖片泛烙，

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>

同樣方式創(chuàng)建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);

        // 設(shè)置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圖標(biāo)和標(biāo)題的顏色就都會隨著手勢的滑動而變化了蔽氨。