Android底部導(dǎo)航欄實(shí)現(xiàn)（四）之TabLayout+ViewPager

作者：K_J 2016-12-07 10:58:35

這里簡單記錄一下通過TabLayout+ViewPager來實(shí)現(xiàn)Android底部導(dǎo)航欄。

布局

<?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);//設(shè)置TabLayout的模式 
        for (int i = 0; i < mTabLayout.getTabCount(); i++) { 
            mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i)); 
        } 
        mTabLayout.addOnTabSelectedListener(this);//設(shè)置TabLayout的選中監(jiān)聽

這里需要注意的就是TabLayout的使用。TabLayou配合ViewPager使用。要用 mTabLayout.setupWithViewPager(mViewPager);使二者聯(lián)系起來。另外這里面使用的是customView，當(dāng)然TabLayout自帶方法也可實(shí)現(xiàn)icon+text的效果。也就是效果：TabLayout + ViewPager 2

根據(jù)Tab選中狀態(tài)顯示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); 
       } 
   }

這里面不用設(shè)置defaultFragment，TabLayout會(huì)默認(rèn)顯示***個(gè);

另外，這里也貼出使用TabLayout自帶方法來實(shí)現(xiàn)效果代碼

值得說的是，自帶方法不能自定義icon和text的間距。用起來很方便，但是可能不是你要求的那個(gè)尺寸大小。我沒有去深究這里面的源碼。如果有人知道這個(gè)自帶方法怎么改變的，也請(qǐng)告知一下。

 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);//這個(gè)也無需使用 
        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); 
    }