利用RadioButton实现底部导航栏

目标：利用RadioButton实现底部导航栏

简介：底部导航栏是现在大部分app都会用到的功能
它帮助用户可以通过导航在不同界面自由切换

实现过程

步骤1:编写布局文件
用RadioGroup和RadioButton完成导航栏的布局
用weight属性来控制所占比例
图片用系统所自带的一些图片
准备一定空间放置FrameLayout用于之后跳转

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:fitsSystemWindows="true"
    android:orientation="vertical">
    <FrameLayout
        android:id="@+id/main_Frame"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1">
    </FrameLayout>
    <ImageView
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:background="@color/spe"/>
    <RadioGroup
        android:id="@+id/main_menu"
        android:background="@color/menu"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">
        <RadioButton
            android:id="@+id/RB_discover"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:drawableTop="@drawable/main_menu_discover"
            android:drawableTint="@drawable/menu_color"
            android:gravity="center"
            android:text="@string/main_menu_discover"
            />
        <RadioButton
            android:id="@+id/RB_train"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/main_menu_train"
            android:drawableTint="@drawable/menu_color"
            android:gravity="center"
            android:text="@string/main_menu_train"
            />

        <RadioButton
            android:id="@+id/RB_social"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/main_menu_social"
            android:drawableTint="@drawable/menu_color"
            android:gravity="center"
            android:text="@string/main_menu_social"
            />

        <RadioButton
            android:id="@+id/RB_me"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/main_menu_me"
            android:drawableTint="@drawable/menu_color"
            android:gravity="center"
            android:text="@string/main_menu_me"
            />
    </RadioGroup>





</LinearLayout>

编写完布局文件可以达到以下界面

步骤2:编写代码实现界面跳转
1:创建4个fragment用于跳转不同界面
2:编写changemainFragment()方法监听底部导航变换时使用
3:利用FragmentTransaction的hide方法来隐藏界面，show方法来显示界面

public class MainActivity extends AppCompatActivity {

    private RadioGroup mainmenu;
    private MeFragment mMeFragment;
    private Discover_Fragment mDiscover_fragment;
    private SocialFragment mSocialFragment;
    private TrainFragment mTrainFragment;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        //底部导航监听
        changemainFragment(R.id.RB_discover);
        mainmenu = (RadioGroup) findViewById(R.id.main_menu);
        mainmenu.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                changemainFragment(checkedId);
            }
        });

    }


    public void hideAllFragment(FragmentTransaction transaction){
        if(mSocialFragment!=null){
            transaction.hide(mSocialFragment);
        }
        if(mTrainFragment!=null){
            transaction.hide(mTrainFragment);
        }
        if(mDiscover_fragment!=null){
            transaction.hide(mDiscover_fragment);
        }
        if(mMeFragment!=null){
            transaction.hide(mMeFragment);
        }
    }


    /***
     * 切换主fragment
     * 
     */
    public void changemainFragment(int checkedId) {
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();
        hideAllFragment(fragmentTransaction);
        switch (checkedId) {
            case R.id.RB_discover: {
                if(mDiscover_fragment == null) {
                    mDiscover_fragment = new Discover_Fragment();
                    fragmentTransaction.add(R.id.main_Frame, mDiscover_fragment);

                }
                else {
                    fragmentTransaction.show(mDiscover_fragment);
                }
                break;

            }
            case R.id.RB_me: {
                if(mMeFragment == null) {
                    mMeFragment = new MeFragment();
                    fragmentTransaction.add(R.id.main_Frame, mMeFragment);
                }
                else {
                    fragmentTransaction.show(mMeFragment);
                }
                break;

            }
            case R.id.RB_social: {
                if(mSocialFragment == null) {
                    mSocialFragment = new SocialFragment();
                    fragmentTransaction.add(R.id.main_Frame, mSocialFragment);

                }
                else {
                    fragmentTransaction.show(mSocialFragment);
                }

                break;

            }
            case R.id.RB_train: {
                if(mTrainFragment == null) {
                    mTrainFragment = new TrainFragment();
                    fragmentTransaction.add(R.id.main_Frame, mTrainFragment);
                }
                else {
                    fragmentTransaction.show(mTrainFragment);
                }
                break;

            }

        }
        fragmentTransaction.commit();
    }


}

最终效果截图（跳转显示的fragment为随意练手用的界面）

作者:林浩
原文链接:点击这里