本文實例為大家分享了Android下拉頂部圖片縮放效果展示的具體代碼,供大家參考,具體內(nèi)容如下
效果圖

效果分析
1 向下滑動,頭部的圖片隨著手指滑動不斷變大
2 向上滑動,不斷的向上移動圖片,直到圖片不可見
3 當(dāng)頂部圖片不可見時,向上滑動,滑動ListView
實現(xiàn)思路
1 由于這個View分上下兩部分,垂直排列,可以通過繼承LinearLayout實現(xiàn)::自定義一個DragImageView,該View繼承LinearLayout
public DragImageView(Context context, AttributeSet attrs) { super(context, attrs); // 默認(rèn)該View垂直排列 setOrientation(LinearLayout.VERTICAL); // 用于配合處理該View的慣性滑動 mScroller = new OverScroller(context); mTouchSlop = ViewConfiguration.get(context).getScaledTouchSlop(); mMaximumVelocity = ViewConfiguration.get(context) .getScaledMaximumFlingVelocity(); mMinimumVelocity = ViewConfiguration.get(context) .getScaledMinimumFlingVelocity(); }2 onMeasure中設(shè)置內(nèi)容視圖的高度
@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); LayoutParams params = (LayoutParams) getChildAt(1).getLayoutParams(); // 頭部可以全部隱藏,所以內(nèi)容視圖的高度即為該控件的高度 params.height = getMeasuredHeight();}3 設(shè)置ImageView的ScaleType屬性
@Overrideprotected void onFinishInflate() { super.onFinishInflate(); imageView = (ImageView) getChildAt(0); // 隨著手指滑動,圖片不斷放大(寬高都大于或者等于ImageView的大小),并居中顯示: // 根據(jù)上邊的分析,CENTER_CROP:可以使用均衡的縮放圖像(保持圖像原始比例),使圖片的兩個坐標(biāo)(寬、高)都大于等于 相應(yīng)的視圖坐標(biāo)(負(fù)的內(nèi)邊距),圖像則位于視圖的中央 imageView.setScaleType(ScaleType.CENTER_CROP); listView = (ListView) getChildAt(1);}4 事件攔截
@Overridepublic boolean onInterceptTouchEvent(MotionEvent ev) { if (ev.getAction() == MotionEvent.ACTION_DOWN) { downX = (int) ev.getX(); downY = (int) ev.getY(); } if (ev.getAction() == MotionEvent.ACTION_MOVE) { int currentX = (int) ev.getX(); int currentY = (int) ev.getY(); // 確保是垂直滑動 if (Math.abs(currentY - downY) > Math.abs(currentX - downX)) { View childView = listView.getChildAt(listView .getFirstVisiblePosition()); // 有兩種情況需要攔截: // 1 圖片沒有完全隱藏 // 2 圖片完全隱藏,但是向下滑動,并且ListView滑動到頂部 if (getScrollY() != imageHeight || (getScrollY() == imageHeight && currentY - downY > 0 && childView != null && childView.getTop() == 0)) { initVelocityTrackerIfNotExists(); mVelocityTracker.addMovement(ev); return true; } } } if (ev.getAction() == MotionEvent.ACTION_UP) { recycleVelocityTracker(); } return super.onInterceptTouchEvent(ev);}5 onTouchEvent的ACTION_MOVE處理
if (ev.getAction() == MotionEvent.ACTION_MOVE) { int currentX = (int) ev.getX(); int currentY = (int) ev.getY(); int deltyX = currentX - downX; int deltyY = currentY - downY; if (Math.abs(deltyY) > Math.abs(deltyX)) { if (deltyY > 0) { if (getScrollY() > 0) { if (getScrollY() - deltyY < 0) { scrollBy(0, -getScrollY()); return true; } // 當(dāng)圖片沒有完全顯示,并且向下滑動時,繼續(xù)整個view使圖片可見 scrollBy(0, -deltyY); } else { // 當(dāng)圖片完全顯示,并且向下滑動時,則不斷的放大圖片(通過改變ImageView)的高度 LayoutParams layoutParams = (LayoutParams) getChildAt(0) .getLayoutParams(); layoutParams.height = layoutParams.height + deltyY / 2; getChildAt(0).setLayoutParams(layoutParams); } } else { // 當(dāng)圖片還處于放大狀態(tài),并且向上滑動時,繼續(xù)不斷的縮小圖片的高度,使圖片縮小 if (getChildAt(1).getTop() > imageHeight) { LayoutParams layoutParams = (LayoutParams) getChildAt(0) .getLayoutParams(); layoutParams.height = layoutParams.height + deltyY / 2; getChildAt(0).setLayoutParams(layoutParams); } else { // 當(dāng)圖片處于正常狀態(tài),并且向上滑動時,移動整個View,縮小圖片的可見范圍 if (getScrollY() - deltyY > imageHeight) { scrollBy(0, imageHeight - getScrollY()); return true; } scrollBy(0, -deltyY); } } downY = currentY; downX = currentX; return true; } }6 onTouchEvent的ACTION_UP處理
if (ev.getAction() == MotionEvent.ACTION_UP) { // 當(dāng)圖片處于放大狀態(tài)時松手,使圖片緩慢的縮回到原來的狀態(tài) if (getChildAt(1).getTop() > imageHeight) { isAnimating = true; ValueAnimator valueAnimator = ValueAnimator.ofInt(getChildAt(1) .getTop(), imageHeight); valueAnimator.setDuration(300); valueAnimator.addUpdateListener(new AnimatorUpdateListener() { @Override public void onAnimationUpdate(ValueAnimator animation) { int value = (Integer) animation.getAnimatedValue(); LayoutParams layoutParams = (LayoutParams) getChildAt(0) .getLayoutParams(); layoutParams.height = value; getChildAt(0).setLayoutParams(layoutParams); } }); valueAnimator.addListener(new AnimatorListenerAdapter() { @Override public void onAnimationEnd(Animator animation) { super.onAnimationEnd(animation); isAnimating = false; } }); valueAnimator.start(); } // 當(dāng)現(xiàn)在圖片處于正常狀態(tài),并且圖片沒有完全隱藏,并且松手時滑動的速度大于可慣性滑動的最小值,讓View產(chǎn)生慣性滑動效果 if (getChildAt(1).getTop() == imageHeight && getScrollY() != imageHeight) { mVelocityTracker.computeCurrentVelocity(1000, mMaximumVelocity); int velocityY = (int) mVelocityTracker.getYVelocity(); if (Math.abs(velocityY) > mMinimumVelocity) { fling(-velocityY); } recycleVelocityTracker(); }總結(jié)
這里主要有兩個學(xué)習(xí)的點
1 圖片縮放的處理,事件的攔截
2 View的慣性滑動:主要是結(jié)合OverScroller的使用
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持VEVB武林網(wǎng)。
新聞熱點
疑難解答
圖片精選