前言:
现在很多APP都采用了底部导航菜单，也有很多人问我底部菜单如何切换，改变图片，这里我想说看完这篇文章，你会很好的掌握这项技能，灰常简单。那么现在就开始吧。
准备工作:
准备图片：
大家都知道底部菜单它是采用不同的图片，2张图片来回切换，选中 那么就明白了，我们要根据底部菜单数量的多少来选取不同的8张或10张图片来进行切换。（本篇以8张图片为例）
了解Fragment:
Fragment已经成为我们程序员不可或缺的技能，其实我们在这里也需要进行了解，这里主要用到了Fragment的替换。
了解Radiobutton,Radiogroup:
底部我使用radiobutton来实现，设置选中、未选中设置@null去掉选框等...
开始项目:
开始项目，我们先准备好图片，以确保可以正常调用到他们，这里我贴出主布局 ：
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical"
>
<FrameLayout
android:id="@+id/main_content"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<RadioGroup
android:id="@+id/tab_menu"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="#000000"
android:orientation="horizontal" >
<RadioButton
android:id="@+id/rbHome"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:drawableTop="@drawable/tab_selector_home"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:textSize="10sp"
android:text="首页"
android:textColor="@color/tab_selector_tv_color" />
<RadioButton
android:id="@+id/rbCategory"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_selector_<span style="font-size:14px;">category</span>"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:textSize="10sp"
android:text="分类"
android:textColor="@color/tab_selector_tv_color" />
<RadioButton
android:id="@+id/rbCart"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_selector_faxian"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:text="购物车"
android:textSize="10sp"
android:textColor="@color/tab_selector_tv_color" />
<RadioButton
android:id="@+id/rbMe"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_gravity="bottom"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/tab_selector_wo"
android:gravity="center_horizontal|bottom"
android:paddingTop="2dp"
android:textSize="10sp"
android:text="我的"
android:textColor="@color/tab_selector_tv_color" />
</RadioGroup>
</LinearLayout>
另外布局中设置darwableTop属性来实现按钮状态选择，这里就用到了图片。我依次贴出来：
tab_selector_home:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="@drawable/tab_home"></item>
<item android:state_checked="true" android:drawable="@drawable/tab_home_highlight"></item>
</selector>
tab_selector_category
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="@drawable/tab_category"></item>
<item android:state_checked="true" android:drawable="@drawable/tab_category_highlight"></item>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="@drawable/tab_shoppingbag"></item>
<item android:state_checked="true" android:drawable="@drawable/tab_shoppingbag_highlight"></item>
</selector>
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
<item android:state_checked="false" android:drawable="@drawable/tab_mine"></item>
<item android:state_checked="true" android:drawable="@drawable/tab_mine_highlight"></item>
</selector>
//这里就可以根据自己的需要来替换图片了，是不是特别方便了~
同样图片变了，文字你总不能不改变吧，为了更好看，同样也使用到了文字切换颜色：
tab_selector_tv_color.xml:
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@android:color/white"/>
<item android:state_checked="false" android:color="@android:color/darker_gray"/>
<item android:color="@android:color/darker_gray"/>
</selector>接下来布局完了，资源文件也定义完了，代码开始写了：
<span style="white-space:pre"> </span>/**
* 底部导航页面
*/
public void initTab() {
mHome = new Home_Fragment();
getSupportFragmentManager().beginTransaction().replace(R.id.main_content, mHome).commit();
mMyTabRg = (RadioGroup) findViewById(R.id.tab_menu);
mMyTabRg.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
// TODO Auto-generated method stub
switch (checkedId) {
case R.id.rbHome:
mHome = new Home_Fragment();
getSupportFragmentManager().beginTransaction().replace(R.id.main_content, mHome)
.commit();
break;
case R.id.rbCategory:
if (mCategory==null) {
mCategory =new Category_Fragment();
}
getSupportFragmentManager().beginTransaction().replace(R.id.main_content, mCategory).commit();
break;
case R.id.rbCart:
mCart = new Cart_Fragement();
getSupportFragmentManager().beginTransaction().replace(R.id.main_content, mCart)
.commit();
break;
case R.id.rbMe:
mMe = new Me_Fragment();
getSupportFragmentManager().beginTransaction().replace(R.id.main_content, mMe)
.commit();
break;
default:
break;
}
}
});
}
Home_Fragment Category_Fragment Cart_Fragement Me_Fragment 是4个fragment页面，这里我举例一个，相信大家都可以猜到了。
Home_Fragment：
public class Home_Fragment extends Fragment{
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,
Bundle savedInstanceState) {
// TODO Auto-generated method stub
return inflater.inflate(R.layout.home, null);
}
}
4个都一模一样，不一个个贴了，项目完成了，我们看一下效果图：
项目在这就介绍完毕了，最后附上源码 供大家下载~~（大家找一找）
源码下载------->猛戳下载
6517
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
