使用radiobutton与fragment实现底部导航栏

最近在学习android，在开发中需要实现一个底部导航栏功能，与微信底部导航类似。

效果图如下：

 

网上查看了很多资料，并没有发现相关控件（可能本人是个菜鸟级别的）。

于是选用了网上较流行的一种方式实现。那就是采用radiobutton+fragment的方式实现。

原理很简单：在窗口底部放上一排radiobutton，通过StateListDrawable设置按钮状态变化的显示效果，通过监控点击按钮事件，为窗口添加fragment。

以下是主要的实现步骤：

1.窗口布局

外层采用RelativeLayout布局，内层放入一个FrameLayout与一个LinearLayout布局,LinearLayout放置在窗口底部，在其内部放入radiogroup及radiobutton

 

FrameLayout 配置代码

    <FrameLayout
        android:layout_height="fill_parent"
        android:layout_width="fill_parent"
        android:orientation="vertical"
        android:layout_above="@+id/linearLayout"
        android:id="@+id/main_fragment">

    </FrameLayout>

 LinearLayout布局代码

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

 radiogroup及radiobutton部分代码

<RadioGroup
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal">

            <RadioButton//该配置来源于网上，直接使用即可
                android:id="@+id/bt_bottom_near"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="1"
                android:background="@android:color/transparent"
                android:button="@null"
                android:checked="true"
                android:drawableTop="@drawable/near_bt_selector"//设置背景图片变换效果
                android:gravity="center_horizontal|bottom"
                android:paddingTop="2dp"
                android:text="@string/bt_bottom_near"
                android:textColor="@drawable/bottom_bt_text_color" />//设置字体变换效果
  ......

 near_bt_selector.xml 代码

<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true"
        android:drawable="@drawable/near_active">//选中状态显示效果
    </item>
    <item android:state_checked="false"
        android:drawable="@drawable/near_black"></item>//未被选中样式效果
</selector>

 bottom_bt_text_color.xml代码

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

    <item android:state_checked="true" android:color="@android:color/holo_orange_dark"/>//选中颜色
    <item android:state_checked="false" android:color="@android:color/black"/>//未被选中颜色
    <item android:color="@android:color/black"/>//初始颜色

</selector>

 到这里，xml的配置都已经做好了。

2.实现打开fragment，fragment之间切换，定义按钮的click事件

主要代码如下，主要在click事件里打开一个fragment。

@Override
            public void onClick(View v) {
                MsgFragment msgFragment = new MsgFragment();//新建fragment实例
                Bundle args = new Bundle();//绑定参数
                args.putString("args", getResources().getString(R.string.bt_bottom_msg));
                msgFragment.setArguments(args);
                fragmentManager.beginTransaction().replace(R.id.main_fragment, msgFragment).commit();//记得提交
            }

 3.fragment类的实现，需要继承Fragment基类（需要注意版本问题）

主要代码

 @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_msg, container, false);//获得视图
        tvMsgShow = (TextView) view.findViewById(R.id.msgShow);
        tvMsgShow.setText(getArguments().getString("args"));//显示参数值
        return view;
    }

 OK，这里主要的功能都已实现。代码只提供了部分，但是相信大家还是能根据提示完成自己的功能。