首先，我们先来创建主界面的布局文件

<?XMl version="1.0" encoding="utf-8"?>
<RelativeLayout >"http://schemas.andROId.COM/apk/res/android"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:orientation="vertical">
    <FrameLayout
        android:id="@+id/fragment_container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/group_tab"/>
    <RadioGroup
        android:id="@+id/group_tab"
        android:layout_width="match_parent"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:background="#FBFBFB"
        android:orientation="horizontal">
        
        <RadioButton
            android:id="@+id/rb_watch"
            style="@style/main_tab_style"
            android:drawableTop="@drawable/select_tab_watch"
            android:text="高速全览"/>
            
            .......省略
            
        <RadioButton
            android:id="@+id/rb_event"
            style="@style/main_tab_style"
            android:checked="true"
            android:drawableTop="@drawable/select_tab_event"
            android:text="事件管理"/>
    </RadioGroup>
</RelativeLayout>

可以看到，我们将最后一个先设置为选中状态，在ActivITy中再进行状态的切换

四个RadioButton的属性大多都是一样的，所以抽取到styles

<style name="main_tab_style">
        <item name="android:layout_width">0dp</item>
        <item name="android:layout_height">match_parent</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@null</item>
        <item name="android:textSize">12sp</item>
        <item name="android:textColor">@drawable/select_tab_text_color</item>
        <item name="android:layout_marginTop">5dp</item>
        <item name="android:drawablePadding">3dp</item>
        <item name="android:gravity">center</item>
    </style>

还有drawableTop和text相应的Seletor
select_tab_bus.xML
这里只列出了一个，其他三个只是图片不同就不列出来了

<selector >"http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/tab_bus_PRe" android:state_Pressed="false" android:state_selected="true" />
    <item android:drawable="@drawable/tab_bus_pre" android:state_checked="true" android:state_pressed="false" />
    <item android:drawable="@drawable/tab_bus_nomal" />
</selector>

select_tab_text_color.xml

<selector >"http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="#2e9ed0"/>
    <!-- not selected -->
    <item android:state_checked="false" android:color="#B2B2B2"/>
</selector>

到这里我们的布局就准备好了，接下来开始编写Fragment与Activity的代码。

fragment代码很简单，如下，

public class MainExpresswayWatchFragment extends Fragment {
    @override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
         Bundle savedInstanceState) {
        View view = inflater.inflate(R.layout.fragment_common, container, false);
        TextView tvContent = (TextView) view.findViewById(R.id.tv_content);
        tvContent.setText("高速全览");
        return view;
    }

    @Override
    public void setMenuVisibility(boolean menuVisible) {
        super.setMenuVisibility(menuVisible);
        // 每个Fragment都需要实现`setMenuVisibility`来控制视图，
        // 当Fragment不可见的时候，需要隐藏相应的视图，不然会使界面重叠在一起。
        if (this.getView() != null) {
            this.getView().setVisibility(menuVisible ? View.VISIBLE : View.GONE);
        }
    }
}

接下来是Activity的代码，关键代码都有注释，我就不多说了...

public class MainActivity extends AppCompatActivity implements RadioGroup.OnCheckedChangeListener {
    private RadioGroup radioGroup;
    private FrameLayout fragmentContainer;

    // 是否第一次进入主界面
    private boolean isFirstEnter = true;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_radio_group_main);
        radioGroup = (RadioGroup) findViewById(R.id.group_tab);
        fragmentContainer = (FrameLayout) findViewById(R.id.fragment_container);

        radioGroup.setOnCheckedChangeListener(this);
    }

    @Override
    protected void onStart() {
        super.onStart();
        if (isFirstEnter) {
            isFirstEnter = false;
            // 准备显示界面的时候切换第一个RadioButton为选中状态
            radioGroup.check(R.id.rb_watch);
        }
    }

    @Override
    public void onCheckedChanged(RadioGroup radioGroup, int i) {
        int index = 0;
        switch (i) {
            case R.id.rb_watch:
                index = 0;
                break;
            case R.id.rb_bus_danger:
                index = 1;
                break;
            case R.id.rb_car:
                index = 2;
                break;
            case R.id.rb_event:
                index = 3;
                break;
        }
        // 从FragmentManager中查找Fragment，找不到就使用getItem获取
        Fragment fragment = (Fragment) fragments.instantiateItem(fragmentContainer, index);
        // 设置显示第一个Fragment
        fragments.setPrimaryItem(fragmentContainer, 0, fragment);
        // 提交事务
        fragments.finishUpdate(fragmentContainer);
    }

    // 使用FragmentStatePagerAdapter管理Fragment
    FragmentStatePagerAdapter fragments = new FragmentStatePagerAdapter(getSupportFragmentManager()) {
        @Override
        public Fragment getItem(int position) {
            Fragment fragment = null;
            switch (position) {
                case 0:
                    fragment = new MainExpresswayWatchFragment();
                    break;
                case 1:
                    fragment = new MainBusDangerFragment();
                    break;
                case 2:
                    fragment = new MainCarManageFragment();
                    break;
                case 3:
                    fragment = new MainEventDangerFragment();
                    break;
            }
            return fragment;
        }

        @Override
        public int getCount() {
            return 4;
        }
    };
}