Android ViewDragHelper及移動處理總結
概述
2013年谷歌i/o大會上介紹了兩個新的layout: SlidingPaneLayout和DrawerLayout,現在這倆個類被廣泛的運用。我們知道在我們實際的開發中往往會涉及到很多的拖動效果,而ViewDragHelper解決了android中手勢處理過于復雜的問題。
其實ViewDragHelper并不是第一個用于分析手勢處理的類,gesturedetector也是,但是在和拖動相關的手勢分析方面gesturedetector只能說是勉為其難,其拓展性并不好。
為了方便大家的理解,我們首先來看一下android View對移動事件的處理。
View移動方法總結
layout
在自定義控件中,View繪制的一個重寫方法layout(),用來設置顯示的位置。所以,可以通過修改View的坐標值來改變view在父View的位置,以此可以達到移動的效果!但是缺點是只能移動指定的View,如常見的:
view.layout(l,t,r,b);
offsetLeftAndRight /offsetTopAndBottom
非常方便的封裝方法,只需提供水平、垂直方向上的偏移量,展示效果與layout()方法相同。
view.offsetLeftAndRight(offset);//同時改變left和right view.offsetTopAndBottom(offset);//同時改變top和bottom
LayoutParams
此類保存了一個View的布局參數,可通過LayoutParams動態改變一個布局的位置參數,以此動態地修改布局,達到View位置移動的效果!但是在獲取getLayoutParams()時,要根據該子View對應的父View布局來決定自身的LayoutParams 。所以一切的前提是:必須要有一個父View,否則無法獲取LayoutParams。
LinearLayout.LayoutParamslayoutParams = (LinearLayout.LayoutParams)getLayoutParams();
layoutParams.leftMargin = getLeft() + dx; layoutParams.topMargin = getTop() + dy; setLayoutParams(layoutParams);
scrollTo/scrollBy
通過改變scrollX和scrollY來移動,但是可以移動所有的子View。scrollTo(x,y)表示移動到一個具體的坐標點(x,y),而scrollBy(x,y)表示移動的增量為dx,dy。
注意:這里使用scrollBy(xOffset,yOffset);,你會發現并沒有效果,因為以上兩個方法移動的是View的content。若在ViewGroup中使用,移動的是所有子View;若在View中使用,移動的是View的內容(比如TextView)。所以,不可在view中使用以上方法!
要想使用scrollBy,應該在View所在的ViewGroup中使用:
((View)getParent()).scrollBy(offsetX, offsetY);
canvas
通過改變Canvas繪制的位置來移動View的內容,用的少,一般用在自定義的View中,比如老早之前實現手寫板:
canvas.drawBitmap(bitmap, left, top, paint)
說完View的移動相關的屬性,我們來看一下大名鼎鼎的ViewDragHelper。
ViewDragHelper
要理解ViewDragHelper,我們需要掌握以下幾點:
- ViewDragHelper.Callback是連接ViewDragHelper與view之間的橋梁;
- ViewDragHelper的實例是通過靜態工廠方法創建的;
- ViewDragHelper可以檢測到是否觸及到邊緣;
- ViewDragHelper并不是直接作用于要被拖動的View,而是使其控制的視圖容器中的子View可以被拖動,如果要指定某個子view的行為,需要在Callback中實現;
- ViewDragHelper的本質其實是分析onInterceptTouchEvent和onTouchEvent的MotionEvent參數,然后根據分析的結果去改變一個容器中被拖動子View的位置。
ViewDragHelper使用
-
ViewDragHelper的初始化
ViewDragHelper一般用在一個自定義ViewGroup的內部,比如下面自定義了一個繼承于LinearLayout的DragLayout,DragLayout內部有一個子view mDragView作為成員變量:
public class DragLayout extends LinearLayout {
private final ViewDragHelper mDragHelper;
private View mDragView;
public DragLayout(Context context) {
this(context, null);
}
public DragLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
public DragLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
}
創建一個帶有回調接口的ViewDragHelper。
public DragLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mDragHelper = ViewDragHelper.create(this, 1.0f, new DragHelperCallback());
}
說明:其中其二個參數是敏感度,參數參數越大越敏感。
然后ViewDragHelper將觸摸事件傳遞給ViewDragHelper進行處理。如:
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final int action = MotionEventCompat.getActionMasked(ev);
if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
mDragHelper.cancel();
return false;
}
return mDragHelper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
mDragHelper.processTouchEvent(ev);
return true;
}
-
拖動行為處理
在DragHelperCallback的回調方法中有很多的方法可以檢測View的事件,如常見的clampViewPositionHorizontal、clampViewPositionVertical,并且clampViewPositionHorizontal 和 clampViewPositionVertical必須要重寫,因為默認它返回的是0。
來看clampViewPositionHorizontal的處理。
在DragHelperCallback中實現clampViewPositionHorizontal方法, 并且返回一個適當的數值就能實現橫向拖動效果。
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
Log.d("DragLayout", "clampViewPositionHorizontal " + left + "," + dx);
final int leftBound = getPaddingLeft();
final int rightBound = getWidth() - mDragView.getWidth();
final int newLeft = Math.min(Math.max(left, leftBound), rightBound);
return newLeft;
}
- 其他事件處理
滑動邊緣事件檢測
分為滑動左邊緣還是右邊緣:EDGE_LEFT和EDGE_RIGHT,下面的代碼設置了可以處理滑動左邊緣:
mDragHelper.setEdgeTrackingEnabled(ViewDragHelper.EDGE_LEFT);
如上,我們設置為左邊緣檢測,當onEdgeTouched方法會在左邊緣滑動的時候被調用,這種情況下一般都是沒有和子view接觸的情況。
@Override
public void onEdgeTouched(int edgeFlags, int pointerId) {
super.onEdgeTouched(edgeFlags, pointerId);
Toast.makeText(getContext(), "edgeTouched", Toast.LENGTH_SHORT).show();
}
如果你想在邊緣滑動的時候根據滑動距離移動一個子view,可以通過實現onEdgeDragStarted方法,并在onEdgeDragStarted方法中手動指定要移動的子View,如之前仿音悅臺的頁面交互就用到了子View的檢測。
ViewDragHelper實戰
其實就之前是的的仿音悅臺的頁面交互效果吧,在13年就有國外的大神實現了
我們來看一段完整的代碼:
public class 油TubeLayout extends ViewGroup {
private final ViewDragHelper mDragHelper;
private View mHeaderView;
private View mDescView;
private float mInitialMotionX;
private float mInitialMotionY;
private int mDragRange;
private int mTop;
private float mDragOffset;
public 油TubeLayout(Context context) {
this(context, null);
}
public 油TubeLayout(Context context, AttributeSet attrs) {
this(context, attrs, 0);
}
@Override
protected void onFinishInflate() {
mHeaderView = findViewById(R.id.viewHeader);
mDescView = findViewById(R.id.viewDesc);
}
public 油TubeLayout(Context context, AttributeSet attrs, int defStyle) {
super(context, attrs, defStyle);
mDragHelper = ViewDragHelper.create(this, 1f, new DragHelperCallback());
}
public void maximize() {
smoothSlideTo(0f);
}
boolean smoothSlideTo(float slideOffset) {
final int topBound = getPaddingTop();
int y = (int) (topBound + slideOffset * mDragRange);
if (mDragHelper.smoothSlideViewTo(mHeaderView, mHeaderView.getLeft(), y)) {
ViewCompat.postInvalidateOnAnimation(this);
return true;
}
return false;
}
private class DragHelperCallback extends ViewDragHelper.Callback {
@Override
public boolean tryCaptureView(View child, int pointerId) {
return child == mHeaderView;
}
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
mTop = top;
mDragOffset = (float) top / mDragRange;
mHeaderView.setPivotX(mHeaderView.getWidth());
mHeaderView.setPivotY(mHeaderView.getHeight());
mHeaderView.setScaleX(1 - mDragOffset / 2);
mHeaderView.setScaleY(1 - mDragOffset / 2);
mDescView.setAlpha(1 - mDragOffset);
requestLayout();
}
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
int top = getPaddingTop();
if (yvel > 0 || (yvel == 0 && mDragOffset > 0.5f)) {
top += mDragRange;
}
mDragHelper.settleCapturedViewAt(releasedChild.getLeft(), top);
}
@Override
public int getViewVerticalDragRange(View child) {
return mDragRange;
}
@Override
public int clampViewPositionVertical(View child, int top, int dy) {
final int topBound = getPaddingTop();
final int bottomBound = getHeight() - mHeaderView.getHeight() - mHeaderView.getPaddingBottom();
final int newTop = Math.min(Math.max(top, topBound), bottomBound);
return newTop;
}
}
@Override
public void computeScroll() {
if (mDragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
final int action = MotionEventCompat.getActionMasked(ev);
if (( action != MotionEvent.ACTION_DOWN)) {
mDragHelper.cancel();
return super.onInterceptTouchEvent(ev);
}
if (action == MotionEvent.ACTION_CANCEL || action == MotionEvent.ACTION_UP) {
mDragHelper.cancel();
return false;
}
final float x = ev.getX();
final float y = ev.getY();
boolean interceptTap = false;
switch (action) {
case MotionEvent.ACTION_DOWN: {
mInitialMotionX = x;
mInitialMotionY = y;
interceptTap = mDragHelper.isViewUnder(mHeaderView, (int) x, (int) y);
break;
}
case MotionEvent.ACTION_MOVE: {
final float adx = Math.abs(x - mInitialMotionX);
final float ady = Math.abs(y - mInitialMotionY);
final int slop = mDragHelper.getTouchSlop();
if (ady > slop && adx > ady) {
mDragHelper.cancel();
return false;
}
}
}
return mDragHelper.shouldInterceptTouchEvent(ev) || interceptTap;
}
@Override
public boolean onTouchEvent(MotionEvent ev) {
mDragHelper.processTouchEvent(ev);
final int action = ev.getAction();
final float x = ev.getX();
final float y = ev.getY();
boolean isHeaderViewUnder = mDragHelper.isViewUnder(mHeaderView, (int) x, (int) y);
switch (action & MotionEventCompat.ACTION_MASK) {
case MotionEvent.ACTION_DOWN: {
mInitialMotionX = x;
mInitialMotionY = y;
break;
}
case MotionEvent.ACTION_UP: {
final float dx = x - mInitialMotionX;
final float dy = y - mInitialMotionY;
final int slop = mDragHelper.getTouchSlop();
if (dx * dx + dy * dy < slop * slop && isHeaderViewUnder) {
if (mDragOffset == 0) {
smoothSlideTo(1f);
} else {
smoothSlideTo(0f);
}
}
break;
}
}
return isHeaderViewUnder && isViewHit(mHeaderView, (int) x, (int) y) || isViewHit(mDescView, (int) x, (int) y);
}
private boolean isViewHit(View view, int x, int y) {
int[] viewLocation = new int[2];
view.getLocationOnScreen(viewLocation);
int[] parentLocation = new int[2];
this.getLocationOnScreen(parentLocation);
int screenX = parentLocation[0] + x;
int screenY = parentLocation[1] + y;
return screenX >= viewLocation[0] && screenX < viewLocation[0] + view.getWidth() &&
screenY >= viewLocation[1] && screenY < viewLocation[1] + view.getHeight();
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
measureChildren(widthMeasureSpec, heightMeasureSpec);
int maxWidth = MeasureSpec.getSize(widthMeasureSpec);
int maxHeight = MeasureSpec.getSize(heightMeasureSpec);
setMeasuredDimension(resolveSizeAndState(maxWidth, widthMeasureSpec, 0),
resolveSizeAndState(maxHeight, heightMeasureSpec, 0));
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
mDragRange = getHeight() - mHeaderView.getHeight();
mHeaderView.layout(
0,
mTop,
r,
mTop + mHeaderView.getMeasuredHeight());
mDescView.layout(
0,
mTop + mHeaderView.getMeasuredHeight(),
r,
mTop + b);
}
頁面引用xml
<FrameLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ListView
android:id="@+id/listView"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:tag="list"
/>
<com.example.vdh.油TubeLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
android:id="@+id/油TubeLayout"
android:orientation="vertical"
android:visibility="visible">
<TextView
android:id="@+id/viewHeader"
android:layout_width="match_parent"
android:layout_height="128dp"
android:fontFamily="sans-serif-thin"
android:textSize="25sp"
android:tag="text"
android:gravity="center"
android:textColor="@android:color/white"
android:background="#AD78CC"/>
<TextView
android:id="@+id/viewDesc"
android:tag="desc"
android:textSize="35sp"
android:gravity="center"
android:text="Loreum Loreum"
android:textColor="@android:color/white"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#FF00FF"/>
</com.example.vdh.油TubeLayout>
</FrameLayout>
其實就是兩個子2View,ViewDragHelper的事件檢測,然后回調里面的方法 進行頁面的Onlayout,進而控制頁面刷新等等。
來自:http://blog.csdn.net/xiangzhihong8/article/details/54099277