Android應(yīng)用開發(fā)中自定義ViewGroup的究極攻略
支持margin,gravity以及水平,垂直排列
最近在學(xué)習(xí)android的view部分,于是動(dòng)手實(shí)現(xiàn)了一個(gè)類似ViewPager的可上下或者左右拖動(dòng)的ViewGroup,中間遇到了一些問題(例如touchEvent在onInterceptTouchEvent和onTouchEvent之間的傳遞流程),現(xiàn)在將我的實(shí)現(xiàn)過程記錄下來。
首先,要實(shí)現(xiàn)一個(gè)ViewGroup,必須至少重寫onLayout()方法(當(dāng)然還有構(gòu)造方法啦:))。onLayout()主要是用來安排子View在我們這個(gè)ViewGroup中的擺放位置的。除了onLayout()方法之外往往還需要重寫onMeasure()方法,用于測(cè)算我們所需要占用的空間。
首先,我們來重寫onMeasure()方法:(先只考慮水平方向)
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 計(jì)算所有child view 要占用的空間 desireWidth = 0; desireHeight = 0; int count = getChildCount(); for (int i = 0; i < count; ++i) { View v = getChildAt(i); if (v.getVisibility() != View.GONE) { measureChild(v, widthMeasureSpec, heightMeasureSpec); desireWidth += v.getMeasuredWidth(); desireHeight = Math .max(desireHeight, v.getMeasuredHeight()); } } // count with padding desireWidth += getPaddingLeft() + getPaddingRight(); desireHeight += getPaddingTop() + getPaddingBottom(); // see if the size is big enough desireWidth = Math.max(desireWidth, getSuggestedMinimumWidth()); desireHeight = Math.max(desireHeight, getSuggestedMinimumHeight()); setMeasuredDimension(resolveSize(desireWidth, widthMeasureSpec), resolveSize(desireHeight, heightMeasureSpec)); }
我們計(jì)算出所有Visilibity不是Gone的View的寬度的總和作為viewgroup的最大寬度,以及這些view中的最高的一個(gè)作為viewgroup的高度。這里需要注意的是要考慮咱們viewgroup自己的padding。(目前先忽略子View的margin)。
onLayout():
@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { final int parentLeft = getPaddingLeft(); final int parentRight = r - l - getPaddingRight(); final int parentTop = getPaddingTop(); final int parentBottom = b - t - getPaddingBottom(); if (BuildConfig.DEBUG) Log.d("onlayout", "parentleft: " + parentLeft + " parenttop: " + parentTop + " parentright: " + parentRight + " parentbottom: " + parentBottom); int left = parentLeft; int top = parentTop; int count = getChildCount(); for (int i = 0; i < count; ++i) { View v = getChildAt(i); if (v.getVisibility() != View.GONE) { final int childWidth = v.getMeasuredWidth(); final int childHeight = v.getMeasuredHeight(); v.layout(left, top, left + childWidth, top + childHeight); left += childWidth; } } }
上面的layout方法寫的比較簡(jiǎn)單,就是簡(jiǎn)單的計(jì)算出每個(gè)子View的left值,然后調(diào)用view的layout方法即可。
現(xiàn)在我們加上xml布局文件,來看一下效果:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <com.example.testslidelistview.SlideGroup android:id="@+id/sl" android:layout_width="match_parent" android:layout_height="500dp" android:layout_marginTop="50dp" android:background="#FFFF00" > <ImageView android:id="@+id/iv1" android:layout_width="150dp" android:layout_height="300dp" android:scaleType="fitXY" android:src="@drawable/lead_page_1" /> <ImageView android:layout_width="150dp" android:layout_height="300dp" android:scaleType="fitXY" android:src="@drawable/lead_page_2" /> <ImageView android:layout_width="150dp" android:layout_height="300dp" android:scaleType="fitXY" android:src="@drawable/lead_page_3" /> </com.example.testslidelistview.SlideGroup> </LinearLayout>
效果圖如下:
從效果圖中我們看到,3個(gè)小圖連在一起(因?yàn)楝F(xiàn)在不支持margin),然后我們也沒辦法讓他們垂直居中(因?yàn)楝F(xiàn)在還不支持gravity)。
現(xiàn)在我們首先為咱們的ViewGroup增加一個(gè)支持margin和gravity的LayoutParams。
@Override protected android.view.ViewGroup.LayoutParams generateDefaultLayoutParams() { return new LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT, ViewGroup.LayoutParams.MATCH_PARENT); } @Override public android.view.ViewGroup.LayoutParams generateLayoutParams( AttributeSet attrs) { return new LayoutParams(getContext(), attrs); } @Override protected android.view.ViewGroup.LayoutParams generateLayoutParams( android.view.ViewGroup.LayoutParams p) { return new LayoutParams(p); } public static class LayoutParams extends MarginLayoutParams { public int gravity = -1; public LayoutParams(Context c, AttributeSet attrs) { super(c, attrs); TypedArray ta = c.obtainStyledAttributes(attrs, R.styleable.SlideGroup); gravity = ta.getInt(R.styleable.SlideGroup_layout_gravity, -1); ta.recycle(); } public LayoutParams(int width, int height) { this(width, height, -1); } public LayoutParams(int width, int height, int gravity) { super(width, height); this.gravity = gravity; } public LayoutParams(android.view.ViewGroup.LayoutParams source) { super(source); } public LayoutParams(MarginLayoutParams source) { super(source); } }
xml的自定義屬性如下:
<?xml version="1.0" encoding="utf-8"?> <resources> <attr name="layout_gravity"> <!-- Push object to the top of its container, not changing its size. --> <flag name="top" value="0x30" /> <!-- Push object to the bottom of its container, not changing its size. --> <flag name="bottom" value="0x50" /> <!-- Push object to the left of its container, not changing its size. --> <flag name="left" value="0x03" /> <!-- Push object to the right of its container, not changing its size. --> <flag name="right" value="0x05" /> <!-- Place object in the vertical center of its container, not changing its size. --> <flag name="center_vertical" value="0x10" /> <!-- Place object in the horizontal center of its container, not changing its size. --> <flag name="center_horizontal" value="0x01" /> </attr> <declare-styleable name="SlideGroup"> <attr name="layout_gravity" /> </declare-styleable> </resources>
現(xiàn)在基本的準(zhǔn)備工作差不多了,然后需要修改一下onMeasure()和onLayout()。
onMeasure():(上一個(gè)版本,我們?cè)谟?jì)算最大寬度和高度時(shí)忽略了margin)
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 計(jì)算所有child view 要占用的空間 desireWidth = 0; desireHeight = 0; int count = getChildCount(); for (int i = 0; i < count; ++i) { View v = getChildAt(i); if (v.getVisibility() != View.GONE) { LayoutParams lp = (LayoutParams) v.getLayoutParams(); //將measureChild改為measureChildWithMargin measureChildWithMargins(v, widthMeasureSpec, 0, heightMeasureSpec, 0); //這里在計(jì)算寬度時(shí)加上margin desireWidth += v.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; desireHeight = Math .max(desireHeight, v.getMeasuredHeight() + lp.topMargin + lp.bottomMargin); } } // count with padding desireWidth += getPaddingLeft() + getPaddingRight(); desireHeight += getPaddingTop() + getPaddingBottom(); // see if the size is big enough desireWidth = Math.max(desireWidth, getSuggestedMinimumWidth()); desireHeight = Math.max(desireHeight, getSuggestedMinimumHeight()); setMeasuredDimension(resolveSize(desireWidth, widthMeasureSpec), resolveSize(desireHeight, heightMeasureSpec)); }
onLayout()(加上margin和gravity)
@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { final int parentLeft = getPaddingLeft(); final int parentRight = r - l - getPaddingRight(); final int parentTop = getPaddingTop(); final int parentBottom = b - t - getPaddingBottom(); if (BuildConfig.DEBUG) Log.d("onlayout", "parentleft: " + parentLeft + " parenttop: " + parentTop + " parentright: " + parentRight + " parentbottom: " + parentBottom); int left = parentLeft; int top = parentTop; int count = getChildCount(); for (int i = 0; i < count; ++i) { View v = getChildAt(i); if (v.getVisibility() != View.GONE) { LayoutParams lp = (LayoutParams) v.getLayoutParams(); final int childWidth = v.getMeasuredWidth(); final int childHeight = v.getMeasuredHeight(); final int gravity = lp.gravity; final int horizontalGravity = gravity & Gravity.HORIZONTAL_GRAVITY_MASK; final int verticalGravity = gravity & Gravity.VERTICAL_GRAVITY_MASK; left += lp.leftMargin; top = parentTop + lp.topMargin; if (gravity != -1) { switch (verticalGravity) { case Gravity.TOP: break; case Gravity.CENTER_VERTICAL: top = parentTop + (parentBottom - parentTop - childHeight) / 2 + lp.topMargin - lp.bottomMargin; break; case Gravity.BOTTOM: top = parentBottom - childHeight - lp.bottomMargin; break; } } if (BuildConfig.DEBUG) { Log.d("onlayout", "child[width: " + childWidth + ", height: " + childHeight + "]"); Log.d("onlayout", "child[left: " + left + ", top: " + top + ", right: " + (left + childWidth) + ", bottom: " + (top + childHeight)); } v.layout(left, top, left + childWidth, top + childHeight); left += childWidth + lp.rightMargin; } } }
現(xiàn)在修改一下xml布局文件,加上例如xmlns:ly="http://schemas.android.com/apk/res-auto",的xml命名空間,來引用我們?cè)O(shè)置的layout_gravity屬性。(這里的“res-auto”其實(shí)還可以使用res/com/example/testslidelistview來代替,但是前一種方法相對(duì)簡(jiǎn)單,尤其是當(dāng)你將某個(gè)ui組件作為library來使用的時(shí)候)
現(xiàn)在的效果圖如下:有了margin,有了gravity。
其實(shí)在這個(gè)基礎(chǔ)上,我們可以很容易的添加一個(gè)方向?qū)傩裕沟盟梢酝ㄟ^設(shè)置一個(gè)xml屬性或者一個(gè)java api調(diào)用來實(shí)現(xiàn)垂直排列。
下面我們?cè)黾右粋€(gè)用于表示方向的枚舉類型:
public static enum Orientation { HORIZONTAL(0), VERTICAL(1); private int value; private Orientation(int i) { value = i; } public int value() { return value; } public static Orientation valueOf(int i) { switch (i) { case 0: return HORIZONTAL; case 1: return VERTICAL; default: throw new RuntimeException("[0->HORIZONTAL, 1->VERTICAL]"); } } }
然后我們需要改變onMeasure(),來正確的根據(jù)方向計(jì)算需要的最大寬度和高度。
@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // 計(jì)算所有child view 要占用的空間 desireWidth = 0; desireHeight = 0; int count = getChildCount(); for (int i = 0; i < count; ++i) { View v = getChildAt(i); if (v.getVisibility() != View.GONE) { LayoutParams lp = (LayoutParams) v.getLayoutParams(); measureChildWithMargins(v, widthMeasureSpec, 0, heightMeasureSpec, 0); //只是在這里增加了垂直或者水平方向的判斷 if (orientation == Orientation.HORIZONTAL) { desireWidth += v.getMeasuredWidth() + lp.leftMargin + lp.rightMargin; desireHeight = Math.max(desireHeight, v.getMeasuredHeight() + lp.topMargin + lp.bottomMargin); } else { desireWidth = Math.max(desireWidth, v.getMeasuredWidth() + lp.leftMargin + lp.rightMargin); desireHeight += v.getMeasuredHeight() + lp.topMargin + lp.bottomMargin; } } } // count with padding desireWidth += getPaddingLeft() + getPaddingRight(); desireHeight += getPaddingTop() + getPaddingBottom(); // see if the size is big enough desireWidth = Math.max(desireWidth, getSuggestedMinimumWidth()); desireHeight = Math.max(desireHeight, getSuggestedMinimumHeight()); setMeasuredDimension(resolveSize(desireWidth, widthMeasureSpec), resolveSize(desireHeight, heightMeasureSpec)); }
onLayout():
@Override protected void onLayout(boolean changed, int l, int t, int r, int b) { final int parentLeft = getPaddingLeft(); final int parentRight = r - l - getPaddingRight(); final int parentTop = getPaddingTop(); final int parentBottom = b - t - getPaddingBottom(); if (BuildConfig.DEBUG) Log.d("onlayout", "parentleft: " + parentLeft + " parenttop: " + parentTop + " parentright: " + parentRight + " parentbottom: " + parentBottom); int left = parentLeft; int top = parentTop; int count = getChildCount(); for (int i = 0; i < count; ++i) { View v = getChildAt(i); if (v.getVisibility() != View.GONE) { LayoutParams lp = (LayoutParams) v.getLayoutParams(); final int childWidth = v.getMeasuredWidth(); final int childHeight = v.getMeasuredHeight(); final int gravity = lp.gravity; final int horizontalGravity = gravity & Gravity.HORIZONTAL_GRAVITY_MASK; final int verticalGravity = gravity & Gravity.VERTICAL_GRAVITY_MASK; if (orientation == Orientation.HORIZONTAL) { // layout horizontally, and only consider vertical gravity left += lp.leftMargin; top = parentTop + lp.topMargin; if (gravity != -1) { switch (verticalGravity) { case Gravity.TOP: break; case Gravity.CENTER_VERTICAL: top = parentTop + (parentBottom - parentTop - childHeight) / 2 + lp.topMargin - lp.bottomMargin; break; case Gravity.BOTTOM: top = parentBottom - childHeight - lp.bottomMargin; break; } } if (BuildConfig.DEBUG) { Log.d("onlayout", "child[width: " + childWidth + ", height: " + childHeight + "]"); Log.d("onlayout", "child[left: " + left + ", top: " + top + ", right: " + (left + childWidth) + ", bottom: " + (top + childHeight)); } v.layout(left, top, left + childWidth, top + childHeight); left += childWidth + lp.rightMargin; } else { // layout vertical, and only consider horizontal gravity left = parentLeft; top += lp.topMargin; switch (horizontalGravity) { case Gravity.LEFT: break; case Gravity.CENTER_HORIZONTAL: left = parentLeft + (parentRight - parentLeft - childWidth) / 2 + lp.leftMargin - lp.rightMargin; break; case Gravity.RIGHT: left = parentRight - childWidth - lp.rightMargin; break; } v.layout(left, top, left + childWidth, top + childHeight); top += childHeight + lp.bottomMargin; } } } }
現(xiàn)在我們可以增加一個(gè)xml屬性:
<attr name="orientation"> <enum name="horizontal" value="0" /> <enum name="vertical" value="1" /> </attr>
現(xiàn)在就可以在布局文件中加入ly:orientation="vertical"來實(shí)現(xiàn)垂直排列了(ly是自定義的xml命名空間)
布局文件如下:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical" > <com.example.testslidelistview.SlideGroup xmlns:gs="http://schemas.android.com/apk/res-auto" android:id="@+id/sl" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_marginTop="50dp" android:background="#FFFF00" > <ImageView android:id="@+id/iv1" android:layout_width="300dp" android:layout_height="200dp" android:layout_marginBottom="20dp" gs:layout_gravity="left" android:scaleType="fitXY" android:src="@drawable/lead_page_1" /> <ImageView android:layout_width="300dp" android:layout_height="200dp" android:layout_marginBottom="20dp" gs:layout_gravity="center_horizontal" android:scaleType="fitXY" android:src="@drawable/lead_page_2" /> <ImageView android:layout_width="300dp" android:layout_height="200dp" android:layout_marginBottom="20dp" gs:layout_gravity="right" android:scaleType="fitXY" android:src="@drawable/lead_page_3" /> </com.example.testslidelistview.SlideGroup> </LinearLayout>
現(xiàn)在效果圖如下:
重寫onTouchEvent()以支持滑動(dòng):
要使View滑動(dòng),我們可以通過調(diào)用scrollTo()和scrollBy()來實(shí)現(xiàn),這里需要注意的是:要使頁面向左移動(dòng),需要增加mScrollX(就是向scrollBy傳遞一個(gè)正數(shù)),同樣的,要使頁面向上移動(dòng),需要增加mScrollY。
@Override public boolean onTouchEvent(MotionEvent event) { final int action = event.getAction(); if (BuildConfig.DEBUG) Log.d("onTouchEvent", "action: " + action); switch (action) { case MotionEvent.ACTION_DOWN: x = event.getX(); y = event.getY(); break; case MotionEvent.ACTION_MOVE: float mx = event.getX(); float my = event.getY(); //此處的moveBy是根據(jù)水平或是垂直排放的方向, //來選擇是水平移動(dòng)還是垂直移動(dòng) moveBy((int) (x - mx), (int) (y - my)); x = mx; y = my; break; } return true; } //此處的moveBy是根據(jù)水平或是垂直排放的方向, //來選擇是水平移動(dòng)還是垂直移動(dòng) public void moveBy(int deltaX, int deltaY) { if (BuildConfig.DEBUG) Log.d("moveBy", "deltaX: " + deltaX + " deltaY: " + deltaY); if (orientation == Orientation.HORIZONTAL) { if (Math.abs(deltaX) >= Math.abs(deltaY)) scrollBy(deltaX, 0); } else { if (Math.abs(deltaY) >= Math.abs(deltaX)) scrollBy(0, deltaY); } }
好,現(xiàn)在我們?cè)龠\(yùn)行這段代碼,就會(huì)發(fā)現(xiàn)View已經(jīng)可以跟隨手指移動(dòng)了,但現(xiàn)在的問題是當(dāng)手指離開屏幕后,View就立即停止滑動(dòng)了,這樣的體驗(yàn)就相當(dāng)不友好,那么我們希望手指離開后,View能夠以一定的阻尼滿滿地減速滑動(dòng)。
借助Scroller,并且處理ACTION_UP事件
Scroller是一個(gè)用于計(jì)算位置的工具類,它負(fù)責(zé)計(jì)算下一個(gè)位置的坐標(biāo)(根據(jù)時(shí)長(zhǎng),最小以最大移動(dòng)距離,以及阻尼算法(可以使用自定義的Interpolator))。
Scroller有兩種模式:scroll和fling。
scroll用于已知目標(biāo)位置的情況(例如:Viewpager中向左滑動(dòng),就是要展示右邊的一頁,那么我們就可以準(zhǔn)確計(jì)算出滑動(dòng)的目標(biāo)位置,此時(shí)就可以使用Scroller.startScroll()方法)
fling用于不能準(zhǔn)確得知目標(biāo)位置的情況(例如:ListView,每一次的滑動(dòng),我們事先都不知道滑動(dòng)距離,而是根據(jù)手指抬起是的速度來判斷是滑遠(yuǎn)一點(diǎn)還是近一點(diǎn),這時(shí)就可以使用Scroller.fling()方法)
現(xiàn)在我們改一下上面的onTouchEvent()方法,增加對(duì)ACTION_UP事件的處理,以及初速度的計(jì)算。
@Override public boolean onTouchEvent(MotionEvent event) { final int action = event.getAction(); if (BuildConfig.DEBUG) Log.d("onTouchEvent", "action: " + action); //將事件加入到VelocityTracker中,用于計(jì)算手指抬起時(shí)的初速度 if (velocityTracker == null) { velocityTracker = VelocityTracker.obtain(); } velocityTracker.addMovement(event); switch (action) { case MotionEvent.ACTION_DOWN: x = event.getX(); y = event.getY(); if (!mScroller.isFinished()) mScroller.abortAnimation(); break; case MotionEvent.ACTION_MOVE: float mx = event.getX(); float my = event.getY(); moveBy((int) (x - mx), (int) (y - my)); x = mx; y = my; break; case MotionEvent.ACTION_UP: //maxFlingVelocity是通過ViewConfiguration來獲取的初速度的上限 //這個(gè)值可能會(huì)因?yàn)槠聊坏牟煌煌? velocityTracker.computeCurrentVelocity(1000, maxFlingVelocity); float velocityX = velocityTracker.getXVelocity(); float velocityY = velocityTracker.getYVelocity(); //用來處理實(shí)際的移動(dòng) completeMove(-velocityX, -velocityY); if (velocityTracker != null) { velocityTracker.recycle(); velocityTracker = null; } break; return true; }
我們?cè)赾omputeMove()中調(diào)用Scroller的fling()方法,順便考慮一下滑動(dòng)方向問題
private void completeMove(float velocityX, float velocityY) { if (orientation == Orientation.HORIZONTAL) { int mScrollX = getScrollX(); int maxX = desireWidth - getWidth();// - Math.abs(mScrollX); if (Math.abs(velocityX) >= minFlingVelocity && maxX > 0) { mScroller.fling(mScrollX, 0, (int) velocityX, 0, 0, maxX, 0, 0); invalidate(); } } else { int mScrollY = getScrollY(); int maxY = desireHeight - getHeight();// - Math.abs(mScrollY); if (Math.abs(velocityY) >= minFlingVelocity && maxY > 0) { mScroller.fling(0, mScrollY, 0, (int) velocityY, 0, 0, 0, maxY); invalidate(); } } }
好了,現(xiàn)在我們?cè)龠\(yùn)行一遍,問題又來了,手指抬起后,頁面立刻又停了下來,并沒有實(shí)現(xiàn)慢慢減速的滑動(dòng)效果。
其實(shí)原因就是上面所說的,Scroller只是幫助我們計(jì)算位置的,并不處理View的滑動(dòng)。我們要想實(shí)現(xiàn)連續(xù)的滑動(dòng)效果,那就要在View繪制完成后,再通過Scroller獲得新位置,然后再重繪,如此反復(fù),直至停止。
重寫computeScroll(),實(shí)現(xiàn)View的連續(xù)繪制
@Override public void computeScroll() { if (mScroller.computeScrollOffset()) { if (orientation == Orientation.HORIZONTAL) { scrollTo(mScroller.getCurrX(), 0); postInvalidate(); } else { scrollTo(0, mScroller.getCurrY()); postInvalidate(); } } }
computeScroll()是在ViewGroup的drawChild()中調(diào)用的,上面的代碼中,我們通過調(diào)用computeScrollOffset()來判斷滑動(dòng)是否已停止,如果沒有,那么我們可以通過getCurrX()和getCurrY()來獲得新位置,然后通過調(diào)用scrollTo()來實(shí)現(xiàn)滑動(dòng),這里需要注意的是postInvalidate()的調(diào)用,它會(huì)將重繪的這個(gè)Event加入U(xiǎn)I線程的消息隊(duì)列,等scrollTo()執(zhí)行完成后,就會(huì)處理這個(gè)事件,然后再次調(diào)用ViewGroup的draw()-->drawChild()-->computeScroll()-->scrollTo()如此就實(shí)現(xiàn)了連續(xù)繪制的效果。
現(xiàn)在我們?cè)僦匦逻\(yùn)行一下app,終于可以持續(xù)滑動(dòng)了:),不過,當(dāng)我們緩慢地拖動(dòng)View,慢慢抬起手指,我們會(huì)發(fā)現(xiàn)通過這樣的方式,可以使得所有的子View滑到屏幕之外,(所有的子View都消失了:()。
問題主要是出在completeMove()中,我們只是判斷了初始速度是否大于最小閾值,如果小于這個(gè)最小閾值的話就什么都不做,缺少了邊界的判斷,因此修改computeMove()如下:
private void completeMove(float velocityX, float velocityY) { if (orientation == Orientation.HORIZONTAL) { int mScrollX = getScrollX(); int maxX = desireWidth - getWidth(); if (mScrollX > maxX) { // 超出了右邊界,彈回 mScroller.startScroll(mScrollX, 0, maxX - mScrollX, 0); invalidate(); } else if (mScrollX < 0) { // 超出了左邊界,彈回 mScroller.startScroll(mScrollX, 0, -mScrollX, 0); invalidate(); } else if (Math.abs(velocityX) >= minFlingVelocity && maxX > 0) { mScroller.fling(mScrollX, 0, (int) velocityX, 0, 0, maxX, 0, 0); invalidate(); } } else { int mScrollY = getScrollY(); int maxY = desireHeight - getHeight(); if (mScrollY > maxY) { // 超出了下邊界,彈回 mScroller.startScroll(0, mScrollY, 0, maxY - mScrollY); invalidate(); } else if (mScrollY < 0) { // 超出了上邊界,彈回 mScroller.startScroll(0, mScrollY, 0, -mScrollY); invalidate(); } else if (Math.abs(velocityY) >= minFlingVelocity && maxY > 0) { mScroller.fling(0, mScrollY, 0, (int) velocityY, 0, 0, 0, maxY); invalidate(); } } }
ok,現(xiàn)在當(dāng)我們滑出邊界,松手后,會(huì)自動(dòng)彈回。
處理ACTION_POINTER_UP事件,解決多指交替滑動(dòng)跳動(dòng)的問題
現(xiàn)在ViewGroup可以靈活的滑動(dòng)了,但是當(dāng)我們使用多個(gè)指頭交替滑動(dòng)時(shí),就會(huì)產(chǎn)生跳動(dòng)的現(xiàn)象。原因是這樣的:
我們實(shí)現(xiàn)onTouchEvent()的時(shí)候,是通過event.getX(),以及event.getY()來獲取觸摸坐標(biāo)的,實(shí)際上是獲取的手指索引為0的位置坐標(biāo),當(dāng)我們放上第二個(gè)手指后,這第二個(gè)手指的索引為1,此時(shí)我們同時(shí)滑動(dòng)這兩個(gè)手指,會(huì)發(fā)現(xiàn)沒有問題,因?yàn)槲覀冏粉櫟氖鞘种杆饕秊?的手指位置。但是當(dāng)我們抬起第一個(gè)手指后,問題就出現(xiàn)了, 因?yàn)檫@個(gè)時(shí)候原本索引為1的第二個(gè)手指的索引變?yōu)榱?,所以我們追蹤的軌跡就出現(xiàn)了錯(cuò)誤。
簡(jiǎn)單來說,跳動(dòng)就是因?yàn)樽粉櫟氖种傅母淖?,而這兩個(gè)手指之間原本存在間隙,而這個(gè)間隙的距離就是我們跳動(dòng)的距離。
其實(shí)問題產(chǎn)生的根本原因就是手指的索引會(huì)變化,因此我們需要記錄被追蹤手指的id,然后當(dāng)有手指離開屏幕時(shí),判斷離開的手指是否是我們正在追蹤的手指:
如果不是,忽略;
如果是,則選擇一個(gè)新的手指作為被追蹤手指,并且調(diào)整位置記錄。
還有一點(diǎn)就是,要處理ACTION_POINTER_UP事件,就需要給action與上一個(gè)掩碼:event.getAction()&MotionEvent.ACTION_MASK 或者使用 event.getActionMasked()方法。
更改后的onTouchEvent()的實(shí)現(xiàn)如下:
@Override public boolean onTouchEvent(MotionEvent event) { final int action = event.getActionMasked(); if (velocityTracker == null) { velocityTracker = VelocityTracker.obtain(); } velocityTracker.addMovement(event); switch (action) { case MotionEvent.ACTION_DOWN: // 獲取索引為0的手指id mPointerId = event.getPointerId(0); x = event.getX(); y = event.getY(); if (!mScroller.isFinished()) mScroller.abortAnimation(); break; case MotionEvent.ACTION_MOVE: // 獲取當(dāng)前手指id所對(duì)應(yīng)的索引,雖然在ACTION_DOWN的時(shí)候,我們默認(rèn)選取索引為0 // 的手指,但當(dāng)有第二個(gè)手指觸摸,并且先前有效的手指up之后,我們會(huì)調(diào)整有效手指 // 屏幕上可能有多個(gè)手指,我們需要保證使用的是同一個(gè)手指的移動(dòng)軌跡, // 因此此處不能使用event.getActionIndex()來獲得索引 final int pointerIndex = event.findPointerIndex(mPointerId); float mx = event.getX(pointerIndex); float my = event.getY(pointerIndex); moveBy((int) (x - mx), (int) (y - my)); x = mx; y = my; break; case MotionEvent.ACTION_UP: velocityTracker.computeCurrentVelocity(1000, maxFlingVelocity); float velocityX = velocityTracker.getXVelocity(mPointerId); float velocityY = velocityTracker.getYVelocity(mPointerId); completeMove(-velocityX, -velocityY); if (velocityTracker != null) { velocityTracker.recycle(); velocityTracker = null; } break; case MotionEvent.ACTION_POINTER_UP: // 獲取離開屏幕的手指的索引 int pointerIndexLeave = event.getActionIndex(); int pointerIdLeave = event.getPointerId(pointerIndexLeave); if (mPointerId == pointerIdLeave) { // 離開屏幕的正是目前的有效手指,此處需要重新調(diào)整,并且需要重置VelocityTracker int reIndex = pointerIndexLeave == 0 ? 1 : 0; mPointerId = event.getPointerId(reIndex); // 調(diào)整觸摸位置,防止出現(xiàn)跳動(dòng) x = event.getX(reIndex); y = event.getY(reIndex); if (velocityTracker != null) velocityTracker.clear(); } break; } return true; }
好了,現(xiàn)在我們用多個(gè)手指交替滑動(dòng)就很正常了。
我們解決了多個(gè)手指交替滑動(dòng)帶來的頁面的跳動(dòng)問題。但同時(shí)也還遺留了兩個(gè)問題。
我們自定義的這個(gè)ViewGroup本身還不支持onClick, onLongClick事件。
當(dāng)我們給子View設(shè)置click事件后,我們的ViewGroup居然不能滑動(dòng)了。
相對(duì)來講,第一個(gè)問題稍稍容易處理一點(diǎn),這里我們先說一下第二個(gè)問題。
onInterceptTouchEvent()的作用以及何時(shí)會(huì)被調(diào)用
onInterceptTouchEvent()是用來給ViewGroup自己一個(gè)攔截事件的機(jī)會(huì),當(dāng)ViewGroup意識(shí)到某個(gè)Touch事件應(yīng)該由自己處理,那么就可以通過此方法來阻止事件被分發(fā)到子View中。
為什么onInterceptTouchEvent()方法只接收到來ACTION_DOWN事件??需要處理ACTION_MOVE,ACTION_UP等等事件嗎??
按照google官方文檔的說明:
如果onInterceptTouchEvent方法返回true,那么它將不會(huì)收到后續(xù)事件,事件將會(huì)直接傳遞給目標(biāo)的onTouchEvent方法(其實(shí)會(huì)先傳給目標(biāo)的onTouch方法);
如果onInterceptTouchEvent方法返回false,那么所有的后續(xù)事件都會(huì)先傳給onInterceptTouchEvent,然后再傳給目標(biāo)的onTouchEvent方法。
但是,為什么我們?cè)趏nInterceptTouchEvent方法中返回false之后,卻收不到后續(xù)的事件呢??通過實(shí)驗(yàn)以及stackoverflow上面的一些問答得知,當(dāng)我們?cè)趏nInterceptTouchEvent()方法中返回false,且子View的onTouchEvent返回true的情況下,onInterceptTouchEvent方法才會(huì)收到后續(xù)的事件。
雖然這個(gè)結(jié)果與官方文檔的說法有點(diǎn)不同,但實(shí)驗(yàn)說明是正確的。仔細(xì)想想這樣的邏輯也確實(shí)非常合理:因?yàn)閛nInterceptTouchEvent方法是用來攔截觸摸事件,防止被子View捕獲。那么現(xiàn)在子View在onTouchEvent中返回false,明確聲明自己不會(huì)處理這個(gè)觸摸事件,那么這個(gè)時(shí)候還需要攔截嗎?當(dāng)然就不需要了,因此onInterceptTouchEvent不需要攔截這個(gè)事件,那也就沒有必要將后續(xù)事件再傳給它了。
還有就是onInterceptTouchEvent()被調(diào)用的前提是它的子View沒有調(diào)用requestDisallowInterceptTouchEvent(true)方法(這個(gè)方法用于阻止ViewGroup攔截事件)。
ViewGroup的onInterceptTouchEvent方法,onTouchEvent方法以及View的onTouchEvent方法之間的事件傳遞流程
畫了一個(gè)簡(jiǎn)單的圖,如下:
其中:Intercept指的是onInterceptTouchEvent()方法,Touch指的是onTouchEvent()方法。
好了,現(xiàn)在我們可以解決博客開頭列出的第二個(gè)問題了,之所以為子View設(shè)置click之后,我們的ViewGroup方法無法滑動(dòng),是因?yàn)?,子View在接受到ACTION_DOWN事件后返回true,并且ViewGroup的onInterceptTouchEvent()方法的默認(rèn)實(shí)現(xiàn)是返回false(就是完全不攔截),所以后續(xù)的ACTION_MOVE,ACTION_UP事件都傳遞給了子View,因此我們的ViewGroup自然就無法滑動(dòng)了。
解決方法就是重寫onInterceptTouchEvent方法:
/** * onInterceptTouchEvent()用來詢問是否要攔截處理。 onTouchEvent()是用來進(jìn)行處理。 * * 例如:parentLayout----childLayout----childView 事件的分發(fā)流程: * parentLayout::onInterceptTouchEvent()---false?---> * childLayout::onInterceptTouchEvent()---false?---> * childView::onTouchEvent()---false?---> * childLayout::onTouchEvent()---false?---> parentLayout::onTouchEvent() * * * * 如果onInterceptTouchEvent()返回false,且分發(fā)的子View的onTouchEvent()中返回true, * 那么onInterceptTouchEvent()將收到所有的后續(xù)事件。 * * 如果onInterceptTouchEvent()返回true,原本的target將收到ACTION_CANCEL,該事件 * 將會(huì)發(fā)送給我們自己的onTouchEvent()。 */ @Override public boolean onInterceptTouchEvent(MotionEvent ev) { final int action = ev.getActionMasked(); if (BuildConfig.DEBUG) Log.d("onInterceptTouchEvent", "action: " + action); if (action == MotionEvent.ACTION_DOWN && ev.getEdgeFlags() != 0) { // 該事件可能不是我們的 return false; } boolean isIntercept = false; switch (action) { case MotionEvent.ACTION_DOWN: // 如果動(dòng)畫還未結(jié)束,則將此事件交給onTouchEvet()處理, // 否則,先分發(fā)給子View isIntercept = !mScroller.isFinished(); // 如果此時(shí)不攔截ACTION_DOWN時(shí)間,應(yīng)該記錄下觸摸地址及手指id,當(dāng)我們決定攔截ACTION_MOVE的event時(shí), // 將會(huì)需要這些初始信息(因?yàn)槲覀兊膐nTouchEvent將可能接收不到ACTION_DOWN事件) mPointerId = ev.getPointerId(0); // if (!isIntercept) { downX = x = ev.getX(); downY = y = ev.getY(); // } break; case MotionEvent.ACTION_MOVE: int pointerIndex = ev.findPointerIndex(mPointerId); if (BuildConfig.DEBUG) Log.d("onInterceptTouchEvent", "pointerIndex: " + pointerIndex + ", pointerId: " + mPointerId); float mx = ev.getX(pointerIndex); float my = ev.getY(pointerIndex); if (BuildConfig.DEBUG) Log.d("onInterceptTouchEvent", "action_move [touchSlop: " + mTouchSlop + ", deltaX: " + (x - mx) + ", deltaY: " + (y - my) + "]"); // 根據(jù)方向進(jìn)行攔截,(其實(shí)這樣,如果我們的方向是水平的,里面有一個(gè)ScrollView,那么我們是支持嵌套的) if (orientation == Orientation.HORIZONTAL) { if (Math.abs(x - mx) >= mTouchSlop) { // we get a move event for ourself isIntercept = true; } } else { if (Math.abs(y - my) >= mTouchSlop) { isIntercept = true; } } //如果不攔截的話,我們不會(huì)更新位置,這樣可以通過累積小的移動(dòng)距離來判斷是否達(dá)到可以認(rèn)為是Move的閾值。 //這里當(dāng)產(chǎn)生攔截的話,會(huì)更新位置(這樣相當(dāng)于損失了mTouchSlop的移動(dòng)距離,如果不更新,可能會(huì)有一點(diǎn)點(diǎn)跳的感覺) if (isIntercept) { x = mx; y = my; } break; case MotionEvent.ACTION_CANCEL: case MotionEvent.ACTION_UP: // 這是觸摸的最后一個(gè)事件,無論如何都不會(huì)攔截 if (velocityTracker != null) { velocityTracker.recycle(); velocityTracker = null; } break; case MotionEvent.ACTION_POINTER_UP: solvePointerUp(ev); break; } return isIntercept; } private void solvePointerUp(MotionEvent event) { // 獲取離開屏幕的手指的索引 int pointerIndexLeave = event.getActionIndex(); int pointerIdLeave = event.getPointerId(pointerIndexLeave); if (mPointerId == pointerIdLeave) { // 離開屏幕的正是目前的有效手指,此處需要重新調(diào)整,并且需要重置VelocityTracker int reIndex = pointerIndexLeave == 0 ? 1 : 0; mPointerId = event.getPointerId(reIndex); // 調(diào)整觸摸位置,防止出現(xiàn)跳動(dòng) x = event.getX(reIndex); y = event.getY(reIndex); if (velocityTracker != null) velocityTracker.clear(); } }
現(xiàn)在再運(yùn)行app,問題應(yīng)該解決了。
onTouchEvent收到ACTION_DOWN,是否一定能收到ACTION_MOVE,ACTION_UP...??? 收到了ACTION_MOVE,能否說明它已經(jīng)收到過ACTION_DOWN???
其實(shí)根據(jù)上面所說的onInterceptTouchEvent方法與onTouchEvent方法之間事件傳遞的過程,我們知道這兩個(gè)問題的答案都是否定的。
對(duì)于第一個(gè),收到ACTION_DOWN事件后,ACTION_MOVE事件可能會(huì)被攔截,那么它將只能夠再收到一個(gè)ACTION_CANCEL事件。
對(duì)于第二個(gè),是基于上面的這一個(gè)情況,ACTION_DOWN傳遞給了子View,而onInterceptTouchEvent攔截了ACTION_MOVE事件,所以我們的onTouchEvent方法將會(huì)收到ACTION_MOVE,而不會(huì)收到ACTION_DOWN。(這也是為什么我在onInterceptTouchEvent方法的ACTION_DOWN中記錄下位置信息的原因)
還有一個(gè)問題就是,如果我們單純的在onTouchEvent中: 對(duì)于ACTION_DOWN返回true,在接收到ACTION_MOVE事件后返回false,那么這個(gè)時(shí)候事件會(huì)重新尋找能處理它的View嗎?不會(huì),所有的后續(xù)事件依然會(huì)發(fā)給這個(gè)onTouchEvent方法。
讓ViewGroup支持click事件
這里我們是在onTouchEvent中對(duì)于ACTION_UP多做了一些處理:
判斷從按下時(shí)的位置到現(xiàn)在的移動(dòng)距離是否小于可被識(shí)別為Move的閾值。
根據(jù)ACTION_DOWN和ACTION_UP之間的時(shí)間差,判斷是CLICK,還是LONG CLICK(這里當(dāng)沒有設(shè)置long click的話,我們也可將其認(rèn)為是click)
case MotionEvent.ACTION_UP: //先判斷是否是點(diǎn)擊事件 final int pi = event.findPointerIndex(mPointerId); if((isClickable() || isLongClickable()) && ((event.getX(pi) - downX) < mTouchSlop || (event.getY(pi) - downY) < mTouchSlop)) { //這里我們得到了一個(gè)點(diǎn)擊事件 if(isFocusable() && isFocusableInTouchMode() && !isFocused()) requestFocus(); if(event.getEventTime() - event.getDownTime() >= ViewConfiguration.getLongPressTimeout() && isLongClickable()) { //是一個(gè)長(zhǎng)按事件 performLongClick(); } else { performClick(); } } else { velocityTracker.computeCurrentVelocity(1000, maxFlingVelocity); float velocityX = velocityTracker.getXVelocity(mPointerId); float velocityY = velocityTracker.getYVelocity(mPointerId); completeMove(-velocityX, -velocityY); if (velocityTracker != null) { velocityTracker.recycle(); velocityTracker = null; } } break;
- Android自定義ViewGroup實(shí)現(xiàn)帶箭頭的圓角矩形菜單
- Android自定義ViewGroup實(shí)現(xiàn)堆疊頭像的點(diǎn)贊Layout
- Android自定義ViewGroup實(shí)現(xiàn)標(biāo)簽浮動(dòng)效果
- Android自定義ViewGroup之實(shí)現(xiàn)FlowLayout流式布局
- Android App開發(fā)中自定義View和ViewGroup的實(shí)例教程
- 一篇文章弄懂Android自定義viewgroup的相關(guān)難點(diǎn)
- Android自定義ViewGroup實(shí)現(xiàn)受邊界限制的滾動(dòng)操作(3)
- Android動(dòng)畫效果之自定義ViewGroup添加布局動(dòng)畫(五)
- Android自定義ViewGroup的實(shí)現(xiàn)方法
- Android自定義ViewGroup實(shí)現(xiàn)朋友圈九宮格控件
相關(guān)文章
Android 自定義SeekBar 實(shí)現(xiàn)分段顯示不同背景顏色的示例代碼
這篇文章主要介紹了Android 自定義SeekBar 實(shí)現(xiàn)分段顯示不同背景顏色,本文通過示例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-06-06Android應(yīng)用自動(dòng)跳轉(zhuǎn)到應(yīng)用市場(chǎng)詳情頁面的方法
最近在工作中遇到一個(gè)需求,推廣部門要求實(shí)現(xiàn)應(yīng)用自動(dòng)跳轉(zhuǎn)到應(yīng)用市場(chǎng)詳情頁面,通過查找一些資料,實(shí)現(xiàn)出來了,覺得有必要整理下方便以后或者有需要的朋友們參考借鑒,下面來一起詳細(xì)看看Android應(yīng)用自動(dòng)跳轉(zhuǎn)到應(yīng)用市場(chǎng)詳情頁面的方法吧。2016-12-12android studio 3.0 gradle 打包腳本配置詳解
這篇文章主要介紹了android studio 3.0 gradle 打包腳本配置詳解,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10直接應(yīng)用項(xiàng)目中的Android圖片緩存技術(shù)
這篇文章主要為大家詳細(xì)介紹了直接應(yīng)用項(xiàng)目中的Android圖片緩存技術(shù),簡(jiǎn)單、方便、高效,感興趣的小伙伴們可以參考一下2016-04-04Android使用NestedScrollView?內(nèi)嵌RecycleView滑動(dòng)沖突問題解決
這篇文章主要介紹了Android使用NestedScrollView?內(nèi)嵌RecycleView滑動(dòng)沖突問題解決,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,感興趣的小伙伴可以參考一下2022-06-06Android 開發(fā)程序鎖應(yīng)用簡(jiǎn)單實(shí)例
這篇文章主要介紹了Android 開發(fā)程序鎖應(yīng)用簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10