领券联盟-使用RadioGroup+RadioButton实现导航栏

前面我们使用BottomNavigationView实现底部的导航栏

假如说要你自己去实现呢？你打算怎么弄呢？

RadioGroup+RadioButton

布局如下：

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


    <RadioGroup
        android:id="@+id/test_navigation_bar"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/test_home"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:drawableTop="@drawable/selector_navigation_home"
            android:gravity="center"
            android:text="首页"
            android:textColor="@drawable/navigation_bar_color" />

        <RadioButton
            android:id="@+id/test_selected"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector_navigation_selected"
            android:gravity="center"
            android:text="精选"
            android:textColor="@drawable/navigation_bar_color" />

        <RadioButton
            android:id="@+id/test_red_packet"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector_navigation_red_packet"
            android:gravity="center"
            android:text="特惠"
            android:textColor="@drawable/navigation_bar_color" />

        <RadioButton
            android:id="@+id/test_search"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector_navigation_search"
            android:gravity="center"
            android:text="搜索"
            android:textColor="@drawable/navigation_bar_color" />


    </RadioGroup>


    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:layout_above="@id/test_navigation_bar"
        android:layout_marginBottom="10dp"
        android:background="@color/gray" />


</RelativeLayout>

drawable资源文件

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@mipmap/home_checked" android:state_checked="true" />
    <item android:drawable="@mipmap/home_press" android:state_pressed="true" />
    <item android:drawable="@mipmap/home_normal" />

</selector>

字体颜色的

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:color="@color/colorPrimaryDark" android:state_checked="true" />
    <item android:color="@color/colorGrey" />

</selector>

编写完效果

图片描述

点击的时候也可以切换

设置切换的监听事件

 navigationBar.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group,int checkedId) {
                // LogUtils.d(TestActivity.class,"checkedId -- > " + checkedId);
                switch(checkedId) {
                    case R.id.test_home:
                        LogUtils.d(TestActivity.class,"切换到首页");
                        break;
                    case R.id.test_selected:
                        LogUtils.d(TestActivity.class,"切换到精选页面");
                        break;
                    case R.id.test_search:
                        LogUtils.d(TestActivity.class,"切换到搜索页面");
                        break;
                    case R.id.test_red_packet:
                        LogUtils.d(TestActivity.class,"切换到特惠");
                        break;
                }
            }
        });

如此以来，再结合前面的代码，我们就可以实现tab切换内容了。