Android底部導航欄實現（四）之TabLayout+ViewPager

這裏簡單記錄一下經過TabLayout+ViewPager來實現Android底部導航欄。

佈局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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">

    <include layout="@layout/fragment_content"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">


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

        <android.support.design.widget.TabLayout
            android:id="@+id/tab_layout"
            android:layout_width="match_parent"
            android:layout_height="56dp"
            app:tabBackground="@color/white"
            app:tabIndicatorHeight="0dp"
            app:tabSelectedTextColor="@color/colorPrimary"
            app:tabTextAppearance="@style/tabTextSizeStyle"
            app:tabTextColor="@color/black_1"></android.support.design.widget.TabLayout>
    </LinearLayout>
</RelativeLayout>

代碼

mViewPager = (ViewPager) view.findViewById(R.id.view_pager);
        mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
        initTabList();
        mAdapter = new TabLayoutFragmentAdapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs);
        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(0);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);//設置TabLayout的模式
        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
            mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i));
        }
        mTabLayout.addOnTabSelectedListener(this);//設置TabLayout的選中監聽

這裏須要注意的就是TabLayout的使用。TabLayou配合ViewPager使用。要用 mTabLayout.setupWithViewPager(mViewPager);使兩者聯繫起來。
另外這裏面使用的是customView，固然TabLayout自帶方法也可實現icon+text的效果。也就是效果：TabLayout + ViewPager 2

根據Tab選中狀態顯示Tab鍵效果

@Override
    public void onTabSelected(TabLayout.Tab tab) {
        setTabSelectedState(tab);
    }

    @Override
    public void onTabUnselected(TabLayout.Tab tab) {
        setTabUnSelectedState(tab);
    }


    @Override
    public void onTabReselected(TabLayout.Tab tab) {

    }




 private void setTabSelectedState(TabLayout.Tab tab) {
        View customView = tab.getCustomView();
        TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text);
        ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon);
        tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
        String s = tabText.getText().toString();
        if (getString(R.string.item_home).equals(s)) {
            tabIcon.setImageResource(R.drawable.home_fill);
        } else if (getString(R.string.item_location).equals(s)) {
            tabIcon.setImageResource(R.drawable.location_fill);
        } else if (getString(R.string.item_like).equals(s)) {
            tabIcon.setImageResource(R.drawable.like_fill);
        } else if (getString(R.string.item_person).equals(s)) {
            tabIcon.setImageResource(R.drawable.person_fill);
        }
    }

    private void setTabUnSelectedState(TabLayout.Tab tab) {
        View customView = tab.getCustomView();
        TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text);
        ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon);
        tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.black_1));
        String s = tabText.getText().toString();
        if (getString(R.string.item_home).equals(s)) {
            tabIcon.setImageResource(R.drawable.home);
        } else if (getString(R.string.item_location).equals(s)) {
            tabIcon.setImageResource(R.drawable.location);
        } else if (getString(R.string.item_like).equals(s)) {
            tabIcon.setImageResource(R.drawable.like);
        } else if (getString(R.string.item_person).equals(s)) {
            tabIcon.setImageResource(R.drawable.person);
        }
    }

這裏面不用設置defaultFragment，TabLayout會默認顯示第一個；

另外，這裏也貼出使用TabLayout自帶方法來實現效果代碼

值得說的是，自帶方法不能自定義icon和text的間距。用起來很方便，可是可能不是你要求的那個尺寸大小。我沒有去深究這裏面的源碼。
若是有人知道這個自帶方法怎麼改變的，也請告知一下。

mViewPager = (ViewPager) view.findViewById(R.id.view_pager);
        mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout);
        initTabList();
        mAdapter = new TabLayoutFragment2Adapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs);
        mViewPager.setAdapter(mAdapter);
        mViewPager.setCurrentItem(0);
        mTabLayout.setupWithViewPager(mViewPager);
        mTabLayout.setTabMode(TabLayout.MODE_FIXED);
//        for (int i = 0; i < mTabLayout.getTabCount(); i++) {
//            mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i));
//        }
        mTabLayout.addOnTabSelectedListener(this);
//        mViewPager.setCurrentItem(0);
        mTabLayout.getTabAt(0).setIcon(R.drawable.home_fill);//自有方法添加icon
        mTabLayout.getTabAt(1).setIcon(R.drawable.location);
        mTabLayout.getTabAt(2).setIcon(R.drawable.like);
        mTabLayout.getTabAt(3).setIcon(R.drawable.person);

Tab切換

@Override
    public void onTabSelected(TabLayout.Tab tab) {
//        setTabSelectedState(tab);//這個也無需使用
        resetTabIcon();
        int position = tab.getPosition();
        Log.e("Kevin", "position--->" + position);
        switch (position) {
            case 0:
                tab.setIcon(R.drawable.home_fill);
                break;
            case 1:
                tab.setIcon(R.drawable.location_fill);
                break;
            case 2:
                tab.setIcon(R.drawable.like_fill);
                break;
            case 3:
                tab.setIcon(R.drawable.person_fill);
                break;

        }
    }


private void resetTabIcon() {
        mTabLayout.getTabAt(0).setIcon(R.drawable.home);
        mTabLayout.getTabAt(1).setIcon(R.drawable.location);
        mTabLayout.getTabAt(2).setIcon(R.drawable.like);
        mTabLayout.getTabAt(3).setIcon(R.drawable.person);
    }

說明：這幾篇文章沒有過多的文字敘述，由於這些東西也不是很難，並且都是經常使用的，相信不少人都瞭如指掌了，多說亦是廢話，直接上代碼看的反而更清楚。

DownLoad Demo