Android经典底部选项卡集成方式之二

此中方式的设计模式是：RadioGroup+RadioButton+ViewPager+Fragment。

其效果和我上一篇博客描写的效果是基本相同的，再次就不再上效果图了，直接上源代码。

先看布局：

<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=".BottomActivity" >

<android.support.v4.view.ViewPager
android:id="@+id/vp"
android:layout_width="fill_parent"
android:layout_height="0dp"
android:layout_weight="1" />

<RadioGroup
android:id="@+id/rg"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:background="@drawable/bottom_tab_bg"
android:gravity="center_vertical"
android:orientation="horizontal" >

<RadioButton
android:id="@+id/rb1"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_home"
android:gravity="center"
android:text="选项1"
android:textColor="@color/selector_color_text" />

<RadioButton
android:id="@+id/rb2"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_center"
android:gravity="center"
android:text="选项2"
android:textColor="@color/selector_color_text" />

<RadioButton
android:id="@+id/rb3"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_smartservice"
android:gravity="center"
android:text="选项3"
android:textColor="@color/selector_color_text" />

<RadioButton
android:id="@+id/rb4"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_gov"
android:gravity="center"
android:text="选项4"
android:textColor="@color/selector_color_text" />

<RadioButton
android:id="@+id/rb5"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight="1"
android:button="@null"
android:drawableTop="@drawable/selector_setting"
android:gravity="center"
android:text="选项5"
android:textColor="@color/selector_color_text" />
</RadioGroup>

</LinearLayout>

再看Activity中的代码：

public class BottomActivity extends FragmentActivity {
private ArrayList<Fragment> fragmentsList = new ArrayList<Fragment>();
private ViewPager mViewPager;
private RadioGroup group;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_bottom);

mViewPager = (ViewPager) findViewById(R.id.vp);
FragmentPagerAdapter adapter = new MyFragmentPageAdapter(
getSupportFragmentManager());
mViewPager.setAdapter(adapter);

group = (RadioGroup) findViewById(R.id.rg);
OnCheckedChangeListener listener = new MyOnCheckedChangeListener();
group.setOnCheckedChangeListener(listener);
group.check(R.id.rb5);

// 为mViewPager设置监听，使得滑动的时候，底部也跟着跳转
OnPageChangeListener listener1 = new MyOnPageChangeListener();
mViewPager.setOnPageChangeListener(listener1);

}

private class MyOnPageChangeListener implements OnPageChangeListener {

@Override
public void onPageScrollStateChanged(int arg0) {

}

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

}

@Override
public void onPageSelected(int arg0) {
// 当page滑动到某一个页面的时候，底部也跟着
switch (arg0) {
case 0:
group.check(R.id.rb1);
break;
case 1:
group.check(R.id.rb2);
break;
case 2:
group.check(R.id.rb3);
break;
case 3:
group.check(R.id.rb4);
break;
case 4:
group.check(R.id.rb5);
break;

default:
break;
}

}

}

private class MyOnCheckedChangeListener implements OnCheckedChangeListener {

@Override
public void onCheckedChanged(RadioGroup group, int checkedId) {

switch (checkedId) {
case R.id.rb1:// viewpager跳转到此页
mViewPager.setCurrentItem(0);
break;
case R.id.rb2:
mViewPager.setCurrentItem(1);
break;
case R.id.rb3:
mViewPager.setCurrentItem(2);
break;
case R.id.rb4:
mViewPager.setCurrentItem(3);
break;
case R.id.rb5:
mViewPager.setCurrentItem(4);
break;

default:
break;
}

}

}
private class MyFragmentPageAdapter extends FragmentPagerAdapter {

public MyFragmentPageAdapter(FragmentManager fm) {
super(fm);
fragmentsList.add(new Fragment1());
fragmentsList.add(new Fragment2());
fragmentsList.add(new Fragment3());
fragmentsList.add(new Fragment4());
fragmentsList.add(new Fragment5());
}

@Override
public Fragment getItem(int arg0) {
return fragmentsList.get(arg0);
}

@Override
public int getCount() {
return fragmentsList.size();
}

}

}

另外需要提醒的是：

由于viewpager自身带有左右滑动的效果，所以用以上代码形成的结果就是当点击底部选项卡的时候，页面会切换。点击页面中间部分也可以左右滑动切换页面。如果想只有当点击底部选项卡的时候才能做页面切换（即相当于禁止viewpager左右滑动），用到事件的传递机制。重写onInterceptTouchEvent和onTouchEvent两个方法：

自定义一个NoSlideViewPager extends ViewPager,代码如下：

public class NoSlideViewPager extends ViewPager {

public NoSlideViewPager(Context context, AttributeSet attrs) {
super(context, attrs);
}

public NoSlideViewPager(Context context) {
super(context);
}

@Override
public boolean onInterceptTouchEvent(MotionEvent arg0) {
// 是否拦截事件：true：拦截的话事件就交给自己处理
// false 就是不拦截，交给子类的view处理
return false;
}

@Override
public boolean onTouchEvent(MotionEvent arg0) {
// 返回值true:自己消费处理
// 返回值false：自己不消费处理，继续回传
return false;
}
}

将代码中的ViewPager替换为NoSlideViewPager ，结果就是只能通过底点击底部选项卡切换页面，viewpager不再可以自己滑动了。