在MIUI上有一些介面在拖動的時候有一個視差效果：
在可以滾動的檢視中，內容滾動到頂部時繼續下拉，整個檢視就有一個豎直方向拉伸的視差效果。滾動到底部繼續上拉，也有同樣的效果。
滾動檢視可能是ScrollView、RecyclerView，要實現這樣的效果，需要自定義並攔截Touch事件，重新處理事件邏輯。
以RecyclerView為例，我們自定義一個ParallaxRecyclerView，複寫onInterceptTouchEvent方法：
@Override
public boolean onInterceptTouchEvent(MotionEvent event) {
int action = MotionEventCompat.getActionMasked(event);
if (isRestoring && action == MotionEvent.ACTION_DOWN) {
isRestoring = false;
}
if (!isEnabled() || isRestoring || (!isScrollToTop() && !isScrollToBottom())) {
return super.onInterceptTouchEvent(event);
}
switch (action) {
case MotionEvent.ACTION_DOWN: {
mActivePointerId = event.getPointerId(0);
isBeingDragged = false;
float initialMotionY = getMotionEventY(event);
if (initialMotionY == -1) {
return super.onInterceptTouchEvent(event);
}
mInitialMotionY = initialMotionY;
break;
}
case MotionEvent.ACTION_MOVE: {
if (mActivePointerId == MotionEvent.INVALID_POINTER_ID) {
return super.onInterceptTouchEvent(event);
}
final float y = getMotionEventY(event);
if (y == -1f) {
return super.onInterceptTouchEvent(event);
}
if (isScrollToTop() && !isScrollToBottom()) {
// 在頂部不在底部
float yDiff = y - mInitialMotionY;
if (yDiff > mTouchSlop && !isBeingDragged) {
isBeingDragged = true;
}
} else if (!isScrollToTop() && isScrollToBottom()) {
// 在底部不在頂部
float yDiff = mInitialMotionY - y;
if (yDiff > mTouchSlop && !isBeingDragged) {
isBeingDragged = true;
}
} else if (isScrollToTop() && isScrollToBottom()) {
// 在底部也在頂部
float yDiff = y - mInitialMotionY;
if (Math.abs(yDiff) > mTouchSlop && !isBeingDragged) {
isBeingDragged = true;
}
} else {
// 不在底部也不在頂部
return super.onInterceptTouchEvent(event);
}
break;
}
case MotionEventCompat.ACTION_POINTER_UP:
onSecondaryPointerUp(event);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL:
mActivePointerId = MotionEvent.INVALID_POINTER_ID;
isBeingDragged = false;
break;
}
return isBeingDragged || super.onInterceptTouchEvent(event);
}複製程式碼滾動RecyclerView到達頂部或者底部繼續拖動時，需要攔截Touch事件。所以在MotionEvent.ACTION_MOVE時需要判斷當前RecyclerView是否在頂部或者底部。需要注意的是，當RecyclerView中的item沒有填充滿整檢視時，RecyclerView的狀態既是在頂部也是在底部。
private boolean isScrollToTop() {
return !ViewCompat.canScrollVertically(this, -1);
}
private boolean isScrollToBottom() {
return !ViewCompat.canScrollVertically(this, 1);
}複製程式碼mActivePointerId表示在多點觸控是當前活動手指的id，mInitialMotionY為手指按下時的Y座標。
當達到頂部或底部繼續拖動時，根據當前的位置（isScrollToTop()、isScrollToBottom()）和ACTION_MOVE時的移動距離yDiff來判斷是否需要攔截：在頂部時向上拖動並且yDiff>mTouchSlop就需要攔截，底部時向下拖動同樣yDiff>mTouchSlop也需要攔截，同時在頂部和底部時滿足Math.abs(yDiff)>mTouchSlop也需要攔截。需要攔截都是在沒有被拖動（!isBeingDragged）的情況下。
RecyclerViev既沒有在頂部也沒有在底部時，說明item滾動到中間，可以上下繼續滾動，不需要攔截，交給super.onInterceptTouchEvent(event)來處理。同時其它不需要攔截的情況也都交給super來處理。
onSecondaryPointerUp(event)為當第二個手指離開螢幕是需要重新設定mActivePointerId:
private void onSecondaryPointerUp(MotionEvent event) {
final int pointerIndex = MotionEventCompat.getActionIndex(event);
final int pointerId = event.getPointerId(pointerIndex);
if (pointerId == mActivePointerId) {
int newPointerIndex = pointerIndex == 0 ? 1 : 0;
mActivePointerId = event.getPointerId(newPointerIndex);
}
}複製程式碼攔截到TouchEvent，在onTouchEven中處理，實現拖動視差效果：
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (MotionEventCompat.getActionMasked(event)) {
case MotionEvent.ACTION_DOWN:
mActivePointerId = event.getPointerId(0);
isBeingDragged = false;
break;
case MotionEvent.ACTION_MOVE: {
float y = getMotionEventY(event);
if (isScrollToTop() && !isScrollToBottom()) {
// 在頂部不在底部
mDistance = y - mInitialMotionY;
if (mDistance < 0) {
return super.onTouchEvent(event);
}
mScale = calculateRate(mDistance);
pull(mScale);
return true;
} else if (!isScrollToTop() && isScrollToBottom()) {
// 在底部不在頂部
mDistance = mInitialMotionY - y;
if (mDistance < 0) {
return super.onTouchEvent(event);
}
mScale = calculateRate(mDistance);
push(mScale);
return true;
} else if (isScrollToTop() && isScrollToBottom()) {
// 在底部也在頂部
mDistance = y - mInitialMotionY;
if (mDistance > 0) {
mScale = calculateRate(mDistance);
pull(mScale);
} else {
mScale = calculateRate(-mDistance);
push(mScale);
}
return true;
} else {
// 不在底部也不在頂部
return super.onTouchEvent(event);
}
}
case MotionEventCompat.ACTION_POINTER_DOWN:
mActivePointerId = event.getPointerId(MotionEventCompat.getActionIndex(event));
break;
case MotionEventCompat.ACTION_POINTER_UP:
onSecondaryPointerUp(event);
break;
case MotionEvent.ACTION_UP:
case MotionEvent.ACTION_CANCEL: {
if (isScrollToTop() && !isScrollToBottom()) {
animateRestore(true);
} else if (!isScrollToTop() && isScrollToBottom()) {
animateRestore(false);
} else if (isScrollToTop() && isScrollToBottom()) {
if (mDistance > 0) {
animateRestore(true);
} else {
animateRestore(false);
}
} else {
return super.onTouchEvent(event);
}
break;
}
}
return super.onTouchEvent(event);
}複製程式碼程式碼雖然有點長，但是邏輯很簡單，在攔截到ACTION_MOVE事件後，同樣根據頂部或底部位置以及滾動的距離mDistance來確定是否消費掉該事件。不需要消費的直接給`super.onTouchEvent(event)來處理，需要消費的話根據mDistance來計算出縮放的比例mScale，再通過pull(mScale)和push(mScale)來縮放。
private float calculateRate(float distance) {
int screenHeight = getResources().getDisplayMetrics().heightPixels;
float originalDragPercent = distance / screenHeight;
float dragPercent = Math.min(1f, originalDragPercent);
float rate = 2f * dragPercent - (float) Math.pow(dragPercent, 2f);
return 1 + rate / 5f;
}複製程式碼mScale的計算是一個二次函式，當拖動距離越大時，mScale的變化程度越小，這樣使得拖動時有一個張力效果。
private void pull(float scale) {
this.setPivotY(0);
this.setScaleY(scale);
}
private void push(float scale) {
this.setPivotY(this.getHeight());
this.setScaleY(scale);
}複製程式碼在ACTION_UP時，需要將縮放的檢視通過動畫還原到初始狀態。這裡也需要判斷位置，因為不同位置的的縮放中心點不一樣。同時即在頂部也在底部時是根mDistance的正負值來判斷拖動的方向。
private void animateRestore(final boolean isPullRestore) {
ValueAnimator animator = ValueAnimator.ofFloat(mScale, 1f);
animator.setDuration(300);
animator.setInterpolator(new DecelerateInterpolator(2f));
animator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
if (isPullRestore) {
pull(value);
} else {
push(value);
}
}
});
animator.addListener(new Animator.AnimatorListener() {
@Override
public void onAnimationStart(Animator animation) {
isRestoring = true;
}
@Override
public void onAnimationEnd(Animator animation) {
isRestoring = false;
}
@Override
public void onAnimationCancel(Animator animation) {
}
@Override
public void onAnimationRepeat(Animator animation) {
}
});
animator.start();
}複製程式碼這樣就OK了，如果需要實現ScrollView、ListView、GridView也是一樣的邏輯，原始碼中已經有了ParallaxScrollView的實現，看下最終效果圖：
