Android自定義ScrollView實(shí)現(xiàn)放大回彈效果

更新時(shí)間：2017年05月24日 16:24:20 作者：w一花一世界w

這篇文章主要為大家詳細(xì)介紹了Android自定義ScrollView實(shí)現(xiàn)放大回彈效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

背景

在很多項(xiàng)目中我們都會用到ScrollView這個(gè)控件，因?yàn)镾crollView能夠在屏幕內(nèi)容多時(shí)下上滑動(dòng)以適配加載的內(nèi)容。但是ScrollView滑動(dòng)時(shí)效果感覺太死板了，這個(gè)時(shí)候我們?nèi)绻o它添加一個(gè)回彈的動(dòng)畫效果，會讓界面交互更加舒服，提升用戶體驗(yàn)效果。

自定義ScrollView

1、創(chuàng)建一個(gè)類，繼承ScrollView并重寫相應(yīng)的構(gòu)造函數(shù)

public class ZoomInScrollView extends ScrollView {

  public ZoomInScrollView(Context context) {
    this(context, null);
  }

  public ZoomInScrollView(Context context, AttributeSet attrs) {
    this(context, attrs, 0);
  }

  public ZoomInScrollView(Context context, AttributeSet attrs, int defStyleAttr) {
    super(context, attrs, defStyleAttr);
  }
}

2、獲取默認(rèn)第一個(gè)子View即我們的頭部mHeaderView

@Override
protected void onFinishInflate() {
  super.onFinishInflate();
  // 設(shè)置不可過度滾動(dòng)，否則上移后下拉會出現(xiàn)部分空白的情況
  setOverScrollMode(OVER_SCROLL_NEVER);
  View child = getChildAt(0);
  if (child != null && child instanceof ViewGroup) {
    // 獲取默認(rèn)第一個(gè)子View
    ViewGroup vg = (ViewGroup) getChildAt(0);
    if (vg.getChildAt(0) != null) {
      mHeaderView = vg.getChildAt(0);
    }
  }
}

3、獲取頭部View的長和寬

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
  super.onSizeChanged(w, h, oldw, oldh);
  mHeaderWidth = mHeaderView.getMeasuredWidth();
  mHeaderHeight = mHeaderView.getMeasuredHeight();
}

4、設(shè)置上下滑動(dòng)標(biāo)記

@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
  currentX = ev.getX();
  currentY = ev.getY();

  switch (ev.getAction()) {
    case MotionEvent.ACTION_MOVE:
      distanceX = currentX - lastX;
      distanceY = currentY - lastY;
      if (Math.abs(distanceX) < Math.abs(distanceY) && Math.abs(distanceY) > 12) {
        upDownSlide = true;
      }
      break;
  }

  lastX = currentX;
  lastY = currentY;

  if (upDownSlide && mHeaderView != null) {
    commOnTouchEvent(ev);
  }
  return super.dispatchTouchEvent(ev);
}

5、監(jiān)聽觸摸事件

private void commOnTouchEvent(MotionEvent ev) {
  switch (ev.getAction()) {
    case MotionEvent.ACTION_UP:
      // 手指離開后頭部恢復(fù)圖片
      mIsPulling = false;
      replyView();
      clear();
      break;
    case MotionEvent.ACTION_MOVE:
      if (!mIsPulling) {
        // 第一次下拉
        if (getScrollY() == 0) {
          // 滾動(dòng)到頂部時(shí)記錄位置，否則正常返回
          mLastY = (int) ev.getY();
        } else {
          break;
        }
      }

      int distance = (int) ((ev.getY() - mLastY) * mScaleRatio);
      // 當(dāng)前位置比記錄位置要小時(shí)正常返回
      if (distance < 0) {
        break;
      }
      mIsPulling = true;
      setZoom(distance);
      break;
  }
}

6、頭部縮放

private void setZoom(float s) {
  float scaleTimes = (float) ((mHeaderWidth + s) / (mHeaderWidth * 1.0));
  // 如超過最大放大倍數(shù)則直接返回
  if (scaleTimes > mScaleTimes) {
    return;
  }
  ViewGroup.LayoutParams layoutParams = mHeaderView.getLayoutParams();
  layoutParams.width = (int) (mHeaderWidth + s);
  layoutParams.height = (int) (mHeaderHeight * ((mHeaderWidth + s) / mHeaderWidth));
  // 設(shè)置控件水平居中
  ((MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width - mHeaderWidth) / 2, 0, 0, 0);
  mHeaderView.setLayoutParams(layoutParams);
}

7、回彈動(dòng)畫

private void replyView() {
  final float distance = mHeaderView.getMeasuredWidth() - mHeaderWidth;
  // 設(shè)置動(dòng)畫
  ValueAnimator anim = ObjectAnimator.ofFloat(distance, 0.0F).setDuration((long) (distance * mReplyRatio));
  anim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
    @Override
    public void onAnimationUpdate(ValueAnimator animation) {
      setZoom((Float) animation.getAnimatedValue());
    }
  });
  anim.start();
}

通過以上方式就可以簡單的實(shí)現(xiàn)我們想要的效果了！

項(xiàng)目地址 ☞ 傳送門

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

您可能感興趣的文章: