ViewPage + RadioGroup + Fragment学习

底部是RadioGroup中RadioButton的切换。上面时ViewPage ，能够滑动，假设你们的需求是不须要滑动的话，那就直接用FrameLayout就能够了。

以下将会用两种方式实现。请大家看代码。

效果图：

方式一:ViewPage + RadioGroup+Fragment 能够左右滑动

1.RadioGroup设置监听setOnCheckedChangeListener，改变上面的四个Fragment

	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		// TODO Auto-generated method stub
		switch (checkedId) {
		case R.id.rb0:
			viewPager.setCurrentItem(0);
			break;
		case R.id.rb1:
			viewPager.setCurrentItem(1);
			break;
		case R.id.rb2:
			viewPager.setCurrentItem(2);
			break;
		case R.id.rb3:
			viewPager.setCurrentItem(3);
			break;
		}
	}

2.ViewPager设置监听setOnPageChangeListener。改变RadioButton的选中

	@Override
	public void onPageSelected(int position) {
		// TODO Auto-generated method stub
		switch (position) {
		case 0:
			if (radioGroup.getCheckedRadioButtonId() != R.id.rb0) {
				radioGroup.check(R.id.rb0);
			}
			break;
		case 1:
			if (radioGroup.getCheckedRadioButtonId() != R.id.rb1) {
				radioGroup.check(R.id.rb1);
			}
			break;
		case 2:
			if (radioGroup.getCheckedRadioButtonId() != R.id.rb2) {
				radioGroup.check(R.id.rb2);
			}
			break;
		case 3:
			if (radioGroup.getCheckedRadioButtonId() != R.id.rb3) {
				radioGroup.check(R.id.rb3);
			}
			break;
		}
	}

3.ViewPager适配器

public class ViewPagerAdapter extends FragmentPagerAdapter {

	private List<Fragment> fragments;

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

	@Override
	public Fragment getItem(int position) {
		// TODO Auto-generated method stub
		return fragments.get(position);
	}

	@Override
	public int getCount() {
		// TODO Auto-generated method stub
		return fragments.size();
	}

}

方式二:RadioGroup+Fragment

1.RadioGroup设置监听setOnCheckedChangeListener。改变上面的四个Fragment

	@Override
	public void onCheckedChanged(RadioGroup group, int checkedId) {
		switch (checkedId) {
		case R.id.rb0:
			manager.chReplaceFrag(fragment01, "fragment01", false);
			break;
		case R.id.rb1:
			manager.chReplaceFrag(fragment02, "fragment02", false);
			break;
		case R.id.rb2:
			manager.chReplaceFrag(fragment03, "fragment03", false);
			break;
		case R.id.rb3:
			manager.chReplaceFrag(fragment04, "fragment04", false);
			break;
		}
	}

2.假设你想要左右滑动，也是能够的，获取控件的实例，你要提出来。我这里是为了贴代码的完整性

	private float startx;
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		super.onTouchEvent(event);
		RadioButton rb0 = (RadioButton) findViewById(R.id.rb0);
		RadioButton rb1 = (RadioButton) findViewById(R.id.rb1);
		RadioButton rb2 = (RadioButton) findViewById(R.id.rb2);
		RadioButton rb3 = (RadioButton) findViewById(R.id.rb3);
		switch (event.getAction()) {
		case MotionEvent.ACTION_DOWN:
			startx = event.getX();
			break;
		case MotionEvent.ACTION_UP:
			float endx = event.getX();
			if (startx - endx > 100) {//右边
				switch (rg.getCheckedRadioButtonId()) {
				case R.id.rb0:
					rb1.performClick();
					break;
				case R.id.rb1:
					rb2.performClick();
					break;
				case R.id.rb2:
					rb3.performClick();
					break;
				case R.id.rb3:
					rb0.performClick();
					break;
				}
			}else if (endx - startx > 100 ) {
				switch (rg.getCheckedRadioButtonId()) {
				case R.id.rb0:
					rb3.performClick();
					break;
				case R.id.rb1:
					rb0.performClick();
					break;
				case R.id.rb2:
					rb1.performClick();
					break;
				case R.id.rb3:
					rb2.performClick();
					break;
				}
			}
			break;
		}
		return false;
	}

整个代码的布局设计：

1.FrameLayout+RadioGroup

<?xml version="1.0" encoding="utf-8"?

>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:orientation="vertical"
    android:background="@android:color/white"
    android:layout_height="match_parent">

    <FrameLayout
    android:id="@+id/fragment_container"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:layout_width="match_parent"/>

    <RadioGroup
    android:id="@+id/main_rg"
    android:layout_height="50dip"
    android:layout_width="match_parent"
    android:orientation="horizontal">
        <RadioButton
        android:id="@+id/rb0"
        android:checked="true"
        style="@style/main_tab_style"
        android:drawableTop="@drawable/tab_01_bg"
        android:text="精选"/>
        <RadioButton
        android:id="@+id/rb1"
        style="@style/main_tab_style"
        android:drawableTop="@drawable/tab_02_bg"
        android:text="分类"/>
        <RadioButton
        android:id="@+id/rb2"
        style="@style/main_tab_style"
        android:drawableTop="@drawable/tab_03_bg"
        android:text="投资"/>
        <RadioButton
        android:id="@+id/rb3"
        style="@style/main_tab_style"
        android:drawableTop="@drawable/tab_04_bg"
        android:text="我的"/>
    </RadioGroup>

</LinearLayout>

2.ViewPage+FrameLayout+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:background="@android:color/white"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
    android:id="@+id/viewpage"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:layout_width="match_parent"/>

    <RadioGroup
    android:id="@+id/main_rg"
    android:layout_height="50dip"
    android:layout_width="match_parent"
    android:orientation="horizontal">
        <RadioButton
        android:id="@+id/rb0"
        android:checked="true"
        style="@style/main_tab_style"
        android:drawableTop="@drawable/tab_01_bg"
        android:text="精选"/>
        <RadioButton
        android:id="@+id/rb1"
        style="@style/main_tab_style"
        android:drawableTop="@drawable/tab_02_bg"
        android:text="分类"/>
        <RadioButton
        android:id="@+id/rb2"
        style="@style/main_tab_style"
        android:drawableTop="@drawable/tab_03_bg"
        android:text="投资"/>
        <RadioButton
        android:id="@+id/rb3"
        style="@style/main_tab_style"
        android:drawableTop="@drawable/tab_04_bg"
        android:text="我的"/>
    </RadioGroup>

</LinearLayout>

3.文本颜色选择器

<?

xml version="1.0" encoding="utf-8"?

>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:color="@color/green_common"/>
    <item android:state_checked="false" android:color="@color/bg_gray_dark"/>
</selector>

4.背景图片选择器

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

这里仅仅是贴出了核心的代码，须要整个可执行的代码，请点击以下的连接

源代码下载地址：http://download.csdn.net/detail/pcaxb/8999891