水平垂直都可滑动的HorizontalVerticalViewPager实现
自定义一个可以在垂直方向上滑动的ViewPager，同时支持水平和垂直方向手动切换和自动切换（根据手势判断），垂直方向的实现通过PageTransformer来完成，自动切换功能则涉及到手势的相关内容。以下是内容简介：
垂直滑动的ViewPager实现思路
PageTransformer的使用
手势事件的分发和处理
垂直滑动的ViewPager实现思路
Android的兼容包support-v4提供的ViewPager默认是水平滑动切换的，但是，想要实现垂直滑动，可行的方案还是不少的，下面举几个例子：
- 直接拷贝ViewPager源码，把所有涉及到的水平控制的参数，调整为垂直；
- 旋转ViewPager的item的角度；
- 设置页面切换动画PageTransformer；
当然，还有很多其他的方式来实现，我这里使用的就是比较简单的PageTransformer，简单，是因为只需要给水平的ViewPager设置一个PageTransformer就能实现，不用自定义ViewPager。
PageTransformer的使用
关于PageTransformer首先要知道的是，这是一个控制ViewPager页面滑动动画的一个类，要给页面设置各种滑入和滑出的动画，需要实现PageTransformer接口，实现里面的transformPage（View page，int position）方法，做动画相关的操作。
先来看看官方的Demo：
DepthPageTransformer
对应的代码如下：
public class DepthPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.75f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
view.setAlpha(1);
view.setTranslationX(0);
view.setScaleX(1);
view.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
view.setAlpha(1 - position);
// Counteract the default slide transition
view.setTranslationX(pageWidth * -position);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
ZoomOutPageTransformer
对应的PageTransformer实现：
public class ZoomOutPageTransformer implements ViewPager.PageTransformer {
private static final float MIN_SCALE = 0.85f;
private static final float MIN_ALPHA = 0.5f;
public void transformPage(View view, float position) {
int pageWidth = view.getWidth();
int pageHeight = view.getHeight();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
// Modify the default slide transition to shrink the page as well
float scaleFactor = Math.max(MIN_SCALE, 1 - Math.abs(position));
float vertMargin = pageHeight * (1 - scaleFactor) / 2;
float horzMargin = pageWidth * (1 - scaleFactor) / 2;
if (position < 0) {
view.setTranslationX(horzMargin - vertMargin / 2);
} else {
view.setTranslationX(-horzMargin + vertMargin / 2);
}
// Scale the page down (between MIN_SCALE and 1)
view.setScaleX(scaleFactor);
view.setScaleY(scaleFactor);
// Fade the page relative to its size.
view.setAlpha(MIN_ALPHA +
(scaleFactor - MIN_SCALE) /
(1 - MIN_SCALE) * (1 - MIN_ALPHA));
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
关于Demo的具体解读，参见官网示例。
下面是垂直滑动效果：
手指水平滑动-页面垂直滚动
对应的PageTransformer实现：
private class VerticalPageTransformer implements ViewPager.PageTransformer {
@Override
public void transformPage(View view, float position) {
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
view.setAlpha(0);
} else if (position <= 1) { // [-1,1]
view.setAlpha(1);
// Counteract the default slide transition
view.setTranslationX(view.getWidth() * -position);
//set Y position to swipe in from top
float yPosition = position * view.getHeight();
view.setTranslationY(yPosition);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
view.setAlpha(0);
}
}
}
到这里其实就已经可以上下滑动了，但是手势却还是左右滑动，还需要再做一点改动。把左右滑动的手势变换为上下滑动。
/**
* Swaps the X and Y coordinates of your touch event.
*/
private MotionEvent swapXY(MotionEvent ev) {
float width = getWidth();
float height = getHeight();
float newX = (ev.getY() / height) * width;
float newY = (ev.getX() / width) * height;
ev.setLocation(newX, newY);
return ev;
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
if (isVertical) {
boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
swapXY(ev); // return touch coordinates to original reference frame for any child views
return intercepted;
} else {
return super.onInterceptTouchEvent(ev);
}
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (isVertical) {
return super.onTouchEvent(swapXY(ev));
} else {
return super.onTouchEvent(ev);
}
}
效果如下：
手指垂直滑动-页面垂直滚动
到这里，一个垂直滚动的ViewPager已经实现了。
记住，别忘了把实现的PageTransformer设置给ViewPager：
setPageTransformer(true, new HorizontalVerticalPageTransformer());
关于PageTransformer更多的内容，还可以看看CSDN博客专家们的解读：
巧用ViewPager 打造不一样的广告轮播切换效果
PageTransformer实现个性的ViewPager切换动画
手势事件的分发和处理
现在，我要做的是，既可以水平滑动又可以垂直滑动，完全根据手指滑动的方向自动的切换滑动方向，通过按钮手动切换的这里就不细说了，相信看完自动切换的细节，手动的也就不是什么问题了。
这里的手势，监听的是ViewPager的item里面的ImageView控件的，所以，实现一个OnGestureListener，然后，在ImageView的touch事件交给GestureDetector来处理，看看OnGestureListener的代码：
private class GestureListener implements GestureDetector.OnGestureListener {
@Override
public boolean onDown(MotionEvent e) {
Log.i(getClass().getName(), "onDown-----" + getActionName(e.getAction()));
return false;
}
@Override
public void onShowPress(MotionEvent e) {
Log.i(getClass().getName(), "onShowPress-----" + getActionName(e.getAction()));
}
@Override
public boolean onSingleTapUp(MotionEvent e) {
Log.i(getClass().getName(), "onSingleTapUp-----" + getActionName(e.getAction()));
return false;
}
@Override
public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float distanceY) {
Log.i(getClass().getName(), "onScroll-----"
+ getActionName(e2.getAction()) + ",(" + e1.getX() + "," + e1.getY() + ") ,("
+ e2.getX() + "," + e2.getY() + ")");
return false;
}
@Override
public void onLongPress(MotionEvent e) {
Log.i(getClass().getName(), "onLongPress-----" + getActionName(e.getAction()));
}
@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) {
Log.i(getClass().getName(),
"onFling-----" + getActionName(e2.getAction()) + ",(" + e1.getX() + "," + e1.getY() + ") ,("
+ e2.getX() + "," + e2.getY() + ")");
float detly_x = e1.getX() - e2.getX();
float detly_y = e1.getY() - e2.getY();
if (Math.abs(detly_x) > Math.abs(detly_y)) {// 水平方向滑动
int offsetPosition = 0;
if (e1.getX() - e2.getX() > FLING_MIN_DISTANCE) {
offsetPosition = 1;
Log.i(getClass().getName(), "onFling----- 向左滑动");
} else if (e2.getX() - e1.getX() > FLING_MIN_DISTANCE) {
offsetPosition = -1;
Log.i(getClass().getName(), "onFling----- 向右滑动");
}
mOnTouchListener.onHorizontalFling(offsetPosition);
} else {// 垂直方向滑动
int offsetPosition = 0;
if (e1.getY() - e2.getY() > FLING_MIN_DISTANCE) {
offsetPosition = 1;
Log.i(getClass().getName(), "onFling----- 向上滑动");
} else if (e2.getY() - e1.getY() > FLING_MIN_DISTANCE) {
offsetPosition = -1;
Log.i(getClass().getName(), "onFling----- 向下滑动");
}
mOnTouchListener.onVerticalFling(offsetPosition);
}
return false;
}
private String getActionName(int action) {
String name = "";
switch (action) {
case MotionEvent.ACTION_DOWN: {
name = "ACTION_DOWN";
break;
}
case MotionEvent.ACTION_MOVE: {
name = "ACTION_MOVE";
break;
}
case MotionEvent.ACTION_UP: {
name = "ACTION_UP";
break;
}
default:
break;
}
return name;
}
}
设置给ImageView：
final GestureDetector detector = new GestureDetector(context, new GestureListener());
iv.setOnTouchListener(new View.OnTouchListener() {
@Override
public boolean onTouch(View v, MotionEvent event) {
detector.onTouchEvent(event);
return true;
}
});
当然，PageTransformer也要进行改造：
private class HorizontalVerticalPageTransformer implements PageTransformer {
private static final float MIN_SCALE = 0.75f;
@Override
public void transformPage(View page, float position) {
if (isVertical) {
if (position < -1) {
page.setAlpha(0);
} else if (position <= 1) {
page.setAlpha(1);
// Counteract the default slide transition
float xPosition = page.getWidth() * -position;
page.setTranslationX(xPosition);
//set Y position to swipe in from top
float yPosition = position * page.getHeight();
page.setTranslationY(yPosition);
} else {
page.setAlpha(0);
}
} else {
int pageWidth = page.getWidth();
if (position < -1) { // [-Infinity,-1)
// This page is way off-screen to the left.
page.setAlpha(0);
} else if (position <= 0) { // [-1,0]
// Use the default slide transition when moving to the left page
page.setAlpha(1);
page.setTranslationX(0);
page.setScaleX(1);
page.setScaleY(1);
} else if (position <= 1) { // (0,1]
// Fade the page out.
page.setAlpha(1 - position);
// Counteract the default slide transition
page.setTranslationX(pageWidth * -position);
page.setTranslationY(0);
// Scale the page down (between MIN_SCALE and 1)
float scaleFactor = MIN_SCALE
+ (1 - MIN_SCALE) * (1 - Math.abs(position));
page.setScaleX(scaleFactor);
page.setScaleY(scaleFactor);
} else { // (1,+Infinity]
// This page is way off-screen to the right.
page.setAlpha(0);
}
}
}
}
再看看效果是怎么样的吧：
双向自动切换
只是一个简单的Demo，还有一些瑕疵，有空再整理，这里暂时奉上不完善的源码：
源码地址
运行后，点击主页右下角FloatingActionButton即可。