Android之底部菜单栏的实现

在我们的项目中，基本上都会用到底部菜单栏，通过点击不同的底部菜单导航到不同的Fragment，布局采用的是RadioButton+Fragment,先看与一下效果（如下图）

 

因为手机没有录屏，所有不能展示效果，但总算是实现了

代码也很简单，还不到百行，废话少说，上代码和详细的步骤

（1）第一步：UI布局，底层一个Radiogroup和四个RadioButton，中间一个Fragment布局，radiobutton的样式我新建了一个style，代码也会在以下给出

<RelativeLayout
    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:layout_height="match_parent"
    tools:context="com.example.administrator.mytest.activity.MainActivity">

    <FrameLayout
        android:id="@+id/fragment"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginBottom="60dp">

    </FrameLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:layout_above="@+id/ll_main_radio"
        android:background="@color/main_rb_bg"/>

    <LinearLayout
        android:id="@+id/ll_main_radio"
        android:layout_width="match_parent"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:paddingTop="5dp">

        <RadioGroup
            android:id="@+id/rg_main"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:orientation="horizontal">

            <RadioButton
                android:id="@+id/rb_main"
                style="@style/rb_style"
                android:checked="true"
                android:drawableTop="@drawable/rb_main_bg"
                android:text="@string/rb_main"/>

            <RadioButton
                android:id="@+id/rb_message"
                style="@style/rb_style"
                android:drawableTop="@drawable/rb_message_bg"
                android:text="@string/rb_message"/>

            <RadioButton
                android:id="@+id/rb_find"
                style="@style/rb_style"
                android:drawableTop="@drawable/rb_dynamic_bg"
                android:text="@string/rb_find"/>

            <RadioButton
                android:id="@+id/rb_my"
                style="@style/rb_style"
                android:drawableTop="@drawable/rb_my_bg"
                android:text="@string/rb_my"/>
        </RadioGroup>


    </LinearLayout>

</RelativeLayout>

<style name="rb_style">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_weight">1</item>
        <item name="android:gravity">center</item>
        <item name="android:button">@null</item>
        <item name="android:textColor">@color/main_rb_font</item>
        <item name="android:layout_height">wrap_content</item>
</style>

 （2）第二步：新建四个fragment，继承fragment，并绑定布局文件，代码如下

public class MessageFragment extends Fragment {



    private static MessageFragment mf;
    //单例模式
    public static MessageFragment getMessageFragment()
    {
        if(mf == null){
            mf = new MessageFragment();
        }
        return mf;
    }


    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_message ,container, false);
        return view;
    }
}

 （3）第三步：回到Main_Activity,初始化radiogroup按钮，并添加事件，其中

       getChildCount():获取按钮的总数
       getChildAt():获取子按钮

rg_main.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {
            @Override
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                for (int i = 0;i<rg_main.getChildCount();i++){
                    RadioButton rb = (RadioButton)group.getChildAt(i);
                    if(rb.isChecked()){
                        setIndexSelectedTwo(i);
                        break;
                    }
                }
            }
        });

最关键的步骤，开启事务，加载fragment布局 

 private void changeFragment(Fragment fragment)
    {
        FragmentManager fragmentManager = getSupportFragmentManager();//开启事务
        FragmentTransaction transaction = fragmentManager.beginTransaction();
        transaction.replace(R.id.fragment , fragment);
        transaction.commit();
    }

最后一步，通过判断用户单击了哪个radiobutton按钮并通过setIndexSelected（）方法来加载fragment

 //通过index判断当前加载哪个界面
    public void setIndexSelected(int index)
    {
        switch (index)
        {
            case 0:
                changeFragment(new MainFragment().getMainFragment());
                break;
            case 1:
                changeFragment(new MessageFragment().getMessageFragment());
                break;
            case 2:
                changeFragment(new FindFragment().getFindFragment());
                break;
            case 3:
                changeFragment(new MyFragment().getMyFragment());
                break;
            default:
                break;
        }
    }

至此，底部菜单栏就已经做好了，第一篇博客，希望在CSDN的小伙伴们能更加开心地学习Android并持续坚持，同时，这番话也是对自己的一个要求，希望技术能一直进步，谢谢！