1. 程式人生 > >Andriod底部導航欄圖片和文字的切換

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    

需要的話可以下載看看