ViewPage第三课自定义viewpage

第一步：

创建四个xml文件，page01.xml,page02.xml,page03.xml,page04.xml

作为viewpage容器的4个子级控件界面

<?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="#8A2BE2"
    android:orientation="vertical" >

    <TextView
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center"
        android:text="page01"
        android:textSize="40sp" >
    </TextView>

</LinearLayout>

第二步在布局文件activity_main中，添加viewpage控件，和四个按钮

同时为每个按钮创建selector文件，使用android:drawableTop="@drawable/page01_radiobutton_drawable"具体参看：

http://blog.csdn.net/wei_chong_chong/article/details/50487973

<RelativeLayout 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"
    tools:context=".MainActivity" >

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

    <RadioGroup
        android:id="@+id/rg_tab"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="horizontal"
        android:paddingBottom="3dp"
        android:paddingTop="3dp" >

        <RadioButton
            android:id="@+id/btn_Home"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/page01_radiobutton_drawable"
            android:gravity="center"
            android:text="HOME" />

        <RadioButton
            android:id="@+id/btn_Time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/page02_radiobutton_drawable"
            android:gravity="center"
            android:text="Time" />

        <RadioButton
            android:id="@+id/btn_Message"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/page03_radiobutton_drawable"
            android:gravity="center"
            android:text="Message" />

        <RadioButton
            android:id="@+id/btn_Settings"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:button="@null"
            android:drawableTop="@drawable/page04_radiobutton_drawable"
            android:gravity="center"
            android:text="Settings" />
    </RadioGroup>

</RelativeLayout>

第三步MainActivity中处理：

package com.example.viewpage_test;

import java.util.ArrayList;
import java.util.List;


import android.os.Bundle;
import android.app.Activity;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.support.v4.widget.SearchViewCompat.OnCloseListenerCompat;
import android.text.Layout;
import android.view.LayoutInflater;
import android.view.Menu;
import android.view.View;
import android.view.ViewGroup;
import android.widget.RadioGroup;
import android.widget.RadioGroup.OnCheckedChangeListener;

public class MainActivity extends Activity {
	private ViewPager viewpager;

	private List<View> children;
	private List<String> titles;
	private RadioGroup tab;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		viewpager = (ViewPager) findViewById(R.id.vp_viewpage);
		tab = (RadioGroup) findViewById(R.id.rg_tab);

		//viewpage容纳的的界面的集合
		children = new ArrayList<View>();
		children.add(LayoutInflater.from(this).inflate(R.layout.page01, null));
		children.add(getLayoutInflater().inflate(R.layout.page02, null));
		children.add(getLayoutInflater().inflate(R.layout.page03, null));
		children.add(getLayoutInflater().inflate(R.layout.page04, null));
		//每个界面的标题集合
		titles = new ArrayList<String>();
		titles.add("page01");
		titles.add("page02");
		titles.add("page03");
		titles.add("page04");
		//第一步添加适配器,使用pageAdapter管理子级View对象
		viewpager.setAdapter(new InnerPagerAdapter());
		//第二步为tab添加监听器，监听点击事件，得到点击是哪个按钮，根据按钮位置索引，设置viewpage当前要显示的是哪个页面
		tab.setOnCheckedChangeListener(new InnerOnCheckedChangeListener());
		//为ViewPage添加监听器，监听，当viewpage滑动时页面切换选中的是哪个界面，得到这个界面的位置索引，根据这个位置设置tab按钮的选择状态
		viewpager.setOnPageChangeListener(new InnerOnPageChangeListener());

	}
	private class InnerOnPageChangeListener implements OnPageChangeListener{

		@Override
		public void onPageScrolled(int position, float positionOffset,
				int positionOffsetPixels) {
			// 当这个页面滚动是

		}

		@Override
		public void onPageSelected(int position) {
			// 当已经选中这个界面时监听事件
			switch (position) {
			case 0:
				tab.check(R.id.btn_Home);
				break;
			case 1:
				tab.check(R.id.btn_Time);

				break;
			case 2:
				tab.check(R.id.btn_Message);

				break;
			case 3:
				tab.check(R.id.btn_Settings);

				break;

			default:
				break;
			}

		}

		@Override
		public void onPageScrollStateChanged(int state) {
			//滚动的状态发生改变时

		}

	}
	private class InnerOnCheckedChangeListener implements OnCheckedChangeListener{

		@Override
		public void onCheckedChanged(RadioGroup group, int checkedId) {
			// TODO Auto-generated method stub


			switch (checkedId) {
			case R.id.btn_Home:
				viewpager.setCurrentItem(0);//设置当前显示的的界面是哪一个

				break;
			case R.id.btn_Time:
				viewpager.setCurrentItem(1);

				break;
			case R.id.btn_Message:
				viewpager.setCurrentItem(2);

				break;


			case R.id.btn_Settings:
				viewpager.setCurrentItem(3);

				break;

			default:
				break;
			}
		}
	}
	public class InnerPagerAdapter extends PagerAdapter{
		@Override
		public CharSequence getPageTitle(int position) {
			// TODO Auto-generated method stub
			return titles.get(position);
		}

		@Override
		public int getCount() {
			//获取子级布局的数量

			return children.size();//返回viewpage容器中子级布局的个数，
		}

		@Override
		public boolean isViewFromObject(View view, Object object) {
			// 判断某个View对象是否为当前被添加到ViewPager容器中的对象
			return view == object;
		}

		//下面两个方法是PageAdapter中必须实现的非抽象方法
		@Override
		public Object instantiateItem(ViewGroup container, int position) {
			// 实例化ViewPager容器中指定的position位置需要显示的View对象
			View view = children.get(position);
			container.addView(view);


			return view;
		}

		@Override
		public void destroyItem(ViewGroup container, int position, Object object) {
			//在ＶｉｅｗＰａｇｅｒ中移除指定的ｐｏｓｉｔｉｏｎ位置的Ｖｉｅｗ对象
			container.removeView(children.get(position));
		}
	}

}