ViewPage + RadioGroup + Fragment学习

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/pcaxb/article/details/47610821

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


阅读更多
换一批

没有更多推荐了,返回首页