Android底部导航栏实现（三）之TextView+LinearLayout

这里简单记录下通过TextView+LinearLayout+Fragment来实现Android底部导航栏。

布局

1. <!--fragment_text_tab.xml--> 
2.  
3. <?xml version="1.0" encoding="utf-8"?> 
4. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" 
5.               android:layout_width="match_parent" 
6.               android:layout_height="match_parent" 
7.               android:orientation="vertical"> 
8.  
9.     <FrameLayout 
10.         android:id="@+id/sub_content" 
11.         android:layout_width="match_parent" 
12.         android:layout_height="0dp" 
13.         android:layout_weight="1"> 
14.  
15.         <TextView 
16.             android:id="@+id/activity_text_view" 
17.             android:layout_width="wrap_content" 
18.             android:layout_height="wrap_content" 
19.             android:layout_centerHorizontal="true" 
20.             android:text="@string/tips" 
21.             android:textColor="@color/colorPrimary" 
22.             android:textSize="18sp" 
23.             android:textStyle="bold|italic"/> 
24.     </FrameLayout> 
25.  
26.     <View 
27.         android:layout_width="match_parent" 
28.         android:layout_height="1px" 
29.         android:background="@color/grey_300"/> 
30.  
31.     <include layout="@layout/tab_layout_for_bottom"/> 
32.  
33. </LinearLayout> 
34.  
35.  
36.  
37. <!--tab_layout_for_bottom--> 
38.  
39. <?xml version="1.0" encoding="utf-8"?> 
40.  
41.  
42. <LinearLayout 
43.     xmlns:android="http://schemas.android.com/apk/res/android" 
44.     xmlns:tools="http://schemas.android.com/tools" 
45.     android:layout_width="match_parent" 
46.     android:layout_height="56dp" 
47.     android:background="@color/white" 
48.     android:orientation="horizontal" 
49.     tools:showIn="@layout/fragment_text_tab"> 
50.  
51.     <TextView 
52.         android:id="@+id/tv_home" 
53.         style="@style/viewpager_navigation_bar_tab_style" 
54.         android:drawableTop="@drawable/home" 
55.         android:text="@string/item_home"/> 
56.  
57.     <TextView 
58.         android:id="@+id/tv_location" 
59.         style="@style/viewpager_navigation_bar_tab_style" 
60.         android:drawableTop="@drawable/location" 
61.         android:text="@string/item_location"/> 
62.  
63.     <TextView 
64.         android:id="@+id/tv_like" 
65.         style="@style/viewpager_navigation_bar_tab_style" 
66.         android:drawableTop="@drawable/like" 
67.         android:text="@string/item_like"/> 
68.  
69.     <TextView 
70.         android:id="@+id/tv_person" 
71.         style="@style/viewpager_navigation_bar_tab_style" 
72.         android:drawableTop="@drawable/person" 
73.         android:text="@string/item_person"/> 
74. </LinearLayout> 

代码

1. mTHome.setOnClickListener(this); 
2.     mTLocation.setOnClickListener(this); 
3.     mTLike.setOnClickListener(this); 
4.     mTMe.setOnClickListener(this); 
5.     setDefaultFragment();//设置默认显示Fragment 
6.          
7.     @Override 
8.     public void onClick(View view) { 
9.         resetTabState();//reset the tab state 
10.         switch (view.getId()) { 
11.             case R.id.tv_home: 
12.                 setTabState(mTHome, R.drawable.home_fill, getColor(R.color.colorPrimary));//设置Tab状态 
13.                 switchFrgment(0);//切换Fragment 
14.                 break; 
15.             case R.id.tv_location: 
16.                 setTabState(mTLocation, R.drawable.location_fill, getColor(R.color.colorPrimary)); 
17.                 switchFrgment(1); 
18.                 break; 
19.             case R.id.tv_like: 
20.                 setTabState(mTLike, R.drawable.like_fill, getColor(R.color.colorPrimary)); 
21.                 switchFrgment(2); 
22.                 break; 
23.             case R.id.tv_person: 
24.                 setTabState(mTMe, R.drawable.person_fill, getColor(R.color.colorPrimary)); 
25.                 switchFrgment(3); 
26.                 break; 
27.         } 
28.     }  

Fragment的切换

1. /** 
2.      * switch the fragment accordting to id 
3.      * @param i id 
4.      */ 
5.     private void switchFrgment(int i) { 
6.         FragmentTransaction transaction = getChildFragmentManager().beginTransaction(); 
7.         switch (i) { 
8.             case 0: 
9.                 if (mHomeFragment == null) { 
10.                     mHomeFragment = mHomeFragment.newInstance(getString(R.string.item_home)); 
11.                 } 
12.                 transaction.replace(R.id.sub_content, mHomeFragment); 
13.                 break; 
14.             case 1: 
15.                 if (mLocationFragment == null) { 
16.                     mLocationFragment = LocationFragment.newInstance(getString(R.string.item_location)); 
17.                 } 
18.                 transaction.replace(R.id.sub_content, mLocationFragment); 
19.                 break; 
20.             case 2: 
21.                 if (mLikeFragment == null) { 
22.                     mLikeFragment = LikeFragment.newInstance(getString(R.string.item_like)); 
23.                 } 
24.                 transaction.replace(R.id.sub_content, mLikeFragment); 
25.                 break; 
26.             case 3: 
27.                 if (mPersonFragment == null) { 
28.                     mPersonFragment = PersonFragment.newInstance(getString(R.string.item_person)); 
29.                 } 
30.                 transaction.replace(R.id.sub_content, mPersonFragment); 
31.                 break; 
32.         } 
33.         transaction.commit(); 
34.     }  

这里面值得注意的地方就是要用getChildFragmentManager()，否则会出现切换Fragment内容不显示的情况。

设置Tab状态

1. /** 
2.      * set the tab state of bottom navigation bar 
3.      * 
4.      * @param textView the text to be shown 
5.      * @param image    the image 
6.      * @param color    the text color 
7.      */ 
8.     private void setTabState(TextView textView, int image, int color) { 
9.         textView.setCompoundDrawablesRelativeWithIntrinsicBounds(0, image, 0, 0);//Call requires API level 17 
10.         textView.setTextColor(color); 
11.     } 
12.  
13.  
14.  
15.     /** 
16.      * revert the image color and text color to black 
17.      */ 
18.     private void resetTabState() { 
19.         setTabState(mTHome, R.drawable.home, getColor(R.color.black_1)); 
20.         setTabState(mTLocation, R.drawable.location, getColor(R.color.black_1)); 
21.         setTabState(mTLike, R.drawable.like, getColor(R.color.black_1)); 
22.         setTabState(mTMe, R.drawable.person, getColor(R.color.black_1)); 
23.  
24.     }  

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

作者：K_J

来源：51CTO