在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
需要的话可以下载看看