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>


本文源码地址下载：点击