Android中使用Fragment与RadioGroup实现页面布局切换

现在的APP主页面界面设计，一般采用的是几个按钮加上不同的Fragment来切换页面，看起来层次很清晰，让用户一目了然，下面就用Fragment和RadioGroup来实现页面之间的切换，界面设计如下图所示：
这里写图片描述

代码如下：

titlebar.xml(Titlebar标题栏)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="50dp"
    android:background="@android:color/holo_blue_light"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="标题"
        android:textColor="@android:color/white"
        android:textSize="20sp" />
</LinearLayout>

styles.xml

<resources>
    ...
    <style name="bottom_tag_style" >
        <!-- Customize your theme here. -->
        <item name="android:layout_width">wrap_content</item>
        <item name="android:layout_height">wrap_content</item>
        <item name="android:layout_weight">1</item>
        <item name="android:button">@android:color/transparent</item>
        <item name="android:drawablePadding">3dp</item>
        <item name="android:gravity">center</item>
        <item name="android:textColor">@drawable/bottom_textcolor_drawable_selector</item>
        <item name="android:textSize">10sp</item>
    </style>
</resources>

bottom_textcolor_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:color="#363636"/>
    <item android:state_checked="true" android:color="#3097FD"/>
</selector>

activity_main.xml
主页面的布局，采用的是线性布局，头部是标题栏，中间是FrameLayout并且设置权重1，用来显示内容，底部是RadioGroup

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 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/titlebar" />

    <!--FrameLayout-->
    <FrameLayout
        android:id="@+id/fl_content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1" />

    <!--底部的RadioGroup-->
    <RadioGroup
        android:id="@+id/rg_main"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#11000000"
        android:gravity="center_vertical"
        android:orientation="horizontal"
        android:padding="5dp">
        <RadioButton
            android:id="@+id/rb_common_frame"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_common_frame_drawable_selector"
            android:text="框架" />
        <RadioButton
            android:id="@+id/rb_thirdparty"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_thirdparty_drawable_selector"
            android:text="第三方"/>
        <RadioButton
            android:id="@+id/rb_custom"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_custom_drawable_selector"
            android:text="自定义控件" />
        <RadioButton
            android:id="@+id/rb_other"
            style="@style/bottom_tag_style"
            android:drawableTop="@drawable/rb_other_drawable_selector"
            android:text="其他" />
    </RadioGroup>
</LinearLayout>

rb_common_frame_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@drawable/ic_tab_video"/>
<item android:state_checked="true" android:drawable="@drawable/ic_tab_video_press"/>
</selector>

rb_thirdparty_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/ic_tab_audio"/>
    <item android:state_checked="true" android:drawable="@drawable/ic_tab_audio_press"/>
</selector>

rb_custom_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/ic_tab_netvideo"/>
    <item android:state_checked="true" android:drawable="@drawable/ic_tab_netvideo_press"/>
</selector>

rb_other_drawable_selector.xml

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/ic_tab_netaudio"/>
    <item android:state_checked="true" android:drawable="@drawable/ic_tab_netaudio_press"/>
</selector>

创建BaseFragment.java

/**
 * 作用：基类，公共类
 * CommonFrameFragment，ThirdPartyFragment,CustomFragment,OtherFragment等都要继承该类
 */
public abstract class BaseFragment extends Fragment {
    /**
     * 上下文
     */
    protected Context mContext;
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        mContext = getActivity();
    }

    @Nullable
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        return initView();
    }

    /**
     * 强制子类重写，实现子类特有的ui
     * @return
     */
    protected abstract View initView();

    @Override
    public void onActivityCreated(@Nullable Bundle savedInstanceState) {
        super.onActivityCreated(savedInstanceState);

        initData();
    }

    /**
     * 当孩子需要初始化数据，或者联网请求绑定数据，展示数据的 等等可以重写该方法
     */
    protected void initData() {

    }
}

定义4个子页面

1、CommonFrameFragment.java

public class CommonFrameFragment extends BaseFragment {
    private TextView textView;

    private static final String TAG = CommonFrameFragment.class.getSimpleName();//得到“CommonFrameFragment”

    @Override
    protected View initView() {
        Log.e(TAG,"框架Fragment页面被初始化了...");
        textView = new TextView(mContext);
        textView.setTextSize(20);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        return textView;
    }

    @Override
    protected void initData() {
        super.initData();
        Log.e(TAG, "框架Fragment数据被初始化了...");
        textView.setText("框架");
    }
}

2、ThirdPartyFragment.java

/**
 * 作用：第三方Fragment
 */
public class ThirdPartyFragment extends BaseFragment {
    private static final String TAG = ThirdPartyFragment.class.getSimpleName();//得到"ThirdPartyFragment"
    private TextView textView;

