Android 使用ViewPager和RadioGroup配合Fragment实现标签页，可点击按钮切换、滑动切换。

本人Android新手，很多东西都是现学现卖。。。模仿大神们，分享一下自己的解决办法，也做个记录。大家认为有什么问题随时沟通，一般你都是对的=。=

最近做的项目中需要实现标签页，网上最常见的TabHost和TabWeight的方法，试了一下是可以实现标签页切换的。但不是很好用，不知道为什么界面上的按钮可以看到触发了按下抬起效果，但是没有收到click事件回调，所有按钮都失灵了，跳转另外的子页面也跳转不过去（应该是获取不到点击事件造成的），而且还需要做其他处理（网上说需要ActivityGroup）。所以放弃了传统的TabHost，使用ViewPager和RadioGroup配合Fragment实现标签页。如果有哪位兄弟知道这是为什么，请一定教教我，多谢Orz！

主体思路：ViewPager每一页存放一个Fragment，每个Fragment是一个要显示的标签页。RadioGroup和RadioButton实现顶部或底部的标签按钮（RelativeLayout很好实现）。ViewPager和RadioGroup是联动的，ViewPager切换时，根据回调，调整RadioGroup中Button的checked状态；点击RadioGroup中的按钮时，操作ViewPager滑动到指定的index，也就是想要的页面Fragment。改变一个，根据回调修改另一个。以实现标签页的效果。

主Activity继承自FragmentActivity，引用main.xml，初始化ViewPager和RadioGroup，用一个数组存放所有的RadioButton，当ViewPager的index修改时，根据index修改数组中对应按钮的checked状态。再一个数组存放所有的Fragment，这个数组的作用是为了传给ViewPager的Adapter使用。

有的同学看到Fragment就头疼，感觉很难很复杂的样子，其实跟Activity有很多是相似的，在这个项目中，直接看成Activity也是可以的。在onCreateView中初始化界面的东西就可以了，跟onCreate差不多……

思路就是这样，很简单，下边是代码。

1.mian.xml布局（标签在底部）

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >

<RadioGroup
android:id="@+id/radio_group"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:padding="10dp"
android:orientation="horizontal" >

<RadioButton
android:id="@+id/radio_button_one"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:checked="true"
android:gravity="center"
android:background="@drawable/radio_btn_one_selector" />

<RadioButton
android:id="@+id/radio_button_two"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:layout_marginLeft="10dp"
android:button="@null"
android:background="@drawable/radio_btn_two_selector" />

</RadioGroup>

<android.support.v4.view.ViewPager
android:id="@+id/vp_fragment_tab"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_above="@id/radio_group" />

</RelativeLayout>

2.TabFragmentActivity

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentStatePagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class MainFragmentActivity extends FragmentActivity {

public static final int FRAGMENT_COUNT = 2;
public static final int FRAGMENT_INDEX_ONE = 0;
public static final int FRAGMENT_INDEX_TWO = 1;

private RadioGroup mRadioGroup;
private RadioButton[] mRadioButtons = new RadioButton[FRAGMENT_COUNT];
private ViewPager mViewPager;
private Fragment[] mFragments = new Fragment[FRAGMENT_COUNT];

@Override
protected void onCreate(Bundle arg0) {
super.onCreate(arg0);
setContentView(R.layout.activity_fragment_tab);

initView();
}

private void initView(){
mRadioGroup = (RadioGroup) findViewById(R.id.radio_group);
setRadioGroupListener();

mRadioButtons[FRAGMENT_INDEX_ONE] = (RadioButton) findViewById(R.id.radio_button_one);
mRadioButtons[FRAGMENT_INDEX_TWO] = (RadioButton) findViewById(R.id.radio_button_two);

mFragments[FRAGMENT_INDEX_ONE] = new OneFragment();
mFragments[FRAGMENT_INDEX_TWO] = new TwoFragment();

mViewPager = (ViewPager) findViewById(R.id.vp_fragment_tab);
FragmentStatePagerAdapter paperAdapter = new FragmentStatePagerAdapter(getSupportFragmentManager()) {

@Override
public int getCount() {
return mFragments.length;
}

@Override
public Fragment getItem(int arg0) {
return mFragments[arg0];
}
};
mViewPager.setAdapter(paperAdapter);
mViewPager.setOnPageChangeListener(new OnPageChangeListener() {
@Override
public void onPageSelected(int arg0) {
mRadioGroup.setOnCheckedChangeListener(null);
mRadioButtons[arg0].setChecked(true);
setRadioGroupListener();
}

@Override
public void onPageScrolled(int arg0, float arg1, int arg2) {
}

@Override
public void onPageScrollStateChanged(int arg0) {
}
});
}

private void setRadioGroupListener() {
mRadioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener() {
@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {
switch (checkedId) {
case R.id.radio_button_one:
mViewPager.setCurrentItem(0);
break;
case <span style="font-family: Arial, Helvetica, sans-serif;">R.id.radio_button_two</span><span style="font-family: Arial, Helvetica, sans-serif;">:</span>
mViewPager.setCurrentItem(1);
break;
default:
break;

4000
}
}
});
}
}

3.Fragment部分，这是每个标签页，内部的内容加载一个xml就可以了。跟activity一样的操作。

public class OneFragment extends Fragment {
private View mView;

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
mView = inflater.inflate(<span style="color:#ff0000;">R.layout.activity_one</span>, container, false);//加载你自己的布局文件

// 这里初始化界面控件，设置点击事件等
initView();

return mView;
}
}

4.RadioButton的图片是个selector，实现不同checked状态显示不用的图。代码：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

<item android:drawable="@drawable/bg_btn_one_pressed" android:state_checked="true"></item>
<item android:drawable="@drawable/bg_btn_one_normal"></item>

</selector>

附加效果：大家应该注意到了，ViewPager的回调中有三个方法，我们只重写了其中一个，获得了跳转后的页面index。

下边这个方法，会通知外层，当前ViewPager的滑动程度，也就是0%时是在第一个页面，50%时是滑动到了一、二两个页面中间，100%时滑动到了第二个页面。这个滑动程度的参数是float arg1。大家可以看到微信的底部导航条，当滑动时，Button的颜色会有深浅变化，应该是跟这个参数有关（完全猜的）。

<span style="white-space:pre">	</span>public void onPageScrolled(int arg0, <span style="color:#ff0000;">float arg1</span>, int arg2) {
}

以上就是我的实现了，暂时想到了这么多。如有遗漏的会及时补充，也欢迎大家提出意见，给我点鼓励~

转载请标明出处：http://blog.csdn.net/u010241861/article/details/46652577