[基础学习]ViewPager和Fragment与RadioButton结合做一个类似Tabhost的效果

ViewPager和Fragment与RadioButton结合做一个类似Tabhost的效果

一，RadioButton的布局

 <android.support.v4.view.ViewPager
        android:id="@+id/viewPager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/radioGroup1" >
        
    </android.support.v4.view.ViewPager>

。。。。。

 <RadioGroup
        android:id="@+id/radioGroup1"
        android:layout_width="wrap_content"
        android:layout_height="60dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:background="@drawable/img01_06"
        android:orientation="horizontal" >

        <RadioButton
            android:id="@+id/radio0"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:button="@null"
            android:checked="true"
            android:onClick="doClick"
            android:drawableTop="@drawable/selector01"
            android:paddingTop="13dp" />

        <RadioButton
            android:id="@+id/radio1"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:onClick="doClick"
            android:button="@null"
            android:drawableTop="@drawable/selector02"
            android:paddingTop="13dp" />

        <RadioButton
            android:id="@+id/radio2"
            android:layout_width="0dp"
            android:layout_height="60dp"
            android:onClick="doClick"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector03"
            android:paddingTop="13dp" />

        <RadioButton
            android:id="@+id/radio3"
            android:layout_width="0dp"
            android:onClick="doClick"
            android:layout_height="60dp"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/selector04"
            android:paddingTop="13dp" />
    </RadioGroup>

其中

android:button="@null"

是去掉RadioButton上面的大圆点

在selector中：

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android" >
  <span style="white-space:pre">	</span>  <item android:state_checked="true" android:drawable="@drawable/img01g_12"></item>
 <span style="white-space:pre">	</span>  <item android:state_checked="false" android:drawable="@drawable/img02_14"></item>
</selector>

二，Fragment的布局准备好

三，给Viewpager设置Fragment

List<Fragment> fs = new ArrayList<Fragment>();
fs.add(new CallLogFragment());
fs.add(new ContactFragment());
fs.add(new SmsFragment());
fs.add(new DialFragment());
FragmentManager fm = getSupportFragmentManager();
MyPagerAdapter adapter = new MyPagerAdapter(fm, fs);
viewPager.setAdapter(adapter);

其中MyPagerAdapter是：

class MyPagerAdapter extends FragmentPagerAdapter {
		private List<Fragment> fs;

		public MyPagerAdapter(FragmentManager fm, List<Fragment> fs) {
			super(fm);
			this.fs = fs;
		}

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

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

	}

四，实现联动

1.实现viewPager与RadioButton的联动

viewPager.setOnPageChangeListener(new OnPageChangeListener() {
			
			public void onPageSelected(int position) {
				switch (position) {
				case 0:
					r0.setChecked(true);
					break;
				case 1:
					r1.setChecked(true);
					break;
				case 2:
					r2.setChecked(true);
					break;
				case 3:
					r3.setChecked(true);
					break;
				}
			}
			
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				
			}
			
			public void onPageScrollStateChanged(int arg0) {
				
			}
		});

2.实现RadioButton与ViewPager的联动

	public void doClick(View view) {
		switch (view.getId()) {
		case R.id.radio0:
			viewPager.setCurrentItem(0);
			break;
		case R.id.radio1:
			viewPager.setCurrentItem(1);
			break;
		case R.id.radio2:
			viewPager.setCurrentItem(2);
			break;
		case R.id.radio3:
			viewPager.setCurrentItem(3);
			break;
		}
	}

分隔符