前言
之前做項目的時候，需要實現類似微博個人主頁的ScrollView效果，就是到頂部時繼續下拉會放大頂部的圖片。然后在網上找了一篇相關的實現，效果非常好，代碼也很簡潔易懂。(傳送門: 自定義scrollView實現頂部圖片下拉放大)，那么我這里就只是在其基礎上修改了一點點而已，比如在代碼中控制圖片居中、增加動態設置放大的控件、使用自定義的最大放大倍數等，都是很簡單的修改，還添加了滑動的監聽回調(項目需要)。
效果如下:
思路
老樣子，我們先來說下思路，比起代碼，思路才是最重要的。具體步驟如下：
1. 獲得要放大的控件，并獲得其寬高；
2. 在頂部時繼續往下拉，通過LayoutParams改變控件的寬高；
3. 手指抬起時初始化各項參數，通過屬性動畫回彈控件。
實現
直接看代碼
public class HeadZoomScrollView extends ScrollView { public HeadZoomScrollView(Context context) { super(context); } public HeadZoomScrollView(Context context, AttributeSet attrs) { super(context, attrs); } public HeadZoomScrollView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); } // 用于記錄下拉位置 private float y = 0f; // zoomView原本的寬高 private int zoomViewWidth = 0; private int zoomViewHeight = 0; // 是否正在放大 private boolean mScaling = false; // 放大的view，默認為第一個子view private View zoomView; public void setZoomView(View zoomView) { this.zoomView = zoomView; } // 滑動放大系數，系數越大，滑動時放大程度越大 private float mScaleRatio = 0.4f; public void setmScaleRatio(float mScaleRatio) { this.mScaleRatio = mScaleRatio; } // 最大的放大倍數 private float mScaleTimes = 2f; public void setmScaleTimes(int mScaleTimes) { this.mScaleTimes = mScaleTimes; } // 回彈時間系數，系數越小，回彈越快 private float mReplyRatio = 0.5f; public void setmReplyRatio(float mReplyRatio) { this.mReplyRatio = mReplyRatio; } @Override protected void onFinishInflate() { super.onFinishInflate();// 不可過度滾動，否則上移后下拉會出現部分空白的情況 setOverScrollMode(OVER_SCROLL_NEVER);// 獲得默認第一個view if (getChildAt(0) != null && getChildAt(0) instanceof ViewGroup && zoomView == null) { ViewGroup vg = (ViewGroup) getChildAt(0); if (vg.getChildCount() > 0) { zoomView = vg.getChildAt(0); } } } @Override public boolean onTouchEvent(MotionEvent ev) { if (zoomViewWidth <= 0 || zoomViewHeight <=0) { zoomViewWidth = zoomView.getMeasuredWidth(); zoomViewHeight = zoomView.getMeasuredHeight(); } if (zoomView == null || zoomViewWidth <= 0 || zoomViewHeight <= 0) { return super.onTouchEvent(ev); } switch (ev.getAction()) { case MotionEvent.ACTION_MOVE: if (!mScaling) { if (getScrollY() == 0) { y = ev.getY();//滑動到頂部時，記錄位置 } else { break; } } int distance = (int) ((ev.getY() - y)*mScaleRatio); if (distance < 0) break;//若往下滑動 mScaling = true; setZoom(distance); return true; case MotionEvent.ACTION_UP: mScaling = false; replyView(); break; } return super.onTouchEvent(ev); } /**放大view*/ private void setZoom(float s) { float scaleTimes = (float) ((zoomViewWidth+s)/(zoomViewWidth*1.0));// 如超過最大放大倍數，直接返回 if (scaleTimes > mScaleTimes) return; ViewGroup.LayoutParams layoutParams = zoomView.getLayoutParams(); layoutParams.width = (int) (zoomViewWidth + s); layoutParams.height = (int)(zoomViewHeight*((zoomViewWidth+s)/zoomViewWidth));// 設置控件水平居中 ((MarginLayoutParams) layoutParams).setMargins(-(layoutParams.width - zoomViewWidth) / 2, 0, 0, 0); zoomView.setLayoutParams(layoutParams); } /**回彈*/ private void replyView() { final float distance = zoomView.getMeasuredWidth() - zoomViewWidth; // 設置動畫 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 onScrollChanged(int l, int t, int oldl, int oldt) { super.onScrollChanged(l, t, oldl, oldt); if (onScrollListener!=null) onScrollListener.onScroll(l,t,oldl,oldt); } private OnScrollListener onScrollListener; public void setOnScrollListener(OnScrollListener onScrollListener) { this.onScrollListener = onScrollListener; } /**滑動監聽*/ public interface OnScrollListener{ void onScroll(int scrollX,int scrollY,int oldScrollX, int oldScrollY); }}可以看到，在onTouchEvent方法中，先判斷當前是否為放大狀態，不是的話就在頂部的時候記錄觸摸事件的位置，當然這個寫在ACTION_DOWN事件中也是可以的，若不在頂部，則不處理。
之后計算滑動的距離，若是往下滑動，則不處理，需要注意的是這個距離是指當前位置與最開始的ACTION_DOWN動作的距離，因此當這個距離小于0的時候，便是”沒放大&&往下滑”，這個時候應該滑動的是ScrollView，恩，沒毛病。當距離不小于0的時候，開始放大控件，可以看到調用了setZoom方法，注意，在這里其實控件的下拉放大、上拉恢復都做了， 回彈其實也是調用這個方法。
抬手的時候回彈，這個不需要說了。
代碼整體來說比較簡單，要是你需要其他實現，也可以很方便地加上，比如我們要放大圖片的時候像微博一樣，旋轉外部的菊花，放手的時候刷新數據怎么辦？你完全可以在
onTouchEvent中增加回調接口，然后在外部實現具體邏輯就可以了。
使用
直接像普通的ScollView樣使用就可以了，這個就不累贅了。
源碼：下載地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
