底部是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