Android App底部导航栏的另一种实现方式

今天使用RadioGroup+RadioButton+Fragment实现应用底部导航栏。

先上效果图：

上代码：

布局文件：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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"
    tools:context="com.anyanyan.vmoive.activity.Main5Activity">
    <RadioGroup
        android:id="@+id/radioGroup"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true">
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tab1_menu"
            android:text="首页"
            android:gravity="center"
            android:textColor="@drawable/tab1_text_color"/>
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tab2_menu"
            android:text="课程"
            android:gravity="center"
            android:textColor="@drawable/tab1_text_color"/>
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tab3_menu"
            android:text="动态"
            android:gravity="center"
            android:textColor="@drawable/tab1_text_color"/>
        <RadioButton
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/tab4_menu"
            android:text="我的"
            android:gravity="center"
            android:textColor="@drawable/tab1_text_color"/>
    </RadioGroup>
    <View
        android:id="@+id/view"
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@id/radioGroup"
        android:background="#000"/>
    <FrameLayout
        android:id="@+id/frameLayout"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@id/view"/>
</RelativeLayout>

用到的资源文件：

drawable/tab1_menu.xml，其他类推

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

drawable/tab_text_color

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="true" android:color="@color/tab_selected"/>
    <item android:color = "@color/gray"/>
</selector>

Activity代码：

public class Main5Activity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {

    @BindView(R.id.radioGroup)
    RadioGroup mRadioGroup;

    //把要添加显示的fragment存放到集合中
    private List<Fragment> mFragmentList;
    //当前显示的fragment
    private Fragment currentFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main5);
        ButterKnife.bind(this);
        initFragment();
        initFirst();
        mRadioGroup.setOnCheckedChangeListener(this);
    }
    //设置刚进入时默认显示第一个模块
    private void initFirst() {
        getSupportFragmentManager().beginTransaction().add(R.id.frameLayout,mFragmentList.get(0)).commitAllowingStateLoss();
        currentFragment = mFragmentList.get(0);
        //设置第一个RadioButton选中状态
        ((RadioButton) mRadioGroup.getChildAt(0)).setChecked(true);
    }

    //把要添加显示的fragment存放到集合中
    private void initFragment() {
        if (mFragmentList == null) {
            mFragmentList = new ArrayList<>();
        }
        mFragmentList.add(new Fragment1());
        mFragmentList.add(new Fragment2());
        mFragmentList.add(new Fragment3());
        mFragmentList.add(new Fragment4());
    }

    //切换fragment
    private void switchFragment(Fragment from, Fragment to) {
        if (from == null || to == null) {
            return;
        }
        if (from == to) {
            return;
        }
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        transaction.hide(from);
        //如果已经add过了则直接show显示，否则add添加进去
        if (to.isAdded()) {
            transaction.show(to);
        } else {
            transaction.add(R.id.frameLayout, to);
        }
        transaction.commitAllowingStateLoss();
        //切换后，将当前fragment指向切换后显示的fragment
        currentFragment = to;
    }

    //当切换RadioButton时回调
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        //因为checkId从1开始，所以要减去1，否则会抛出IndexOutOfBoundException
        switchFragment(currentFragment,mFragmentList.get(checkedId-1));
    }
}

OK完成！