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

發(fā)布時(shí)間：2020-10-09 13:17:16 來(lái)源：腳本之家閱讀：278 作者：阿呆哥哥欄目：移動(dòng)開(kāi)發(fā)

1，剛剛在別人開(kāi)源的項(xiàng)目中看到了一個(gè)挺不錯(cuò)的用戶(hù)體驗(yàn)，效果圖如下：

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

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

3，自定義ScrollView

第一步：創(chuàng)建一個(gè)類(lèi)，繼承自ScrollView，重寫(xiě)相應(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);

  }

}

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

@Override

  protected void onFinishInflate() {

    super.onFinishInflate();

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

    setOverScrollMode(OVER_SCROLL_NEVER);

    View child = getChildAt(0);

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

      //獲取默認(rèn)第一個(gè)子View

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

    }

  }

第三步：重寫(xiě)OnTouchEvent（）方法，在Action_Move方法中拿到下滑的距離，通過(guò)設(shè)置head_view的屬性參數(shù)來(lái)改變它的大小，在UP的時(shí)候還原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) {

            //在頂部的時(shí)候，記錄頂部位置

            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的時(shí)候通過(guò)屬性動(dòng)畫(huà)動(dòng)態(tài)的改變head_view的值，并重寫(xiě)onSizeChange（）方法，實(shí)時(shí)的記錄head_view的寬高

/**

 ** 放大view

 */

  private void setZoom(float s) {

    float scaleTimes = (float) ((mHeaderWidth + s) / (mHeaderWidth * 1.0));

//    如超過(guò)最大放大倍數(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è)置動(dòng)畫(huà)

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

  }

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

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

demo下載：ZoomInScrollView_jb51.rar

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

向AI問(wèn)一下細(xì)節(jié)

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

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