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