Android进阶之路 - 通过RadioGroup + RadioButton 实现底部导航栏

阅读与使用此文知识，仅需5-20分钟

项目之初，我们都需要搭建UI界面，而底部导航的承载效果是不可或缺的，在我认知中主要有以下几种实现方式

• Tablayout + ViewPager + Fragment
• LinearLayout + TextView + ImageView
• RadioGroup + RadioButton
• BottomNavigationView + FrameLayout

对于一个项目，底部导航基本是标配，特提供我自己记录的几篇Blog

• Android进阶之路 - PagerTabStrip与ViewPager的使用（太老了，没看的必要）
• Tablayout + ViewPager + Fragment 快速实现底部导航（可能用的比较少了）
• Android入门之路 - RadioButton的简单使用（可了解）
• Android进阶之路 - 通过RadioGroup + RadioButton 实现底部导航栏（适当推荐）
• Android进阶之路 - BottomNavigationView的使用与问题处理方案（较新，推荐）
• Android进阶之路 - 通过 BottomNavigationView + FrameLayout 实现底部导航栏（较新，推荐）

Effect

注意点：

Xml属性Icon位于文本上方

 //请注意图片大小，如果图片太大，图片本身与文本都会显示不全
 android:drawableTop="@drawable/这里调用图"

但是查询之后可能有四种方式去实现这样的一个效果，大家都可以轻松的百度到，只不过因为讲解的多而有些朋友连贯不起来，所以我特此写了一个Demo用于使用，下面进入代码时间（代码中已经注释）

MainActivity

package com.example.dow.radiogroup;

import android.support.v4.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.FrameLayout;
import android.widget.RadioButton;
import android.widget.RadioGroup;

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {

    private FrameLayout mFragment;
    private RadioGroup mGroup;
    private RadioButton mR1;
    private RadioButton mR2;
    private RadioButton mR3;
    private RadioButton mR4;
    private UsFragment rb1,rb2,rb3,rb4;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        mFragment = (FrameLayout) findViewById(R.id.fl);
        mGroup = (RadioGroup)   findViewById(R.id.ra_group);
        mR1 = (RadioButton) findViewById(R.id.ra_1);
        mR2 = (RadioButton) findViewById(R.id.ra_2);
        mR3 = (RadioButton) findViewById(R.id.ra_3);
        mR4 = (RadioButton) findViewById(R.id.ra_4);
        //设置Group监听，也就是下方的RadioButton的状态监听
        mGroup.setOnCheckedChangeListener(this);
        //初始化默认第一个RadioButton为选中状态
        mR1.setChecked(true);
    }
    
    //此下介绍：
    //rb 的变量为我们要切换的Fragment，这里因为是共用了同一个Fragment，只用于简单展示，
    // 如果在我们的项目中的话，建议创建对应的Frgament
    //问题点：
    // 有时候在走onCheckedChanged方法的hideAllFragment（）方法的时候，并没有实现隐藏之前的Fragment，
    // 如果出现这个问题，尝试在else的判断中加入 hideAllFragment(transaction);方法
    @Override
    public void onCheckedChanged(RadioGroup group, int checkedId) {
        //Fragment的简单使用，获取管理者，开启事务，对应使用replace或hind，show方法
        FragmentTransaction transaction = getSupportFragmentManager().beginTransaction();
        hideAllFragment(transaction);
        switch (checkedId){
            case R.id.ra_1:
                if(rb1==null){
                    rb1 = new UsFragment("第一个Fragment-首页");
                    transaction.add(R.id.fl,rb1);
                }else{
                    transaction.show(rb1);
                }
            break;
            case R.id.ra_2:
                if(rb2==null){
                    rb2= new UsFragment("第二个Fragment-经营");
                    transaction.add(R.id.fl,rb2);
                }else{
                    transaction.show(rb2);
                }
                break;
            case R.id.ra_3:
                if(rb3==null){
                    rb3 = new UsFragment("第三个Fragment-管理");
                    transaction.add(R.id.fl,rb3);
                }else{
                    transaction.show(rb3);
                }
                break;
            case R.id.ra_4:
                if(rb4==null){
                    rb4 = new UsFragment("第四个Fragment-中心");
                    transaction.add(R.id.fl,rb4);
                }else{
                    transaction.show(rb4);
                }
                break;
        }
        transaction.commit();
    }
    
    public void hideAllFragment(FragmentTransaction transaction){
        if(rb1!=null){
            transaction.hide(rb1);
        }
        if(rb2!=null){
            transaction.hide(rb2);
        }
        if(rb3!=null){
            transaction.hide(rb3);
        }
        if(rb4!=null){
            transaction.hide(rb4);
        }
    }
}

UsFragment(这个是我们用于切换的Fragment，在实际项目中就是几大模块)：

package com.example.dow.radiogroup;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class UsFragment extends Fragment {
    private String context;
    private TextView mTV;

    public UsFragment(String context){
        this.context = context;
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.us_fragment,container,false);
        mTV = (TextView)view.findViewById(R.id.textView);
        mTV.setText(context);
        return view;
    }
}

activity_main

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:layout_height="match_parent"
    tools:context="com.example.dow.radiogroup.MainActivity">

    <FrameLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:id="@+id/fl"
        />
        
    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="#2B2B2B"
        />
        
    <RadioGroup
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:id="@+id/ra_group"
        android:layout_height="70dp">

        <RadioButton
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_width="0dp"
            android:button="@null"
            android:id="@+id/ra_1"
            android:drawableTop="@drawable/checket_box"
            android:gravity="center"
            android:text="首页"
            android:drawablePadding="3dp"
            android:textColor="@drawable/home_tab"
            android:layout_gravity="center"
            />
            
        <RadioButton
            android:layout_width="0dp"
            android:button="@null"
            android:layout_weight="1"
            android:gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/ra_2"
            android:text="经营"
            android:drawablePadding="3dp"
            android:drawableTop="@drawable/checket_box"
            android:layout_gravity="center"
            android:textColor="@drawable/home_tab"
            />
            
        <RadioButton
            android:layout_width="0dp"
            android:button="@null"
            android:layout_weight="1"
            android:gravity="center"
            android:text="管理"
            android:drawablePadding="3dp"
            android:layout_height="wrap_content"
            android:id="@+id/ra_3"
            android:drawableTop="@drawable/checket_box"
            android:layout_gravity="center"
            android:textColor="@drawable/home_tab"
            />
            
        <RadioButton
            android:layout_width="0dp"
            android:button="@null"
            android:drawableTop="@drawable/checket_box"
            android:layout_weight="1"
            android:text="中心"
            android:drawablePadding="3dp"
            android:gravity="center"
            android:layout_gravity="center"
            android:layout_height="wrap_content"
            android:id="@+id/ra_4"
            android:textColor="@drawable/home_tab"
            />
    </RadioGroup>
</LinearLayout>

us_fragment

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

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:textSize="20sp"
        android:gravity="center"
        android:text="所需模块"/>

</LinearLayout>

这位朋友写的也蛮好的，大家可以借鉴下