13518219792
小編給大家分享一下Android如何實現(xiàn)仿QQ好友詳情頁下拉頂部圖片縮放效果，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
創(chuàng)新互聯(lián)建站長期為上千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為榮成企業(yè)提供專業(yè)的網(wǎng)站設(shè)計、成都做網(wǎng)站，榮成網(wǎng)站改版等技術(shù)服務(wù)。擁有10余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。效果圖
效果分析
1 向下滑動，頭部的圖片隨著手指滑動不斷變大
2 向上滑動，不斷的向上移動圖片，直到圖片不可見
3 當頂部圖片不可見時，向上滑動，滑動ListView
實現(xiàn)思路
1 由于這個View分上下兩部分，垂直排列，可以通過繼承LinearLayout實現(xiàn)：：自定義一個DragImageView，該View繼承LinearLayout
public DragImageView(Context context, AttributeSet attrs) {
super(context, attrs);
// 默認該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)容視圖的高度
@Override
protected 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屬性
@Override
protected void onFinishInflate() {
super.onFinishInflate();
imageView = (ImageView) getChildAt(0);
// 隨著手指滑動，圖片不斷放大（寬高都大于或者等于ImageView的大小），并居中顯示：
// 根據(jù)上邊的分析，CENTER_CROP：可以使用均衡的縮放圖像（保持圖像原始比例），使圖片的兩個坐標（寬、高）都大于等于 相應(yīng)的視圖坐標（負的內(nèi)邊距）,圖像則位于視圖的中央
imageView.setScaleType(ScaleType.CENTER_CROP);
listView = (ListView) getChildAt(1);
}4 事件攔截
@Override
public 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;
}
// 當圖片沒有完全顯示，并且向下滑動時，繼續(xù)整個view使圖片可見
scrollBy(0, -deltyY);
} else {
// 當圖片完全顯示，并且向下滑動時，則不斷的放大圖片（通過改變ImageView）的高度
LayoutParams layoutParams = (LayoutParams) getChildAt(0)
.getLayoutParams();
layoutParams.height = layoutParams.height + deltyY / 2;
getChildAt(0).setLayoutParams(layoutParams);
}
} else {
// 當圖片還處于放大狀態(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 {
// 當圖片處于正常狀態(tài)，并且向上滑動時，移動整個View，縮小圖片的可見范圍
if (getScrollY() - deltyY > imageHeight) {
scrollBy(0, imageHeight - getScrollY());
return true;
}
scrollBy(0, -deltyY);
}
}
downY = currentY;
downX = currentX;
return true;
}
}5 onTouchEvent的ACTION_UP處理
if (ev.getAction() == MotionEvent.ACTION_UP) {
// 當圖片處于放大狀態(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();
}
// 當現(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();
}看完了這篇文章，相信你對“Android如何實現(xiàn)仿QQ好友詳情頁下拉頂部圖片縮放效果”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，感謝各位的閱讀！
