Android 使用单选按钮制作底部导航，并点击实现跳转到不同的Frame中

1、xml文件为：其中 隐藏单选按钮的初始标识，有一个android:button="@null"这个属性即可隐藏，然后配合Java代码设置其标识图标。

<FrameLayout
        android:id="@+id/Frame_ID"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="50dp"
        />
    <RadioGroup
        android:id="@+id/RadioGroup"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true">
        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="首页"
            android:textColor="@drawable/color_text"
            android:gravity="center_horizontal"/>
        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="按钮2"
            android:textColor="@drawable/color_text"
            android:gravity="center_horizontal" />
        <RadioButton
            android:id="@+id/radio3"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="按钮3"
            android:textColor="@drawable/color_text"
            android:gravity="center_horizontal" />
        <RadioButton
            android:id="@+id/radio4"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="按钮4"
            android:textColor="@drawable/color_text"
            android:gravity="center_horizontal" />
        <RadioButton
            android:id="@+id/radio5"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:text="个人中心"
            android:textColor="@drawable/color_text"
            android:gravity="center_horizontal" />
    </RadioGroup>

2、这里需要找五张小icon存放到res的drawable文件下，作为点击的图表，在drawable文件下创建一个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/home_off"/>
    <item android:state_checked="true" android:drawable="@drawable/home_on"/>
</selector>

@Drawable引用的是提前准备的图片

3、然后文字也要跟随改变颜色，所以创建selector文件为：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:color="#000"/>
    <item android:state_checked="true" android:color="#81D4FA"/>
</selector>

根据需求设置color的颜色

4、然后下面是Java文件的内容：

private void SetRadio_Click() {
        getSupportFragmentManager().beginTransaction().replace(R.id.Frame_ID,new MainFragment()).commit();
        RadioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(android.widget.RadioGroup group, int checkedId){
                switch (checkedId){
                    case R.id.radio1:{
                        getSupportFragmentManager().beginTransaction().replace(R.id.Frame_ID,new MainFragment()).commit();
                        break;
                    }
                    case R.id.radio2:{
                        Toast.makeText(MainActivity.this, "第二个", Toast.LENGTH_SHORT).show();
                        break;
                    }
                    case R.id.radio3:{
                        Toast.makeText(MainActivity.this, "第三个", Toast.LENGTH_SHORT).show();
                        break;
                    }
                    case R.id.radio4:{
                        Toast.makeText(MainActivity.this, "第四个", Toast.LENGTH_SHORT).show();
                        break;
                    }
                    case R.id.radio5:{
                        getSupportFragmentManager().beginTransaction().replace(R.id.Frame_ID,new MyFragment()).commit();
                        break;
                    }
                }
            }
        });
    }

    private void SetRadio() {
        Drawable drawable = getResources().getDrawable(R.drawable.home_selector);
        Drawable drawable1 = getResources().getDrawable(R.drawable.more_selector);
        Drawable drawable2 = getResources().getDrawable(R.drawable.serve_selector);
        Drawable drawable3 = getResources().getDrawable(R.drawable.new_selector);
        Drawable drawable4 = getResources().getDrawable(R.drawable.my_selector);
        RadioButton[] radioButtons = new RadioButton[]{radio1,radio2,radio3,radio4,radio5};
        Drawable[] drawables = new Drawable[]{drawable,drawable1,drawable2,drawable3,drawable4};
        for(int i = 0;i<drawables.length;i++){
            drawables[i].setBounds(0,0,70,70);
            radioButtons[i].setCompoundDrawables(null,drawables[i],null,null);
        }
    }

调用图表的setBounds方法来改变图标的大小，然后将其放到单选按钮的上方所以显示图标。

效果图如图所示