Android底部导航栏实现（二）之RadioGroup

这里简单记录一下Android底部导航栏通过RadioGroup+Fragment的实现。

布局：

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

    <include layout="@layout/fragment_content"/>

    <View
        android:layout_width="match_parent"
        android:layout_height="1px"
        android:background="@color/grey_300"
        android:elevation="20dp"/>

    <RadioGroup
        android:id="@+id/radio_group"
        android:layout_width="match_parent"
        android:layout_height="56dp"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:orientation="horizontal">

        <RadioButton
            android:id="@+id/rb_home"
            style="@style/radiobutton_style"
            android:checked="true"
            android:drawableTop="@drawable/radiobutton_bg_home"
            android:text="@string/item_home"
            />

        <RadioButton
            android:id="@+id/rb_location"
            style="@style/radiobutton_style"
            android:drawableTop="@drawable/radiobutton_bg_location"
            android:text="@string/item_location"/>

        <RadioButton
            android:id="@+id/rb_like"
            style="@style/radiobutton_style"
            android:drawableTop="@drawable/radiobutton_bg_like"
            android:text="@string/item_like"/>

        <RadioButton
            android:id="@+id/rb_me"
            style="@style/radiobutton_style"
            android:drawableTop="@drawable/radiobutton_bg_me"
            android:text="@string/item_person"/>

    </RadioGroup>
</RelativeLayout>

这里的drawableTop使用了状态选择器

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/home_fill" android:state_checked="true"/>
    <item android:drawable="@drawable/home"/>
</selector>

style

   <style name="radiobutton_style">
        <item name="android:layout_width">0dp</item>
        <item name="android:padding">3dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@null</item><!--去除RadioButton默认带的圆点-->
        <item name="android:gravity">center</item>
        <item name="android:textSize">12sp</item>
    </style>

代码

初始化的代码就不记录了，都是一些findViewById,实现过程无非就是对RadioButton进行监听一下：

mRadioGroup.setOnCheckedChangeListener(this);


    @Override
    public void onCheckedChanged(RadioGroup group, int checkId) {
        FragmentTransaction transaction = getFragmentManager().beginTransaction();
        switch (checkId) {
            case R.id.rb_home:
                if (mHomeFragment == null) {
                    mHomeFragment = HomeFragment.newInstance(getString(R.string.item_home));
                }
                transaction.replace(R.id.sub_content, mHomeFragment);
                break;
            case R.id.rb_location:
                if (mLocationFragment == null) {
                    mLocationFragment = LocationFragment.newInstance(getString(R.string.item_location));
                }
                transaction.replace(R.id.sub_content, mLocationFragment);
                break;
            case R.id.rb_like:
                if (mLikeFragment == null) {
                    mLikeFragment = LikeFragment.newInstance(getString(R.string.item_like));
                }
                transaction.replace(R.id.sub_content, mLikeFragment);
                break;
            case R.id.rb_me:
                if (mPersonFragment == null) {
                    mPersonFragment = PersonFragment.newInstance(getString(R.string.item_person));
                }
                transaction.replace(R.id.sub_content, mPersonFragment);
                break;
        }
        setTabState();//设置状态
        transaction.commit();
    }

状态的设置

    private void setTabState() {
        setHomeState();
        setLocationState();
        setLikeState();
        setMeState();

    }

    /**
     * set tab home state
     */
    private void setHomeState() {
        if (mRadioHome.isChecked()) {
            mRadioHome.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
        } else {
            mRadioHome.setTextColor(ContextCompat.getColor(getActivity(), R.color.black));
        }
    }

    private void setLocationState() {
        if (mRadioLocation.isChecked()) {
            mRadioLocation.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
        } else {
            mRadioLocation.setTextColor(ContextCompat.getColor(getActivity(), R.color.black));
        }
    }

    private void setLikeState() {
        if (mRadioLike.isChecked()) {
            mRadioLike.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
        } else {
            mRadioLike.setTextColor(ContextCompat.getColor(getActivity(), R.color.black));
        }
    }

    private void setMeState() {
        if (mRadioMe.isChecked()) {
            mRadioMe.setTextColor(ContextCompat.getColor(getActivity(), R.color.colorPrimary));
        } else {
            mRadioMe.setTextColor(ContextCompat.getColor(getActivity(), R.color.black));
        }
    }

这里需要注意的是， setDefaultFragment();我写在onCreateVew里面并没有生效。这里我写在了onStart()方法里了。

  @Override
    public void onStart() {
        setDefaultFragment();//写在onCreateView里面，当页面跑到其他Fragment再回来就不会生效
        super.onStart();
    }

说明：这几篇文章没有过多的文字叙述，因为这些东西也不是很难，而且都是常用的，相信很多人都了如指掌了，多说亦是废话，直接上代码看的反而更清楚。

DownLoad Demo