Android底部导航栏实现（四）之TabLayout+ViewPager

这里简单记录一下通过TabLayout+ViewPager来实现Android底部导航栏。

布局

1. <?xml version="1.0" encoding="utf-8"?> 
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" 
3.                 xmlns:app="http://schemas.android.com/apk/res-auto" 
4.                 android:layout_width="match_parent" 
5.                 android:layout_height="match_parent" 
6.                 android:orientation="vertical"> 
7.  
8.     <include layout="@layout/fragment_content"/> 
9.  
10.     <LinearLayout 
11.         android:layout_width="match_parent" 
12.         android:layout_height="match_parent" 
13.         android:orientation="vertical"> 
14.  
15.  
16.         <android.support.v4.view.ViewPager 
17.             android:id="@+id/view_pager" 
18.             android:layout_width="match_parent" 
19.             android:layout_height="0dp" 
20.             android:layout_weight="1"></android.support.v4.view.ViewPager> 
21.  
22.         <android.support.design.widget.TabLayout 
23.             android:id="@+id/tab_layout" 
24.             android:layout_width="match_parent" 
25.             android:layout_height="56dp" 
26.             app:tabBackground="@color/white" 
27.             app:tabIndicatorHeight="0dp" 
28.             app:tabSelectedTextColor="@color/colorPrimary" 
29.             app:tabTextAppearance="@style/tabTextSizeStyle" 
30.             app:tabTextColor="@color/black_1"></android.support.design.widget.TabLayout> 
31.     </LinearLayout> 
32. </RelativeLayout>  

代码

1. mViewPager = (ViewPager) view.findViewById(R.id.view_pager); 
2.         mTabLayout = (TabLayout) view.findViewById(R.id.tab_layout); 
3.         initTabList(); 
4.         mAdapter = new TabLayoutFragmentAdapter(getChildFragmentManager(), mTabList, getActivity(), mFragments, mTabImgs); 
5.         mViewPager.setAdapter(mAdapter); 
6.         mViewPager.setCurrentItem(0); 
7.         mTabLayout.setupWithViewPager(mViewPager); 
8.         mTabLayout.setTabMode(TabLayout.MODE_FIXED);//设置TabLayout的模式 
9.         for (int i = 0; i < mTabLayout.getTabCount(); i++) { 
10.             mTabLayout.getTabAt(i).setCustomView(mAdapter.getTabView(i)); 
11.         } 
12.         mTabLayout.addOnTabSelectedListener(this);//设置TabLayout的选中监听  

这里需要注意的就是TabLayout的使用。TabLayou配合ViewPager使用。要用 mTabLayout.setupWithViewPager(mViewPager);使二者联系起来。另外这里面使用的是customView，当然TabLayout自带方法也可实现icon+text的效果。也就是效果：TabLayout + ViewPager 2

根据Tab选中状态显示Tab键效果

1. @Override 
2.    public void onTabSelected(TabLayout.Tab tab) { 
3.        setTabSelectedState(tab); 
4.    } 
5.  
6.    @Override 
7.    public void onTabUnselected(TabLayout.Tab tab) { 
8.        setTabUnSelectedState(tab); 
9.    } 
10.  
11.  
12.    @Override 
13.    public void onTabReselected(TabLayout.Tab tab) { 
14.  
15.    } 
16.  
17.  
18.  
19.  
20. private void setTabSelectedState(TabLayout.Tab tab) { 
21.        View customView = tab.getCustomView(); 
22.        TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text); 
23.        ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon); 
24.        tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary)); 
25.        String s = tabText.getText().toString(); 
26.        if (getString(R.string.item_home).equals(s)) { 
27.            tabIcon.setImageResource(R.drawable.home_fill); 
28.        } else if (getString(R.string.item_location).equals(s)) { 
29.            tabIcon.setImageResource(R.drawable.location_fill); 
30.        } else if (getString(R.string.item_like).equals(s)) { 
31.            tabIcon.setImageResource(R.drawable.like_fill); 
32.        } else if (getString(R.string.item_person).equals(s)) { 
33.            tabIcon.setImageResource(R.drawable.person_fill); 
34.        } 
35.    } 
36.  
37.    private void setTabUnSelectedState(TabLayout.Tab tab) { 
38.        View customView = tab.getCustomView(); 
39.        TextView tabText = (TextView) customView.findViewById(R.id.tv_tab_text); 
40.        ImageView tabIcon = (ImageView) customView.findViewById(R.id.iv_tab_icon); 
41.        tabText.setTextColor(ContextCompat.getColor(getActivity(), R.color.black_1)); 
42.        String s = tabText.getText().toString(); 
43.        if (getString(R.string.item_home).equals(s)) { 
44.            tabIcon.setImageResource(R.drawable.home); 
45.        } else if (getString(R.string.item_location).equals(s)) { 
46.            tabIcon.setImageResource(R.drawable.location); 
47.        } else if (getString(R.string.item_like).equals(s)) { 
48.            tabIcon.setImageResource(R.drawable.like); 
49.        } else if (getString(R.string.item_person).equals(s)) { 
50.            tabIcon.setImageResource(R.drawable.person); 
51.        } 
52.    }  

这里面不用设置defaultFragment，TabLayout会默认显示第一个;

另外，这里也贴出使用TabLayout自带方法来实现效果代码

值得说的是，自带方法不能自定义icon和text的间距。用起来很方便，但是可能不是你要求的那个尺寸大小。我没有去深究这里面的源码。如果有人知道这个自带方法怎么改变的，也请告知一下。

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

Tab切换

1. @Override 
2.     public void onTabSelected(TabLayout.Tab tab) { 
3. //        setTabSelectedState(tab);//这个也无需使用 
4.         resetTabIcon(); 
5.         int position = tab.getPosition(); 
6.         Log.e("Kevin", "position--->" + position); 
7.         switch (position) { 
8.             case 0: 
9.                 tab.setIcon(R.drawable.home_fill); 
10.                 break; 
11.             case 1: 
12.                 tab.setIcon(R.drawable.location_fill); 
13.                 break; 
14.             case 2: 
15.                 tab.setIcon(R.drawable.like_fill); 
16.                 break; 
17.             case 3: 
18.                 tab.setIcon(R.drawable.person_fill); 
19.                 break; 
20.  
21.         } 
22.     } 
23.  
24.  
25. private void resetTabIcon() { 
26.         mTabLayout.getTabAt(0).setIcon(R.drawable.home); 
27.         mTabLayout.getTabAt(1).setIcon(R.drawable.location); 
28.         mTabLayout.getTabAt(2).setIcon(R.drawable.like); 
29.         mTabLayout.getTabAt(3).setIcon(R.drawable.person); 
30.     }  

说明：这几篇文章没有过多的文字叙述，因为这些东西也不是很难，而且都是常用的，相信很多人都了如指掌了，多说亦是废话，直接上代码看的反而更清楚。