Fragment+RadioButton实现点击切换页面效果

首先，我们需要在主布局文件中activity_main.xml 放一个容器，方便让fragment加入进去,底部导航栏使用RedioButton切换页面，每一个RadioButton都使用了选择器进行图片与字体的变化。

（下一篇+viewPage滑动）

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.test.activity.MainActivity" 
    android:weightSum="9">

   <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="7.5">

    </FrameLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1.5"
        android:gravity="center"
        android:orientation="horizontal">


        <RadioGroup
            android:id="@+id/radioGroup"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:orientation="horizontal">


            <RadioButton
                android:id="@+id/rbHome"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="right"
                android:layout_weight="1"
                android:button="@null"
                android:checked="true"
                android:drawableTop="@drawable/rabtn_a_selector"
                android:textColor="@drawable/rabtn_a_selector"
                android:gravity="center"
                android:text="我的"/>

            <RadioButton
                android:id="@+id/rbShop"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:button="@null"
                android:checked="false"
                android:drawableTop="@drawable/rabtn_b_selector"
                android:textColor="@drawable/rabtn_b_selector"
                android:gravity="center"
                android:text="发现"/>

            <RadioButton
                android:checked="false"
                android:id="@+id/rbMessage"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/rabtn_c_selector"
                android:textColor="@drawable/rabtn_c_selector"
                android:gravity="center"
                android:text="通信"/>

            <RadioButton
                android:checked="false"
                android:id="@+id/rbMine"
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_gravity="center"
                android:layout_weight="1"
                android:button="@null"
                android:drawableTop="@drawable/rabtn_d_selector"
                android:textColor="@drawable/rabtn_d_selector"
                android:gravity="center"
                android:text="消息"/>

        </RadioGroup>

    </LinearLayout>
</LinearLayout>

四个相同选择器文件rabtn_a_selector.xml

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

然后，在对应的MainActivity.java文件中实现点击切换（fragment的替换或隐藏二种方法如下）

package com.test.activity;

import com.test.fragment.FragmentA;
import com.test.fragment.FragmentB;
import com.test.fragment.FragmentC;
import com.test.fragment.FragmentD;

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentTransaction;
import android.util.Log;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class MainActivity extends FragmentActivity {
    private FragmentA f_a;
    private FragmentB f_b;
    private FragmentC f_c;
    private FragmentD f_d;
    private Fragment[] mFragments;
    private int mIndex;
    private RadioGroup radioGroup;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		initView();
		initFragment();//方法一，默认第一fragment
		//changeFragment(new FragmentA().getFragmentA());//方法二，默认第一fragment
	}

	  private void initView() {
		  radioGroup = (RadioGroup)findViewById(R.id.radioGroup);
		  radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
			@Override
			public void onCheckedChanged(RadioGroup group, int arg1) {
			       //遍历RadioGroup 里面所有的子控件。
                for (int index = 0; index < group.getChildCount(); index++) {
                    //获取到指定位置的RadioButton
                    RadioButton rb = (RadioButton)group.getChildAt(index);
                  //如果被选中
                    if (rb.isChecked()) {  
                    	setIndexSelected(index);  
                    	//setIndexSelectedTwo(index);  //方法二
                        break;
                    }
                }
				
			}
		});
		
	}
	//方法一，默认第一fragment
	private void initFragment() {
	        f_a =new FragmentA();
	        f_b =new FragmentB();
	        f_c =new FragmentC();
	        f_d =new FragmentD();
	        //添加到数组
	        mFragments = new Fragment[]{f_a,f_b,f_c,f_d};
	        //开启事务
	        FragmentManager    fragmentManager = getSupportFragmentManager();
	        FragmentTransaction ft= fragmentManager.beginTransaction();
	        //添加首页
	        ft.add(R.id.content,f_a).commit();
	        //默认设置为第0个
	        setIndexSelected(0);
	    }
	   //方法一，选中显示与隐藏
	  private void setIndexSelected(int index) {

	        if(mIndex==index){
	            return;
	        }
	        FragmentManager    fragmentManager = getSupportFragmentManager();
	        FragmentTransaction ft= fragmentManager.beginTransaction();

	        //隐藏
	        ft.hide(mFragments[mIndex]);
	        //判断是否添加
	        if(!mFragments[index].isAdded()){
	            ft.add(R.id.content,mFragments[index]).show(mFragments[index]);
	        }else {
	            ft.show(mFragments[index]);
	        }

	        ft.commit();
	        //再次赋值
	        mIndex=index;

	    }
	   //方法二，选中替换
	  private void setIndexSelectedTwo(int index) {
		  switch (index) {
		     case 0:
		    	 changeFragment(new FragmentA().getFragmentA());
			    break;
		     case 1:
		    	 changeFragment(new FragmentB().getFragmentB());
			    break;
		     case 2:
		    	 changeFragment(new FragmentC().getFragmentC());
			    break;
		     case 3:
		    	 changeFragment(new FragmentD().getFragmentD());
			    break;
			  

		default:
			break;
		}
	  }
	  
	////方法二，默认第一fragment
	  private void changeFragment(Fragment fm) {  
	        FragmentManager supportFragmentManager = getSupportFragmentManager();  
	        FragmentTransaction transaction = supportFragmentManager.beginTransaction();  
	        transaction.replace(R.id.content, fm);  
	        transaction.commit();  
	    }  
	
}

四个相同的Fragment文件，对应的xml就放了一个文本就不贴出来了

package com.test.fragment;

import com.test.activity.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class FragmentA extends Fragment{
  private View view;
	// 单例(方法二)
	private static FragmentA fa;
	public static FragmentA getFragmentA() {
		if (fa == null) {
			fa = new FragmentA();
		}
		return fa;
	}
  @Override
  public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState) {
	   view= inflater.inflate(R.layout.fragment_a, container, false);
      return   view;
  }
  
}

效果图如下:

Fragment+RadioButton实现点击切换页面效果

猜你喜欢