Android自定義ScrollView實現放大回彈效果實例代碼

2019-12-12 03:22:20

字體：大中小

來源：轉載

供稿：網友

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

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

3，自定義ScrollView

第一步：創建一個類，繼承自ScrollView，重寫相應的構造函數

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();    //設置不可過度滾動，否則上移后下拉會出現部分空白的情況    setOverScrollMode(OVER_SCROLL_NEVER);    View child = getChildAt(0);    if (child != null && child instanceof ViewGroup) {      //獲取默認第一個子View      mHeaderView = ((ViewGroup) child).getChildAt(0);    }  }

第三步：重寫OnTouchEvent（）方法，在Action_Move方法中拿到下滑的距離，通過設置head_view的屬性參數來改變它的大小，在UP的時候還原head_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的時候通過屬性動畫動態的改變head_view的值，并重寫onSizeChange（）方法，實時的記錄head_view的寬高

/** ** 放大view */  private void setZoom(float s) {    float scaleTimes = (float) ((mHeaderWidth + s) / (mHeaderWidth * 1.0));//    如超過最大放大倍數，直接返回    if (scaleTimes > mScaleTimes) return;     ViewGroup.LayoutParams layoutParams = mHeaderView.getLayoutParams();    layoutParams.width = (int) (mHeaderWidth + s);    layoutParams.height = (int) (mHeaderHeight * ((mHeaderWidth + s) / mHeaderWidth));//    設置控件水平居中    ((MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width - mHeaderWidth) / 2, 0, 0, 0);    mHeaderView.setLayoutParams(layoutParams);  }   /**   * 回彈   */  private void replyView() {    final float distance = mHeaderView.getMeasuredWidth() - mHeaderWidth;    // 設置動畫    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();  }

這樣就實現了我們的效果了，看一下我們自己實現的效果：