Andriod底部导航栏图片和文字的切换

在App开发中底部导航栏的应用还是很多的，有时我们需要到底部导航既有图标又有文字，这就要求在点击切换时，未选中的其他图标及相应文字变换成另一种颜色，选中的又是一种颜色，要保证图片和文字的同时改变。

看一下我项目里的运行效果图

        

下面来介绍一种比较简单的方法

首先看主类

import android.app.Activity;
import android.graphics.Rect;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class MainActivity extends Activity {
	// 底部导航栏控件
	private RadioGroup gadiogroup;
	private RadioButton radio1, radio2, radio3, radio4;
	private Drawable drawable_radio1, drawable_radio2, drawable_radio3,
			drawable_radio4;

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initview();
	}

	private void initview() {
		// TODO Auto-generated method stub
		gadiogroup = (RadioGroup) findViewById(R.id.redio_group);
		radio1 = (RadioButton) findViewById(R.id.radio1);
		radio2 = (RadioButton) findViewById(R.id.radio2);
		radio3 = (RadioButton) findViewById(R.id.radio3);
		radio4 = (RadioButton) findViewById(R.id.radio4);
		drawable_radio1 = getResources().getDrawable(
				R.drawable.xml_radio_main_bg);
		drawable_radio2 = getResources().getDrawable(
				R.drawable.xml_radio_tmall_bg);
		drawable_radio3 = getResources().getDrawable(
				R.drawable.xml_radio_classification_bg);
		drawable_radio4 = getResources().getDrawable(
				R.drawable.xml_radio_shopingbags_bg);
		Rect rect = new Rect(0, 0, drawable_radio1.getMinimumWidth(),
				drawable_radio1.getMinimumHeight());
		drawable_radio1.setBounds(rect);
		drawable_radio2.setBounds(rect);
		drawable_radio3.setBounds(rect);
		drawable_radio4.setBounds(rect);
		radio1.setCompoundDrawables(null, drawable_radio1, null, null);
		radio2.setCompoundDrawables(null, drawable_radio2, null, null);
		radio3.setCompoundDrawables(null, drawable_radio3, null, null);
		radio4.setCompoundDrawables(null, drawable_radio4, null, null);
	}

}

这句话 

Rect rect = new Rect(0, 0, drawable_radio1.getMinimumWidth(),
				drawable_radio1.getMinimumHeight());

你可以随意改变你图标图片的大小

activity_main文件如下：

<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="match_parent"
    android:orientation="vertical"
    >

    <LinearLayout 
        android:layout_width="fill_parent"
        android:layout_height="0dp" 
        android:layout_weight="1"
        android:orientation="vertical"
        >                
    </LinearLayout>
    
    
      <include layout="@layout/bottom_navigation" />
</LinearLayout>

bottom_navigation文件如下：

<?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="wrap_content"
    android:background="#ffffff"
    android:orientation="vertical" >

    <View
        android:layout_width="fill_parent"
        android:layout_height="1dp"
        android:background="#F4692A" />

    <RadioGroup
        android:id="@+id/redio_group"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_centerHorizontal="true"
        android:background="#ffffff"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:weightSum="4" >

        <RadioButton
            android:id="@+id/radio1"
            style="@style/radio_button"
            android:checked="true"
            android:singleLine="true"
            android:text="苹果" />

        <RadioButton
            android:id="@+id/radio2"
            style="@style/radio_button"
            android:singleLine="true"
            android:text="橘子" />

        <RadioButton
            android:id="@+id/radio3"
            style="@style/radio_button"
            android:singleLine="true"
            android:text="香蕉" />

        <RadioButton
            android:id="@+id/radio4"
            style="@style/radio_button"
            android:singleLine="true"
            android:text="菠萝" />
    </RadioGroup>

</LinearLayout>

下面列出一个xml_radio_main_bg,因为其他的类似

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/a2_down"/>
    <item android:state_checked="false" android:drawable="@drawable/a2_on"/>
</selector>

好了，这样就完成了一个底部导航栏，图片+文字

Demo的下载地址是：http://download.csdn.net/detail/shihuiyun/9563621    

需要的话可以下载看看