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

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

这里写图片描述

布局

<!--fragment_text_tab.xml--><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <FrameLayout android:id="@+id/sub_content" android:layout_width="match_parent" android:layout_height="0dp" android:layout_weight="1"> <TextView android:id="@+id/activity_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerHorizontal="true" android:text="@string/tips" android:textColor="@color/colorPrimary" android:textSize="18sp" android:textStyle="bold|italic"/> </FrameLayout> <View android:layout_width="match_parent" android:layout_height="1px" android:background="@color/grey_300"/> <include layout="@layout/tab_layout_for_bottom"/></LinearLayout><!--tab_layout_for_bottom--><?xml version="1.0" encoding="utf-8"?><LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="56dp" android:background="@color/white" android:orientation="horizontal" tools:showIn="@layout/fragment_text_tab"> <TextView android:id="@+id/tv_home" style="@style/viewpager_navigation_bar_tab_style" android:drawableTop="@drawable/home" android:text="@string/item_home"/> <TextView android:id="@+id/tv_location" style="@style/viewpager_navigation_bar_tab_style" android:drawableTop="@drawable/location" android:text="@string/item_location"/> <TextView android:id="@+id/tv_like" style="@style/viewpager_navigation_bar_tab_style" android:drawableTop="@drawable/like" android:text="@string/item_like"/> <TextView android:id="@+id/tv_person" style="@style/viewpager_navigation_bar_tab_style" android:drawableTop="@drawable/person" android:text="@string/item_person"/></LinearLayout>

代码

mTHome.setOnClickListener(this); 
mTLocation.setOnClickListener(this);
 mTLike.setOnClickListener(this);
 mTMe.setOnClickListener(this);
 setDefaultFragment();//设置默认显示Fragment 
 @Override 
public void onClick(View view) { 
resetTabState();//reset the tab state 
switch (view.getId()) { 
case R.id.tv_home: 
setTabState(mTHome, R.drawable.home_fill, getColor(R.color.colorPrimary));//设置Tab状态 
switchFrgment(0);//切换Fragment 
break; 
case R.id.tv_location: setTabState(mTLocation, R.drawable.location_fill, getColor(R.color.colorPrimary)); 
switchFrgment(1); 
break; 
case R.id.tv_like:
 setTabState(mTLike, R.drawable.like_fill, getColor(R.color.colorPrimary)); switchFrgment(2);
 break; 
case R.id.tv_person: setTabState(mTMe, R.drawable.person_fill, getColor(R.color.colorPrimary));
 switchFrgment(3); 
break;
 } 
}

Fragment的切换

/** * switch the fragment accordting to id
 * @param i id 
*/ 
private void switchFrgment(int i) {
 FragmentTransaction transaction = getChildFragmentManager().beginTransaction();
 switch (i) { 
case 0: 
if (mHomeFragment == null) { mHomeFragment = mHomeFragment.newInstance(getString(R.string.item_home)); 
} 
transaction.replace(R.id.sub_content, mHomeFragment); 
break; 
case 1:
 if (mLocationFragment == null) { mLocationFragment = LocationFragment.newInstance(getString(R.string.item_location));
 }
 transaction.replace(R.id.sub_content, mLocationFragment); 
break; 
case 2:
 if (mLikeFragment == null) { mLikeFragment = LikeFragment.newInstance(getString(R.string.item_like));
 } 
transaction.replace(R.id.sub_content, mLikeFragment); 
break;
 case 3:
 if (mPersonFragment == null) { 
mPersonFragment = PersonFragment.newInstance(getString(R.string.item_person));
 } 
transaction.replace(R.id.sub_content, mPersonFragment); 
break; 
}
 transaction.commit();
 }

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

设置Tab状态

/** 
* set the tab state of bottom navigation bar
 * 
* @param textView the text to be shown 
* @param image the image 
* @param color the text color
 */
 private void setTabState(TextView textView, int image, int color) { textView.setCompoundDrawablesRelativeWithIntrinsicBounds(0, image, 0, 0);//Call requires API level 17 textView.setTextColor(color); } /** * revert the image color and text color to black */ private void resetTabState() { setTabState(mTHome, R.drawable.home, getColor(R.color.black_1)); setTabState(mTLocation, R.drawable.location, getColor(R.color.black_1)); setTabState(mTLike, R.drawable.like, getColor(R.color.black_1)); setTabState(mTMe, R.drawable.person, getColor(R.color.black_1)); 
}