android动态导航栏，使用radioButton实现

效果图是这样的

  

  

源码下载地址：

https://download.csdn.net/download/ylj15503473366/10588051

关键代码

package ylj.com.dynictab;

import android.content.res.ColorStateList;
import android.graphics.Color;
import android.graphics.drawable.Drawable;
import android.graphics.drawable.StateListDrawable;
import android.os.AsyncTask;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import java.io.IOException;
import java.net.URL;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;

/**
 *  动态导航图片、文字、文字颜色
 */
public class MainActivity extends AppCompatActivity {
    //导航中间是一个日历组件，rb3是没有点击效果的
//    RadioButton rb1,rb2,rb4,rb5;
    RadioGroup mainRadioGroup;
    List<HashMap> menuInfo;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
//        rb1=findViewById(R.id.main_radio_button1);
//        rb2=findViewById(R.id.main_radio_button2);
//        rb4=findViewById(R.id.main_radio_button4);
//        rb5=findViewById(R.id.main_radio_button5);
        mainRadioGroup =findViewById(R.id.mainRadioGroup);
        mainRadioGroup.setOnCheckedChangeListener(changeListener);
         menuInfo= initMenusInfo();
       //如果不需要加载网络图片，把menuInfo 设置为null即可
//        menuInfo=null;
        if(null!=menuInfo)
        {
            //加载网络导航图标图片
            addWebPic(menuInfo);
            //动态设置导航按钮文字颜色
            setTabTextColorAndText(menuInfo);
        }
        //如果是每个字点击后的颜色都不同，就需要循环创建ColorStateList；否则，只需要创建一个
        //颜色可以固定取color文件里面的int格式，也可以通过Color.parserColor 把#000000转后使用
    }

    /**
     * 通过网络加载
     * 耗时操作，需要新起线程加载
     * @param menus 菜单信息
     */
    private void addWebPic(final List menus) {
        new AsyncTask<List<HashMap>, Void, List<Drawable>>() {

            @Override
            protected List<Drawable> doInBackground(List<HashMap>... params) {
                List<Drawable> pics = new ArrayList<Drawable>(menus.size());
                Drawable drawableTab = getResources().getDrawable(R.drawable.main_radiobutton_1);
                for (int i = 0; i < menus.size(); i++) {
                    StateListDrawable drawable = new StateListDrawable();
                    String url_unSelected = params[0].get(i).get("IMAGE_NORMAL").toString();
                    String url_selected = params[0].get(i).get("IMAGE_PRESS").toString();
                    Drawable selected = loadImageFromNetwork(url_selected, "selected");
                    Drawable unSelected = loadImageFromNetwork(url_unSelected, "unSelected");
                    drawable.addState(new int[]{android.R.attr.state_checked},
                            selected);
                    drawable.addState(new int[]{},
                            unSelected);
                    pics.add(drawable);
                    drawable = null;
                }

                return pics;
            }

            @Override
            protected void onPostExecute(List<Drawable> drawables) {
                super.onPostExecute(drawables);
                try {
                    Drawable drawableTab = getResources().getDrawable(R.drawable.main_radiobutton_1);

                    for (int i = 0; i < drawables.size(); i++) {
//                        drawables.get(i).setBounds(0, 0, Math.round(drawableTab.getIntrinsicWidth() * 1.5f), Math.round(drawableTab.getIntrinsicHeight() * 1.5f));
                        drawables.get(i).setBounds(0, 0, drawableTab.getIntrinsicWidth(), drawableTab.getIntrinsicHeight());

                    }

                    for (int i = 0; i < mainRadioGroup.getChildCount(); i++) {
                        RadioButton rb = (RadioButton) mainRadioGroup.getChildAt(i);
                        if(i<2)
                        {
                            rb.setCompoundDrawables(null, drawables.get(i), null, null);
                        }
                       else if (i == 2) {
                            continue;
                        }else
                        {
                            rb.setCompoundDrawables(null, drawables.get(i-1), null, null);
                        }

                    }

                    setTabPicBigOrSmall();
                } catch (Exception e) {
                    e.printStackTrace();
                }

            }

        }.execute(menus);
    }

    /**
     * 通过url获取网络图片
     *
     * @param imageUrl  图片的url
     * @param srcName
     * @return 加载完成的网络图片
     */

    private Drawable loadImageFromNetwork(String imageUrl, String srcName) {
        Drawable drawable = null;
        try {
            drawable = Drawable.createFromStream(
                    new URL(imageUrl).openStream(), srcName);
        } catch (IOException e) {
            Log.d("test", e.getMessage());
        }
        if (drawable == null) {
            Log.d("test", "null drawable");
        } else {
            Log.d("test", "not null drawable");
        }
        //可以手动设置宽和高
        if(null!=drawable)
        {
            drawable.setBounds(0, 0, drawable.getIntrinsicWidth(), drawable
                    .getIntrinsicHeight());
        }
        return drawable;
    }

    /**
     * 加载网络图片后
     * 设置选中的图片放大1.5倍
     */
    private void setTabPicBigOrSmall() {
//      int  checkedId=  main_RadioGroup.getCheckedRadioButtonId();
        Drawable drawableTabNormal = getResources().getDrawable(R.drawable.main_radiobutton_1);
        for (int i = 0; i < mainRadioGroup.getChildCount(); i++) {
            //其中2是不用处理的,显示日期
            RadioButton rb = (RadioButton) mainRadioGroup.getChildAt(i);
            if (i == 2) {
                continue;
            }
            Drawable[] drawables = rb.getCompoundDrawables();
            if (rb.isChecked()) {
                if (null != drawables[1]) {
                    drawables[1].setBounds(0, 0, Math.round(drawableTabNormal.getIntrinsicWidth() * 1.5f), Math.round(drawableTabNormal.getIntrinsicHeight() * 1.5f));
                    rb.setCompoundDrawables(null, drawables[1], null, null);
                }

            } else {
                if (null != drawables[1]) {
                    drawables[1].setBounds(0, 0, drawableTabNormal.getIntrinsicWidth(), drawableTabNormal.getIntrinsicHeight());
                    rb.setCompoundDrawables(null, drawables[1], null, null);
                }
            }
        }

    }

    /**
     * 对RadioButton设置不同状态时其文字颜色。
     */
    private ColorStateList createColorStateList(int checkked, int normal) {
        int[] colors = new int[]{checkked, normal};
        int[][] states = new int[2][];
        states[0] = new int[]{android.R.attr.state_checked};
        states[1] = new int[]{};
        ColorStateList colorList = new ColorStateList(states, colors);
        return colorList;
    }

    private RadioGroup.OnCheckedChangeListener changeListener = new RadioGroup.OnCheckedChangeListener() {

        @Override
        public void onCheckedChanged(RadioGroup arg0, int arg1) {
            if(null!=menuInfo)
            {
                setTabPicBigOrSmall();
            }

        }
    };

    /**
     * 初始化动态的导航数据
     */
    private  List<HashMap> initMenusInfo()
    {
        List<HashMap> menuInfo = new ArrayList<HashMap>();
        HashMap menu = new HashMap();
        menu.put("IMAGE_NORMAL", "https://avatar.csdn.net/B/4/9/3_shirly_yy.jpg");
        menu.put("IMAGE_PRESS", "https://avatar.csdn.net/B/4/9/3_shirly_yy.jpg");
        menu.put("TEXT_COLOR_PRESS", "#00ffaa");
        menu.put("TEXT", "首页");
        menuInfo.add(menu);
        menu = new HashMap();
        menu.put("IMAGE_NORMAL", "https://avatar.csdn.net/B/4/9/3_shirly_yy.jpg");
        menu.put("IMAGE_PRESS", "https://avatar.csdn.net/B/4/9/3_shirly_yy.jpg");
        menu.put("TEXT_COLOR_PRESS", "#ff0000");
        menu.put("TEXT", "通报");
        menuInfo.add(menu);
        menu = new HashMap();
        menu.put("IMAGE_NORMAL", "https://avatar.csdn.net/B/4/9/3_shirly_yy.jpg");
        menu.put("IMAGE_PRESS", "https://avatar.csdn.net/B/4/9/3_shirly_yy.jpg");
        menu.put("TEXT_COLOR_PRESS", "#00ff00");
        menu.put("TEXT", "日报");
        menuInfo.add(menu);
        menu = new HashMap();
        menu.put("IMAGE_NORMAL", "https://avatar.csdn.net/B/4/9/3_shirly_yy.jpg");
        menu.put("IMAGE_PRESS", "https://avatar.csdn.net/B/4/9/3_shirly_yy.jpg");
        menu.put("TEXT_COLOR_PRESS", "#0000ff");
        menu.put("TEXT", "我的");
        menuInfo.add(menu);
        return menuInfo;
    }

    /**
     * 动态设置导航文字颜色和文字
     * @param menuInfo 菜单信息
     */
    private void  setTabTextColorAndText(List<HashMap> menuInfo )
    {
        for (int i = 0; i < mainRadioGroup.getChildCount(); i++) {
            RadioButton rb = (RadioButton) mainRadioGroup.getChildAt(i);
            ColorStateList colorList;
            String text="";

            if(i<2)
            {
                colorList = createColorStateList(Color.parseColor(menuInfo.get(i).get("TEXT_COLOR_PRESS").toString()), getResources().getColor(R.color.main_tab_text));
                text=menuInfo.get(i).get("TEXT").toString();


            }
            else if (i == 2) {
                continue;
            }else
            {
                colorList = createColorStateList(Color.parseColor(menuInfo.get(i-1).get("TEXT_COLOR_PRESS").toString()), getResources().getColor(R.color.main_tab_text));
                text=menuInfo.get(i-1).get("TEXT").toString();
            }
            if(null!=colorList)
            {
                rb.setTextColor(colorList);
            }
            if(null!=text)
            {
                rb.setText(text);
            }

        }
    }
}

