Android自定義ScrollView實現(xiàn)放大回彈效果實例代碼

更新時間：2017年03月15日 08:23:45 作者：阿呆哥哥

本篇文章主要介紹了Android自定義ScrollView實現(xiàn)放大回彈效果實例代碼，具有一定的參考價值，有興趣的可以了解一下。

1，剛剛在別人開源的項目中看到了一個挺不錯的用戶體驗，效果圖如下：

2，那下面我們就來實現(xiàn)一下，首先看一下布局，由于一般只是我們包含頭像的那部分方法，所以這里我們要把布局分成兩部分，對應(yīng)的布局文件效果圖如下：

3，自定義ScrollView

第一步：創(chuàng)建一個類，繼承自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);

  }

}

第二步：重寫OnFinishInflate()方法，并記錄第一個子view，即我們的head_fragment

@Override

  protected void onFinishInflate() {

    super.onFinishInflate();

    //設(shè)置不可過度滾動，否則上移后下拉會出現(xiàn)部分空白的情況

    setOverScrollMode(OVER_SCROLL_NEVER);

    View child = getChildAt(0);

    if (child != null && child instanceof ViewGroup) {

      //獲取默認第一個子View

      mHeaderView = ((ViewGroup) child).getChildAt(0);

    }

  }

第三步：重寫OnTouchEvent（）方法，在Action_Move方法中拿到下滑的距離，通過設(shè)置head_view的屬性參數(shù)來改變它的大小，在UP的時候還原h(huán)ead_view

@Override

  public boolean onTouchEvent(MotionEvent ev) {

    if (mHeaderView == null)

      return super.onTouchEvent(ev);

    switch (ev.getAction()) {

      case MotionEvent.ACTION_MOVE:

        if (!mIsPulling) {

          //第一次下拉

          if (getScrollY() == 0) {

            //在頂部的時候，記錄頂部位置

            mLastY = (int) ev.getY();

          } else {

            break;

          }

        }

        if (ev.getY() - mLastY < 0)

          return super.onTouchEvent(ev);

        int distance = (int) ((ev.getY() - mLastY) * mScaleRatio);

        mIsPulling = true;

        setZoom(distance);

        return true;

      case MotionEvent.ACTION_UP:

        mIsPulling = false;

        replyView();

        break;

    }

    return super.onTouchEvent(ev);

  }

在回彈view的時候通過屬性動畫動態(tài)的改變head_view的值，并重寫onSizeChange（）方法，實時的記錄head_view的寬高

/**

 ** 放大view

 */

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

  }

 

  /**

   * 回彈

   */

  private void replyView() {

    final float distance = mHeaderView.getMeasuredWidth() - mHeaderWidth;

    // 設(shè)置動畫

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

  }

 

@Override

  protected void onSizeChanged(int w, int h, int oldw, int oldh) {

    super.onSizeChanged(w, h, oldw, oldh);

    mHeaderWidth = mHeaderView.getMeasuredWidth();

    mHeaderHeight = mHeaderView.getMeasuredHeight();

  }

這樣就實現(xiàn)了我們的效果了，看一下我們自己實現(xiàn)的效果：