android viewpager實(shí)現(xiàn)豎屏滑動(dòng)效果

更新時(shí)間：2018年07月17日 09:15:25 作者：ben羽毛

這篇文章主要為大家詳細(xì)介紹了android viewpager實(shí)現(xiàn)豎屏滑動(dòng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

Viewpager 橫向滑動(dòng)效果系統(tǒng)就自帶了很多種，比如這個(gè)

效果

那如果做成豎屏的這種效果呢。我百度過(guò)很多，效果都不是很好，有的代碼特別多而且存在很多問(wèn)題。我結(jié)合了以前別人的代碼現(xiàn)在來(lái)教大家個(gè)簡(jiǎn)單的實(shí)現(xiàn)過(guò)程。

首先自定義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;
    }
  }

}

要實(shí)現(xiàn)動(dòng)畫(huà)效果的核心就在 setPageTransformer(true, new VerticalPageTransformer());，大家都知道這個(gè)是設(shè)置Viewpager 設(shè)置動(dòng)畫(huà)的方法，那么要實(shí)現(xiàn)這個(gè)如果用系統(tǒng)自帶的切換動(dòng)畫(huà)效果的話肯定是不符合Viewpager 豎屏滑動(dòng)的效果的。所以自定義PageTransformer 就是必然的趨勢(shì)了

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());
      }
    }

  }

重寫(xiě)transformPage 方法。然后得到如上gif 向左旋轉(zhuǎn)90的效果，剩下的代碼你們看看也就知道是item點(diǎn)擊事件與滑動(dòng)事件的監(jiān)聽(tīng)。所以就不細(xì)講了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: