RadioButton和ViewPager实现底部菜单栏

第一步：XMl布局

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.jiyun.myapplication.ui.MainActivity">

    <RadioGroup
        android:id="@+id/radiogroup"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        android:background="#f5c182">

        <RadioButton
            android:id="@+id/rb_chat"
            android:drawableTop="@drawable/rb_chat_selecto"
            android:checked="true"
            android:text="主页"
            style="@style/bottom_tab"/>
        <RadioButton
            android:id="@+id/rb_contacts"
            android:drawableTop="@drawable/rb_contacts_selecto"
            android:text="发现"
            style="@style/bottom_tab"/>
        <RadioButton
            android:id="@+id/rb_discovery"
            android:drawableTop="@drawable/rb_discovery_selector"
            android:text="成长"

            style="@style/bottom_tab"/>
        <RadioButton
            android:id="@+id/rb_me"
            android:drawableTop="@drawable/rb_me_selector"
            android:text="我的"
            style="@style/bottom_tab"/>
    </RadioGroup>
    <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@id/radiogroup"
        />

</RelativeLayout>

第二步：在drawable定义rb_chat_selecto，rb_contacts_selecto，rb_discovery_selector，rb_me_selector

<?xml version="1.0" encoding="utf-8"?>
//d和dd是图片
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/d" android:state_checked="true"/>
    <item android:drawable="@drawable/d" android:state_focused="true"/>
    <item android:drawable="@drawable/d" android:state_pressed="true"/>
    <item android:drawable="@drawable/dd"/>
</selector>

第三步：在Values里面定义style.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="bottom_tab">
        <item name="android:layout_width" >0dp</item>
        <item name="android:layout_height" >wrap_content</item>
        <item name="android:layout_weight" >1</item>
        <item name="android:text" >0dp</item>
        <item name="android:gravity" >center</item>
        <item name="android:textColor" >@drawable/set_button_tab_text</item>
        <item name="android:padding" >8dp</item>
        <item name="android:button" >@null</item>
    </style>
</resources>

第四步：在drawable定义中定义set_button_tab_text

<?xml version="1.0" encoding="utf-8"?>
//设置底部字体颜色点击后的状态
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="#F2616C" android:state_checked="true"/>
    <item android:color="#F2616C" android:state_focused="true"/>
    <item android:color="#F2616C" android:state_pressed="true"/>
    <item android:color="#bebcbc"/>
</selector>

第四步：编写Fragment适配器

public class FragmentAdapter extends FragmentPagerAdapter {
    private List<Fragment> list;

    public FragmentAdapter(FragmentManager fm, List<Fragment> list) {
        super(fm);
        this.list = list;
    }

    @Override
    public Fragment getItem(int position) {
        return list.get(position);
    }

    @Override
    public int getCount() {
        return list.size();
    }
}

第五步：在Activity中编写

public class MainActivity extends BaseActivity {
    private ViewPager mPager;
    private RadioGroup mGroup;
    private RadioButton rbChat,rbContacts,rbDiscovery,rbMe;
    private List<Fragment> fragments;

    @Override
    protected void initData() {
        Fragment1 fragment1 = new Fragment1();
        Fragment2 fragment2 = new Fragment2();
        Fragment3 fragment3 = new Fragment3();
        Fragment4 fragment4 = new Fragment4();
        fragments = new ArrayList<>();
        fragments.add(fragment1);
        fragments.add(fragment2);
        fragments.add(fragment3);
        fragments.add(fragment4);
        FragmentAdapter fragmentAdapter=new FragmentAdapter(getSupportFragmentManager(),fragments);
        mPager.setAdapter(fragmentAdapter);
        mPager.setCurrentItem(0);
        //ViewPager页面切换监听
        mPager.setOnPageChangeListener(new myOnPageChangeListener());
    }

    @Override
    protected void initView() {
        mPager=(ViewPager)findViewById(R.id.viewPager);
        mGroup=(RadioGroup)findViewById(R.id.radiogroup);
        rbChat=(RadioButton)findViewById(R.id.rb_chat);
        rbContacts=(RadioButton)findViewById(R.id.rb_contacts);
        rbDiscovery=(RadioButton)findViewById(R.id.rb_discovery);
        rbMe=(RadioButton)findViewById(R.id.rb_me);
        //RadioGroup选中状态改变监听
        mGroup.setOnCheckedChangeListener(new myCheckChangeListener());
    }

    @Override
    protected int getLayout() {
        return R.layout.activity_main;
    }

    private class myCheckChangeListener implements RadioGroup.OnCheckedChangeListener {
        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId){
                case R.id.rb_chat:
                    //ViewPager显示第一个Fragment且关闭页面切换动画效果
                    mPager.setCurrentItem(0,false);
                    break;
                case R.id.rb_contacts:
                    mPager.setCurrentItem(1,false);
                    break;
                case R.id.rb_discovery:
                    mPager.setCurrentItem(2,false);
                    break;
                case R.id.rb_me:
                    mPager.setCurrentItem(3,false);
                    break;
            }
        }
    }
    /**
     *ViewPager切换Fragment,RadioGroup做相应变化
     */
    private class myOnPageChangeListener implements ViewPager.OnPageChangeListener {
        @Override
        public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

        }

        @Override
        public void onPageSelected(int position) {
            switch (position) {
                case 0:
                    mGroup.check(R.id.rb_chat);
                    break;
                case 1:
                    mGroup.check(R.id.rb_contacts);
                    break;
                case 2:
                    mGroup.check(R.id.rb_discovery);
                    break;
                case 3:
                    mGroup.check(R.id.rb_me);
                    break;
            }
        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    }