Android viewpage滑动选项卡

Android viewpage滑动选项卡。根据android.support.v4.view.ViewPager的jar包。自定义CustomViewPaper继承ViewPager。这个也是需要适配器的，只要把需要滑动的布局用view添加LinkedList中，然后对viewPaper进行绑定适配器，进行传出LinkedList的数据源。先看看效果图。

本文源码地址下载：点击 

一、效果图

二、项目结构

三、自定义CustomViewPaper继承自android.support.v4.view.ViewPager

package com.org.viewpager;

import android.content.Context;
import android.graphics.PointF;
import android.support.v4.view.ViewPager;
import android.util.AttributeSet;
import android.view.MotionEvent;
/**
 * 自定义android.support.v4.view.ViewPager
 * @author Administrator
 *
 */
public class CustomViewPaper extends ViewPager {
	private PointF mDownPointF = new PointF(); 
	private onSingleTouchListener mOnListener;
	
	public CustomViewPaper(Context context) {
		super(context);
		// TODO Auto-generated constructor stub
	}

	public CustomViewPaper(Context context, AttributeSet attrs) {
		super(context, attrs);
		// TODO Auto-generated constructor stub
	}
	
	@Override
	public boolean onInterceptTouchEvent(MotionEvent argo) {
		return true;
	}
	
	@Override
	public boolean onTouchEvent(MotionEvent argo) {
		PointF currentPointF = new PointF(argo.getX(), argo.getY());
		if (argo.getAction() == MotionEvent.ACTION_DOWN) {
			mDownPointF.x = argo.getX();
			mDownPointF.y = argo.getY();
			getParent().requestDisallowInterceptTouchEvent(true);
		}
		else if (argo.getAction() == MotionEvent.ACTION_MOVE) {
			getParent().requestDisallowInterceptTouchEvent(true);
		}
		else if (argo.getAction() == MotionEvent.ACTION_UP) {
			if (currentPointF == mDownPointF) {
				if (mOnListener != null) mOnListener.onSingleTouch();
				return true;
			}
		}
		
		return super.onTouchEvent(argo);
	}
	
	public interface onSingleTouchListener {
		public abstract void onSingleTouch();
	}
	
	public void setOnSingleTouchListener(onSingleTouchListener onListener) {
		mOnListener = onListener;
	}
}

四、看看你怎样调用自定义控件，以及添加数据源，绑定每一页控件的id，绑定适配器。

package com.example.viewpager;

import java.util.LinkedList;
import java.util.List;

import com.org.viewpager.CustomViewPaper;
import android.os.Bundle;
import android.os.Parcelable;
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.view.View;
import android.widget.ImageView;
import android.widget.TextView;

public class MainActivity extends Activity {

	//装载view的LinkedList，是选项卡的内容
	private LinkedList<View> mpageList = null;
	//各个选项卡里面的控件
	private TextView mpageTextView1;
	private TextView mpageTextView2;
	private TextView mpageTextView3;
	//提示选项卡选中状态的imagview
	private ImageView mImageView1;
	private ImageView mImageView2;
	private ImageView mImageView3;

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