    @Override
    protected View initView() {
        Log.e(TAG,"第三方Fragment页面被初始化了...");
        textView = new TextView(mContext);
        textView.setTextSize(20);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        return textView;
    }

    @Override
    protected void initData() {
        super.initData();
        Log.e(TAG, "第三方Fragment数据被初始化了...");
        textView.setText("第三方页面");
    }
}

3、CustomFragment.java

/**
 * 作用：自定义Fragment
 */
public class CustomFragment extends BaseFragment {
    private static final String TAG = CustomFragment.class.getSimpleName();//得到"CustomFragment"
    private TextView textView;

    @Override
    protected View initView() {
        Log.e(TAG,"自定义Fragment页面被初始化了...");
        textView = new TextView(mContext);
        textView.setTextSize(20);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        return textView;
    }

    @Override
    protected void initData() {
        super.initData();
        Log.e(TAG, "自定义Fragment数据被初始化了...");
        textView.setText("自定义页面");
    }
}

4、OtherFragment.java

/**
 * 作用：其他Fragment
 */
public class OtherFragment extends BaseFragment {
    private static final String TAG = OtherFragment.class.getSimpleName();//得到"OtherFragment"
    private TextView textView;

    @Override
    protected View initView() {
        Log.e(TAG,"其他Fragment页面被初始化了...");
        textView = new TextView(mContext);
        textView.setTextSize(20);
        textView.setGravity(Gravity.CENTER);
        textView.setTextColor(Color.RED);
        return textView;
    }

    @Override
    protected void initData() {
        super.initData();
        Log.e(TAG, "其他Fragment数据被初始化了...");
        textView.setText("其他页面");
    }
}

MainActivity.java(主页面)

/**
 * 作用：主页面
 */
//来回切换，继承FragmentActivity
public class MainActivity  extends FragmentActivity{
    private RadioGroup mRg_main;
    private List<BaseFragment> mBaseFragment; //集合

    /**
     * 选中的Fragment的对应的位置
     */
    private int position;

    /**
     * 上次切换的Fragment
     */
    private Fragment mContent;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //初始化View
        initView();
        //初始化Fragment
        initFragment();
        //设置RadioGroup的监听
        setListener();
    }

    private void setListener() {
        mRg_main.setOnCheckedChangeListener(new MyOnCheckedChangeListener());
        //设置默认选中框架页面
        mRg_main.check(R.id.rb_common_frame);
    }

    class MyOnCheckedChangeListener implements RadioGroup.OnCheckedChangeListener{

        @Override
        public void onCheckedChanged(RadioGroup group, int checkedId) {
            switch (checkedId){
                case R.id.rb_common_frame://框架
                    position = 0;
                    break;
                case R.id.rb_thirdparty://第三方
                    position = 1;
                    break;
                case R.id.rb_custom://自定义
                    position = 2;
                    break;
                case R.id.rb_other://其他
                    position = 3;
                    break;
                default: //默认第一个(框架)
                    position = 0;
                    break;
            }

            //根据位置得到对应的Fragment
            BaseFragment to = getFragment();
            //替换到Fragment
            switchFrament(mContent,to);
        }
    }

    /**
     *
     * @param from 刚显示的Fragment,马上就要被隐藏了
     * @param to 马上要切换到的Fragment，一会要显示
     */
    private void switchFrament(Fragment from,Fragment to) {
        if(from != to){ //才切换
            mContent = to;
            FragmentTransaction ft = getSupportFragmentManager().beginTransaction(); //开启事务
            //判断to有没有被添加
            if(!to.isAdded()){//to没有被添加
                //1.from隐藏
                if(from != null){
                    ft.hide(from);
                }
                //2.添加to
                if(to != null){
                    ft.add(R.id.fl_content,to).commit();
                }
            }else{ //to已经被添加
                //1.from隐藏
                if(from != null){
                    ft.hide(from);
                }
                //2.显示to
                if(to != null){
                    ft.show(to).commit();
                }
            }
        }
    }

    /**
     * 根据位置得到对应的Fragment
     * @return
     */
    private BaseFragment getFragment() {
        BaseFragment fragment = mBaseFragment.get(position);
        return fragment;
    }

    private void initFragment() {
        mBaseFragment = new ArrayList<>();
        mBaseFragment.add(new CommonFrameFragment());//框架Fragment
        mBaseFragment.add(new ThirdPartyFragment());//第三方Fragment
        mBaseFragment.add(new CustomFragment());//自定义控件Fragment
        mBaseFragment.add(new OtherFragment());//其他Fragment
    }

    private void initView() {
        setContentView(R.layout.activity_main);
        mRg_main = (RadioGroup) findViewById(R.id.rg_main);
    }
}

结束！！