android viewpager实现竖屏滑动效果

183 阅读 0 评论 121 点赞

我是靠谱客的博主傻傻中心，最近开发中收集的这篇文章主要介绍android viewpager实现竖屏滑动效果，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

Viewpager 横向滑动效果系统就自带了很多种，比如这个

效果

那如果做成竖屏的这种效果呢。我百度过很多，效果都不是很好，有的代码特别多而且存在很多问题。我结合了以前别人的代码现在来教大家个简单的实现过程。

首先自定义Viewpager 是肯定必不可少的了

public class VerticalViewPager extends ViewPager {
  private OnItemClickListener mOnItemClickListener;

  public VerticalViewPager(Context context) {
    super(context);
    init();
  }

  public VerticalViewPager(Context context, AttributeSet attrs) {
    super(context, attrs);
    init();
    setup();
  }

  private void init() {
    // The majority of the magic happens here
    setPageTransformer(true, new VerticalPageTransformer());
    // The easiest way to get rid of the overscroll drawing that happens on the left and right
    setOverScrollMode(OVER_SCROLL_NEVER);
  }
   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){
    boolean intercepted = super.onInterceptTouchEvent(swapXY(ev));
    swapXY(ev); // return touch coordinates to original reference frame for any child views
    return intercepted;
  }

  private float scaleY ;
  @Override
  public boolean onTouchEvent(MotionEvent ev) {

    System.out.println("----------getY" + ev.getY());
    System.out.println("----------scaleY" + scaleY);
    if (ev.getAction()==MotionEvent.ACTION_MOVE){
    }
    if (ev.getAction()==MotionEvent.ACTION_DOWN){
      scaleY = ev.getY();
    }
    if (ev.getAction()==MotionEvent.ACTION_UP){
      if (scaleY == ev.getY()){
        System.out.println("------------------======");
        scaleY= 0;
        return false;
      }
    }
    try {
      return super.onTouchEvent(swapXY(ev));
    }catch (Exception e){
    }
    return true;
  }
  public void setOnItemClickListener(OnItemClickListener onItemClickListener) {
    mOnItemClickListener = onItemClickListener;
  }

  public interface OnItemClickListener {
    void onItemClick(int position);
  }
  private void setup() {
    final GestureDetector tapGestureDetector = new  GestureDetector(getContext(), new TapGestureListener());

    setOnTouchListener(new OnTouchListener() {
      @Override
      public boolean onTouch(View v, MotionEvent event) {
        tapGestureDetector.onTouchEvent(event);
        return false;
      }
    });
  }
  private class TapGestureListener extends GestureDetector.SimpleOnGestureListener {

    @Override
    public boolean onSingleTapConfirmed(MotionEvent e) {
      if(mOnItemClickListener != null) {
        mOnItemClickListener.onItemClick(getCurrentItem());
      }
      return true;
    }
  }

}

要实现动画效果的核心就在 setPageTransformer(true, new VerticalPageTransformer());，大家都知道这个是设置Viewpager 设置动画的方法，那么要实现这个如果用系统自带的切换动画效果的话肯定是不符合Viewpager 竖屏滑动的效果的。所以自定义PageTransformer 就是必然的趋势了

private class VerticalPageTransformer implements ViewPager.PageTransformer {
    private float MIN_SCALE = 0.5f;

    @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 <= 0) { // [-1,1]
        view.setAlpha(1 + position);
        view.setTranslationX(-view.getWidth() * position);
        view.setPivotY( view.getMeasuredHeight());
        view.setPivotX( view.getMeasuredWidth()/2);
        view.setTranslationY( position * view.getHeight());
        float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
            * (1 - Math.abs(position));
        view.setScaleX(scaleFactor);
        view.setScaleY(scaleFactor);

      }
      else if (position <= 1) { // [-1,1]
        view.setAlpha(1);
        view.setTranslationX(-view.getWidth() * position);
        view.setTranslationY( position * view.getHeight());
        float scaleFactor = MIN_SCALE + (1 - MIN_SCALE)
            * (1 - Math.abs(position));

      } else { // (1,+Infinity]
        view.setAlpha(0);
        view.setTranslationY( position * view.getHeight());
      }
    }

  }

重写transformPage 方法。然后得到如上gif 向左旋转90的效果，剩下的代码你们看看也就知道是item点击事件与滑动事件的监听。所以就不细讲了

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持靠谱客。