Andriod底部導航欄圖片和文字的切換
阿新 • • 發佈:2019-01-28
在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檔案如下:
bottom_navigation檔案如下:<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>
<?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
需要的話可以下載看看