Android中使用Fragment与RadioGroup实现页面布局切换
现在的APP主页面界面设计，一般采用的是几个按钮加上不同的Fragment来切换页面，看起来层次很清晰，让用户一目了然，下面就用Fragment和RadioGroup来实现页面之间的切换，界面设计如下图所示：
代码如下：
titlebar.xml(Titlebar标题栏)
<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
...
bottom_textcolor_drawable_selector.xml
<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
<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
android:id="@+id/fl_content"
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1" />
<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
<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
<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
<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
<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 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);
}
} 结束！！