color文件

  <color name="main_tab_text">#444444</color>
    <color name="main_tab_text_selected">#60ACFB</color>
    <color name="datetext">#3c3c3c</color>

string 文件

    <string name="app_name">动态导航栏</string>
    <string name="main_radio_shouye">首页</string>
    <string name="main_radio_tongbao">风暴</string>
    <string name="main_radio_ribao">日报</string>
    <string name="main_radio_wo">我的</string>

style文件

<style name="main_tab_bottom">
        <item name="android:textSize">12.0sp</item>
        <item name="android:textColor">@drawable/tab_text_color</item>
        <item name="android:ellipsize">marquee</item>
        <item name="android:gravity">bottom|center_horizontal</item>
        <item name="android:background">@drawable/main_radiobutton_bg</item>
        <item name="android:paddingTop">0.0dp</item>
        <item name="android:layout_width">fill_parent</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:button">@null</item>
        <item name="android:singleLine">true</item>
        <item name="android:drawablePadding">2.0dp</item>
        <item name="android:layout_weight">1.0</item>
        <item name="android:layout_marginBottom">4dp</item>
    </style>

layout  activity_main 文件

<?xml version="1.0" encoding="UTF-8"?>
<RelativeLayout xmlns:tools="http://schemas.android.com/tools"
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <FrameLayout
        android:id="@+id/main_view_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/mainTabFrameLayout"
        android:background="#f5f5f5"
        android:orientation="vertical" >
    </FrameLayout>
    <FrameLayout
        android:id="@+id/mainTabFrameLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerVertical="true"
        android:background="@drawable/bottom_navigation_bg"
        android:orientation="horizontal"
        android:paddingTop="3dp"
        android:minHeight="60dp"
        >
    </FrameLayout>

    <RadioGroup
        android:id="@+id/mainRadioGroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"

        android:minHeight="60dp"
        android:orientation="horizontal"
        android:paddingTop="3dp"
        android:gravity="bottom">

        <RadioButton
            android:id="@+id/main_radio_button1"
            style="@style/main_tab_bottom"
            android:drawableTop="@drawable/main_radiobutton_1_bg"
            android:tag="radio_button0"
            android:text="@string/main_radio_shouye"
            android:checked="true"/>

        <RadioButton
            android:id="@+id/main_radio_button2"
            style="@style/main_tab_bottom"
            android:drawableTop="@drawable/main_radiobutton_2_bg"
            android:tag="radio_button1"
            android:text="@string/main_radio_tongbao" />

        <RadioButton
            android:id="@+id/main_radio_button3"
            style="@style/main_tab_bottom"
            android:background="#00000000"
            android:clickable="false"
            android:tag="radio_button1" />

        <RadioButton
            android:id="@+id/main_radio_button4"
            style="@style/main_tab_bottom"
            android:drawableTop="@drawable/main_radiobutton_3_bg"
            android:tag="radio_button2"
            android:text="@string/main_radio_ribao" />

        <RadioButton
            android:id="@+id/main_radio_button5"
            style="@style/main_tab_bottom"
            android:drawableTop="@drawable/main_radiobutton_4_bg"
            android:tag="radio_button3"
            android:text="@string/main_radio_wo" />
    </RadioGroup>

    <LinearLayout
        android:id="@+id/dateRelativeLayout"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:background="@drawable/date"
        android:gravity="center"
        android:orientation="vertical" >

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_marginTop="20dp"
            android:layout_weight="1"
            android:gravity="center"
            android:orientation="horizontal" >

            <TextView
                android:id="@+id/dateTv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="1dp"
                android:layout_weight="1.2"
                android:gravity="center"
                android:paddingRight="2dp"
                android:text="07日"
                android:textColor="@drawable/date_text"
                android:textSize="10sp" />

            <TextView
                android:id="@+id/weekTv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:layout_margin="1dp"
                android:layout_weight="1.2"
                android:gravity="center"
                android:paddingLeft="1dp"
                android:text="周二"
                android:textColor="@drawable/date_text"
                android:textSize="10sp" />
        </LinearLayout>

        <TextView
            android:id="@+id/locationTv"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:layout_gravity="center"
            android:layout_marginBottom="10dp"
            android:layout_weight="1"
            android:gravity="center"
            android:singleLine="true"
            android:text="山西"
            android:textColor="@drawable/date_text"
            android:textSize="10sp" />
    </LinearLayout>

</RelativeLayout>

图片资源

main_radiobutton_1_bg.xml

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

main_radiobutton_1 和 main_radiobutton_1_selected 和bottom_navigation_bg

注意我的main_radiobutton_1 和 main_radiobutton_1_selected 是在drawabl-hdpi 里面放的，所以放大1.5倍，如果放到其它文件夹，大家需要调整大小。