頭部視差效果
-
1.案例演示：
頭部視差效果.gif 2.實(shí)現(xiàn)邏輯：
- 1.在ListView中添加頭部后，再調(diào)用overScrollBy方法()召耘，在里面滑動(dòng)的時(shí)候不斷增加ImageView高度直到達(dá)到最高高度停止落君；
==overScrollBy方法()這個(gè)方法先不簡(jiǎn)介消请，往后看杂腰！==
//不斷增加ImageView高度
int mHeaderHeight=mImageViewHeader.getHeight()-deltaY/3;
- 2.最大高度的計(jì)算為：當(dāng)前圖片的高度和ImageView的高度進(jìn)行對(duì)比，如果圖片的高度大于ImageView的高度則最大高度為圖片自身高度趾娃，否則為ImageView高度的2倍缭嫡；
//獲取圖片高度：
int pictureHeight=mImageViewHeader.getDrawable().getIntrinsicHeight();
//獲取控件高度：
//在onLayout執(zhí)行完畢后調(diào)用該方法，可以準(zhǔn)確獲取到控件高度：
mImageViewHeader.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
@Override
public void onGlobalLayout() {
mImageViewHeader.getViewTreeObserver().removeOnGlobalLayoutListener(this);
mOrignalHeight=mImageViewHeader.getHeight();
//設(shè)置最大高度：
int MaxHeight=mOrignalHeight>pictureHeight ? mOrignalHeight*2 : pictureHeight;
}
});
- 3.下拉改變圖片的高度：介紹下onScrollOverBy()
/**
* 在listview滑動(dòng)到頭的時(shí)候執(zhí)行抬闷，可以獲取到繼續(xù)滑動(dòng)的距離和方向
* deltaX：繼續(xù)滑動(dòng)x方向的距離
* deltaY：繼續(xù)滑動(dòng)y方向的距離 負(fù)：表示頂部到頭 正：表示底部到頭
* maxOverScrollX:x方向最大可以滾動(dòng)的距離
* maxOverScrollY：y方向最大可以滾動(dòng)的距離
* isTouchEvent: true: 是手指拖動(dòng)滑動(dòng) false:表示fling靠慣性滑動(dòng);
*/
//上面提到已經(jīng)在onScrollOverBy()里面獲取到了下拉時(shí)控件的高度和最大高度
@Override
protected boolean overScrollBy(int deltaX, int deltaY, int scrollX, int scrollY, int scrollRangeX, int scrollRangeY, int maxOverScrollX, int maxOverScrollY, boolean isTouchEvent) {
if (deltaY<0 && isTouchEvent){//deltaY<0是下拉妇蛀，isTouchEvent=true表明是手指下拉
if (mImageViewHeader!=null){
mHeaderHeight=mImageViewHeader.getHeight()-deltaY/3;
if (mHeaderHeight>MaxHeight) mHeaderHeight=MaxHeight;
//下拉后更新圖片高度：
mImageViewHeader.getLayoutParams().height=mHeaderHeight;
mImageViewHeader.requestLayout();//更新
}
}
return super.overScrollBy(deltaX, deltaY, scrollX, scrollY, scrollRangeX, scrollRangeY, maxOverScrollX, maxOverScrollY, isTouchEvent);
}
- 4.松手后還原圖片高度：主要是通過ValueAnimator屬性動(dòng)畫將圖片高度還原耕突；
@Override
public boolean onTouchEvent(MotionEvent ev) {
if (ev.getAction()==MotionEvent.ACTION_UP){//松手
//松手后緩慢讓圖片還原自身高度：
ValueAnimator valueAnimator=ValueAnimator.ofInt(mImageViewHeader.getHeight(),mOrignalHeight);
valueAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
int height= (int) animation.getAnimatedValue();
mImageViewHeader.getLayoutParams().height=height;
mImageViewHeader.requestLayout();//更新
}
});
valueAnimator.setDuration(350);
//增加滑動(dòng)到頭的彈性收縮特效
valueAnimator.setInterpolator(new OvershootInterpolator(5));
valueAnimator.start();
}
return super.onTouchEvent(ev);
}
- 5.細(xì)節(jié)處理：例如取消ListView滑動(dòng)到頭的藍(lán)色陰影、增加滑動(dòng)到頭的彈性收縮特效等评架；
listview.setOverScrollMode(ListView.OVER_SCROLL_NERVER);
- 3.GitHub項(xiàng)目源碼：戳我