		initView();
	}

	private void initView() {
		CustomViewPaper viewPaper = (CustomViewPaper) findViewById(R.id.viewPaper1);
		mpageList = new LinkedList<View>();

		//加载每个选项卡的布局
		View page1 = getLayoutInflater().inflate(R.layout.view_page_1, null);
		View page2 = getLayoutInflater().inflate(R.layout.view_page_2, null);
		View page3 = getLayoutInflater().inflate(R.layout.view_page_3, null);

		//把页面选项卡添加到LinkedList中，给适配器的数据源
		mpageList.add(page1);
		mpageList.add(page2);
		mpageList.add(page3);

		//自定义选项卡绑定适配器
		viewPaper.setAdapter(new CustomPagerAdapter(mpageList));

		//各个选项卡里面空间的绑定
		mpageTextView1 = (TextView) page1.findViewById(R.id.TextView1);
		mpageTextView2 = (TextView) page2.findViewById(R.id.TextView1);
		mpageTextView3 = (TextView) page3.findViewById(R.id.TextView1);
		
		//圆圈提示三个选项卡的状态ImageView的绑定
		mImageView1 = (ImageView)findViewById(R.id.imageViewPage_0);
		mImageView2 = (ImageView)findViewById(R.id.imageViewPage_1);
		mImageView3 = (ImageView)findViewById(R.id.imageViewPage_2);

		//设置初始化的选定第一个选项卡以及状态
		viewPaper.setCurrentItem(0);
		mImageView1.setImageResource(R.drawable.page_shape_select);
		mImageView2.setImageResource(R.drawable.page_shape_normal);
		mImageView3.setImageResource(R.drawable.page_shape_normal);

		//选项卡滑动监听器
		viewPaper.setOnPageChangeListener(new OnPageChangeListener() {

			@Override
			public void onPageSelected(int arg0) {
				switch (arg0) {
				case 0:
					mpageTextView1.setText("正在显示第一页。。。");
					mImageView1.setImageResource(R.drawable.page_shape_select);
					mImageView2.setImageResource(R.drawable.page_shape_normal);
					mImageView3.setImageResource(R.drawable.page_shape_normal);
					break;
				case 1:
					mpageTextView2.setText("正在显示第二页。。。");
					mImageView1.setImageResource(R.drawable.page_shape_normal);
					mImageView2.setImageResource(R.drawable.page_shape_select);
					mImageView3.setImageResource(R.drawable.page_shape_normal);
					break;
				case 2:
					mpageTextView3.setText("正在显示第三页。。。");
					mImageView1.setImageResource(R.drawable.page_shape_normal);
					mImageView2.setImageResource(R.drawable.page_shape_normal);
					mImageView3.setImageResource(R.drawable.page_shape_select);
					break;
				default:
					break;
				}

			}

			@Override
			public void onPageScrolled(int arg0, float arg1, int arg2) {
				// TODO Auto-generated method stub

			}

			@Override
			public void onPageScrollStateChanged(int arg0) {
				// TODO Auto-generated method stub

			}
		});

	}

	/**
	 * 自定义滑动选项卡的适配器
	 * @author Administrator
	 *
	 */
	public class CustomPagerAdapter extends PagerAdapter {
		public List<View> mListViews;

		public CustomPagerAdapter(List<View> mListViews) {
			this.mListViews = mListViews;
		}

		@Override
		public void destroyItem(View arg0, int arg1, Object arg2) {
			((ViewPager) arg0).removeView(mListViews.get(arg1));
		}

		@Override
		public void finishUpdate(View arg0) {
		}

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

		@Override
		public Object instantiateItem(View arg0, int arg1) {
			((ViewPager) arg0).addView(mListViews.get(arg1), 0);
			return mListViews.get(arg1);
		}

		@Override
		public boolean isViewFromObject(View arg0, Object arg1) {
			return arg0 == (arg1);
		}

		@Override
		public void restoreState(Parcelable arg0, ClassLoader arg1) {
		}

		@Override
		public Parcelable saveState() {
			return null;
		}

		@Override
		public void startUpdate(View arg0) {
		}
	}
}

五、简单的主布局文件activity_main

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/LinearLayout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".MainActivity" >

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="自定义android.support.v4.view.ViewPager的滑动选项卡" />

    <com.org.viewpager.CustomViewPaper
        android:id="@+id/viewPaper1"
        android:layout_width="match_parent"
        android:layout_height="100dp"
        android:flipInterval="30"
        android:focusable="true"
        android:focusableInTouchMode="true"
        android:persistentDrawingCache="animation" >
    </com.org.viewpager.CustomViewPaper>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="10dp"
        android:gravity="center" >

        <ImageView
            android:id="@+id/imageViewPage_0"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="right|center_vertical"
            android:src="@drawable/page_shape_select" />

        <ImageView
            android:id="@+id/imageViewPage_1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="4dp"
            android:src="@drawable/page_shape_normal" />

        <ImageView
            android:id="@+id/imageViewPage_2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical"
            android:layout_marginLeft="4dp"
            android:src="@drawable/page_shape_normal" />
    </LinearLayout>

</LinearLayout>

本文源码地址下载：点击