背景
在很多項目中我們都會用到ScrollView這個控件，因為ScrollView能夠在屏幕內容多時下上滑動以適配加載的內容。但是ScrollView滑動時效果感覺太死板了，這個時候我們如果給它添加一個回彈的動畫效果，會讓界面交互更加舒服，提升用戶體驗效果。
自定義ScrollView
1、創建一個類，繼承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); }}2、獲取默認第一個子View即我們的頭部mHeaderView
@Overrideprotected void onFinishInflate() { super.onFinishInflate(); // 設置不可過度滾動，否則上移后下拉會出現部分空白的情況 setOverScrollMode(OVER_SCROLL_NEVER); View child = getChildAt(0); if (child != null && child instanceof ViewGroup) { // 獲取默認第一個子View ViewGroup vg = (ViewGroup) getChildAt(0); if (vg.getChildAt(0) != null) { mHeaderView = vg.getChildAt(0); } }}3、獲取頭部View的長和寬
@Overrideprotected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); mHeaderWidth = mHeaderView.getMeasuredWidth(); mHeaderHeight = mHeaderView.getMeasuredHeight();}4、設置上下滑動標記
@Overridepublic 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、監聽觸摸事件
private void commOnTouchEvent(MotionEvent ev) { switch (ev.getAction()) { case MotionEvent.ACTION_UP: // 手指離開后頭部恢復圖片 mIsPulling = false; replyView(); clear(); break; case MotionEvent.ACTION_MOVE: if (!mIsPulling) { // 第一次下拉 if (getScrollY() == 0) { // 滾動到頂部時記錄位置，否則正常返回 mLastY = (int) ev.getY(); } else { break; } } int distance = (int) ((ev.getY() - mLastY) * mScaleRatio); // 當前位置比記錄位置要小時正常返回 if (distance < 0) { break; } mIsPulling = true; setZoom(distance); break; }}6、頭部縮放
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);}7、回彈動畫
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();}通過以上方式就可以簡單的實現我們想要的效果了！
項目地址 ? 傳送門
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。
新聞熱點
疑難解答
