由于项目需要,做了一个垂直滑动的ViewPager作为应用的引导页,下面就和大家分享一下具体实现方法,初步测试可以使用,有问题的话欢迎大家吐槽,先看效果图:
废话不多说,下面来看一看代码,由于代码中已经写了很多注释,我就不过多解释了,大概思路就是自定义一个类继承自ViewGroup,然后将视图集合放进去
下面是实现类VerticalViewPager.java
package com.example.verticalviewpager;
import java.util.List;
import android.annotation.SuppressLint;
import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.view.VelocityTracker;
import android.view.View;
import android.view.ViewGroup;
import android.widget.Scroller;
/**
* 自定义的可以垂直方向滑动的ViewPager
*
* @author my
*
* @version 创建时间:2015年4月1日 上午10:29:24
*/
public class VerticalViewPager extends ViewGroup {
// 用于滑动的类
private Scroller scroller;
// 用来跟踪触摸速度的类
private VelocityTracker velocityTracker;
// 当前的屏幕视图
private int curScreen;
// 默认的显示视图
private int defaultScreen = 0;
// 无事件的状态
private static final int TOUCH_STATE_REST = 0;
// 处于拖动的状态
private static final int TOUCH_STATE_SCROLLING = 1;
// 可以切换页面的最小滑动的速度
private static final int SNAP_VELOCITY = 500;
// 所处的状态
private int touchState = TOUCH_STATE_REST;
private float lastMotionY;
private OnVerticalPageChangeListener verticalPageChangeListener;
public VerticalViewPager(Context context) {
this(context, null);
}
public VerticalViewPager(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
/**
* 在构造器中进行一些初始化
*/
public VerticalViewPager(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
scroller = new Scroller(context);
curScreen = defaultScreen;
}
public interface OnVerticalPageChangeListener {
public void onVerticalPageSelected(int position);
}
/**
* 提供一个页面改变的监听器
*/
public void setOnVerticalPageChangeListener(OnVerticalPageChangeListener onVerticalPageChangeListener) {
this.verticalPageChangeListener = onVerticalPageChangeListener;
}
/**
* 为ViewPager设置页面视图
* @param viewList 页面视图集合
*/
public void setViewList(List<View> viewList) {
if (getChildCount() > 0) {
this.removeAllViews() ;
}
curScreen = defaultScreen;
for (int i = 0; i < viewList.size(); i++) {
this.addView(viewList.get(i));
}
scrollTo(0, 0);
}
/**
* 重写此方法为子View进行布局
*/
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
int childheiht = 0;
for (int i = 0; i < getChildCount(); i++) {
View childView = getChildAt(i);
if (childView.getVisibility() != View.GONE) {
int childWidth = childView.getMeasuredWidth();
childView.layout(0, childheiht, childWidth,
childView.getMeasuredHeight() + childheiht);
childheiht += childView.getMeasuredHeight();
}
}
}
/**
* 重写此方法用来计算高度和宽度
*/
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 其中包含setMeasuredDimension方法,它是一个很关键的函数,它对View的成员变量mMeasuredWidth和mMeasuredHeight变量赋值
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
// 得到多少页(子View)并设置他们的宽和高
for (int i = 0; i < getChildCount(); i++) {
getChildAt(i).measure(widthMeasureSpec, heightMeasureSpec);
}
}
/**
* 根据目前的位置滚动到下一个视图位置
*/
public void snapToDestination() {
// 这个高度是View可见部分的高度
int screenHeight = getHeight();
// 根据View的高度以及滑动的值来判断是哪个View
int destScreen = (getScrollY() + screenHeight/2) / screenHeight;
snapToScreen(destScreen);
}
public void snapToScreen(int whichScreen) {
whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));
if (getScrollY() != (whichScreen * getHeight())) {
final int delta = whichScreen * getHeight() - getScrollY();
scroller.startScroll(0, getScrollY(), 0, delta,
Math.abs(delta)/4);
curScreen = whichScreen;
invalidate(); // 重新布局
if (verticalPageChangeListener != null)
verticalPageChangeListener.onVerticalPageSelected(whichScreen);
}
}
public void setToScreen(int whichScreen) {
whichScreen = Math.max(0, Math.min(whichScreen, getChildCount() - 1));
curScreen = whichScreen;
scrollTo(0, whichScreen * getHeight());
if (verticalPageChangeListener != null)
verticalPageChangeListener.onVerticalPageSelected(whichScreen);
}
/**
* 获取当前页面
* @return 当前页面值
*/
public int getCurScreen() {
return curScreen;
}
/**
* 获取当前视图
* @return 当前视图
*/
public View getCurrentView() {
return getChildAt(getCurScreen());
}
/**
* 根据位置获取指定页面的视图
* @param position 页面位置
* @return 指定页面的视图
*/
public View getView(int position) {
return getChildAt(position);
}
// 在父容器重绘自己的孩子时,它会调用孩子的computScroll方法
@Override
public void computeScroll() {
// startScroll()函数只是对它的一些成员变量做一些设置,这个设置的唯一效果就是导致scroller.computeScrollOffset()返回true
if (scroller.computeScrollOffset()) {
scrollTo(scroller.getCurrX(), scroller.getCurrY());
postInvalidate();
}
}
@SuppressLint("ClickableViewAccessibility")
public boolean onTouchEvent(MotionEvent event) {
if (velocityTracker == null) {
// 使用obtain方法得到VelocityTracker的一个对象
velocityTracker = VelocityTracker.obtain();
}
// 将当前的触摸事件传递给VelocityTracker对象
velocityTracker.addMovement(event);
// 得到触摸事件的类型
final int action = event.getAction();
final float y = event.getY();
switch (action) {
case MotionEvent.ACTION_DOWN:
if (!scroller.isFinished()) {
scroller.abortAnimation();
}
lastMotionY = y;
System.out.println("onTouchEvent--->down");
break;
case MotionEvent.ACTION_MOVE:
int deltay = (int) (lastMotionY - y);
lastMotionY = y;
if ((curScreen == getChildCount() - 1 && deltay > 0)
|| (curScreen == 0 && deltay < 0)) {
}else {
scrollBy(0, deltay);
}
System.out.println("onTouchEvent--->move");
break;
case MotionEvent.ACTION_UP:
final VelocityTracker velocityTracker = this.velocityTracker;
// 计算当前的速度
velocityTracker.computeCurrentVelocity(1000);
// 获得Y轴方向当前的速度
int velocityY = (int) velocityTracker.getYVelocity();
if (velocityY > SNAP_VELOCITY && curScreen > 0) {
snapToScreen(curScreen - 1);
} else if (velocityY < -SNAP_VELOCITY && curScreen < getChildCount() - 1) {
snapToScreen(curScreen + 1);
} else {
snapToDestination();
}
if (this.velocityTracker != null) {
this.velocityTracker.recycle();
this.velocityTracker = null;
}
touchState = TOUCH_STATE_REST;
break;
case MotionEvent.ACTION_CANCEL:
touchState = TOUCH_STATE_REST;
break;
}
return true;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final int action = ev.getAction();
switch (action) {
case MotionEvent.ACTION_MOVE:
break;
case MotionEvent.ACTION_DOWN:
touchState = scroller.isFinished() ? TOUCH_STATE_REST
: TOUCH_STATE_SCROLLING;
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
touchState = TOUCH_STATE_REST;
break;
}
return touchState != TOUCH_STATE_REST;
}
}
其实这个并不难,都是一些基础的东西,但是要理解ViewGroup的onMeasure和onLayout方法,这样才能对自定义的这个控件中的子View进行位置排布,关于这方面的知识可以参见:http://blog.csdn.net/flymoon1201/article/details/44806021
还有一个知识点就是Scroller类的用法,详情可以参见:
http://blog.csdn.net/flymoon1201/article/details/44807771
下面就是这个自定义控件的用法了
首先是布局文件activity_main.xml:
<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">
<com.example.verticalviewpager.VerticalViewPager
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:id="@+id/vertical_viewpager"/>
</RelativeLayout>
之后就是在代码中使用了,文件MainActivity.java:
package com.example.verticalviewpager;
import java.util.ArrayList;
import java.util.List;
import com.example.verticalviewpager.VerticalViewPager.OnVerticalPageChangeListener;
import android.annotation.SuppressLint;
import android.app.Activity;
import android.os.Bundle;
import android.view.View;
import android.widget.ImageView;
public class MainActivity extends Activity {
private VerticalViewPager verticalViewPager;
private final int[] imgSource = { R.drawable.bg_android_v7_1,
R.drawable.bg_android_v7_2, R.drawable.bg_android_v7_3,
R.drawable.bg_android_v7_4, R.drawable.bg_android_v7_5,
R.drawable.bg_android_v7_6};
List<View> viewList = new ArrayList<View>();
@SuppressLint("InflateParams")
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
verticalViewPager = (VerticalViewPager) findViewById(R.id.vertical_viewpager);
for (int i = 0; i < imgSource.length; i++) {
View view = getLayoutInflater().inflate(R.layout.pager, null);
ImageView img = (ImageView) view.findViewById(R.id.pager);
img.setImageResource(imgSource[i]);
viewList.add(view);
}
verticalViewPager.setViewList(viewList);
verticalViewPager.setOnVerticalPageChangeListener(new OnVerticalPageChangeListener() {
@Override
public void onVerticalPageSelected(int position) {
System.out.println("pager=" + position);
}
});
}
}
上面用到了一些图片,还有一个布局文件pager.xml:
<?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:orientation="vertical" >
<ImageView
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:scaleType="fitXY"
android:id="@+id/pager"/>
</LinearLayout>
好了,到这里就介绍完了,具体demo我放在了这里http://download.csdn.net/detail/flymoon1201/8554741
欢迎大家指正批评哈!