Android應(yīng)用開(kāi)發(fā)中自定義ViewGroup的究極攻略
支持margin，gravity以及水平，垂直排列
最近在學(xué)習(xí)android的view部分，于是動(dòng)手實(shí)現(xiàn)了一個(gè)類似ViewPager的可上下或者左右拖動(dòng)的ViewGroup，中間遇到了一些問(wèn)題（例如touchEvent在onInterceptTouchEvent和onTouchEvent之間的傳遞流程），現(xiàn)在將我的實(shí)現(xiàn)過(guò)程記錄下來(lái)。
首先，要實(shí)現(xiàn)一個(gè)ViewGroup，必須至少重寫(xiě)onLayout（）方法（當(dāng)然還有構(gòu)造方法啦：））。onLayout（）主要是用來(lái)安排子View在我們這個(gè)ViewGroup中的擺放位置的。除了onLayout（）方法之外往往還需要重寫(xiě)onMeasure（）方法，用于測(cè)算我們所需要占用的空間。
首先，我們來(lái)重寫(xiě)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方法寫(xiě)的比較簡(jiǎn)單，就是簡(jiǎn)單的計(jì)算出每個(gè)子View的left值，然后調(diào)用view的layout方法即可。
現(xiàn)在我們加上x(chóng)ml布局文件，來(lái)看一下效果：
<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），然后我們也沒(méi)辦法讓他們垂直居中（因?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命名空間，來(lái)引用我們?cè)O(shè)置的layout_gravity屬性。（這里的“res-auto”其實(shí)還可以使用res/com/example/testslidelistview來(lái)代替，但是前一種方法相對(duì)簡(jiǎn)單，尤其是當(dāng)你將某個(gè)ui組件作為library來(lái)使用的時(shí)候）
現(xiàn)在的效果圖如下：有了margin，有了gravity。
其實(shí)在這個(gè)基礎(chǔ)上，我們可以很容易的添加一個(gè)方向?qū)傩?，使得它可以通過(guò)設(shè)置一個(gè)xml屬性或者一個(gè)java api調(diào)用來(lái)實(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（），來(lái)正確的根據(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"來(lái)實(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)在效果圖如下：
重寫(xiě)onTouchEvent（）以支持滑動(dòng)：
要使View滑動(dòng)，我們可以通過(guò)調(diào)用scrollTo（）和scrollBy（）來(lái)實(shí)現(xiàn)，這里需要注意的是：要使頁(yè)面向左移動(dòng)，需要增加mScrollX（就是向scrollBy傳遞一個(gè)正數(shù)），同樣的，要使頁(yè)面向上移動(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ù)水平或是垂直排放的方向，
//來(lái)選擇是水平移動(dòng)還是垂直移動(dòng)
moveBy((int) (x - mx), (int) (y - my));
x = mx;
y = my;
break;
}
return true;
}
//此處的moveBy是根據(jù)水平或是垂直排放的方向，
//來(lái)選擇是水平移動(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)在的問(wèn)題是當(dāng)手指離開(kāi)屏幕后，View就立即停止滑動(dòng)了，這樣的體驗(yàn)就相當(dāng)不友好，那么我們希望手指離開(kāi)后，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)，就是要展示右邊的一頁(yè)，那么我們就可以準(zhǔn)確計(jì)算出滑動(dòng)的目標(biāo)位置，此時(shí)就可以使用Scroller.startScroll（）方法）
fling用于不能準(zhǔn)確得知目標(biāo)位置的情況（例如：ListView，每一次的滑動(dòng)，我們事先都不知道滑動(dòng)距離，而是根據(jù)手指抬起是的速度來(lái)判斷是滑遠(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是通過(guò)ViewConfiguration來(lái)獲取的初速度的上限
//這個(gè)值可能會(huì)因?yàn)槠聊坏牟煌煌?
velocityTracker.computeCurrentVelocity(1000, maxFlingVelocity);
float velocityX = velocityTracker.getXVelocity();
float velocityY = velocityTracker.getYVelocity();
//用來(lái)處理實(shí)際的移動(dòng)
completeMove(-velocityX, -velocityY);
if (velocityTracker != null) {
velocityTracker.recycle();
velocityTracker = null;
}
break;
return true;
}
我們?cè)赾omputeMove（）中調(diào)用Scroller的fling（）方法，順便考慮一下滑動(dòng)方向問(wèn)題
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)行一遍，問(wèn)題又來(lái)了，手指抬起后，頁(yè)面立刻又停了下來(lái)，并沒(méi)有實(shí)現(xiàn)慢慢減速的滑動(dòng)效果。
其實(shí)原因就是上面所說(shuō)的，Scroller只是幫助我們計(jì)算位置的，并不處理View的滑動(dòng)。我們要想實(shí)現(xiàn)連續(xù)的滑動(dòng)效果，那就要在View繪制完成后，再通過(guò)Scroller獲得新位置，然后再重繪，如此反復(fù)，直至停止。
重寫(xiě)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)用的，上面的代碼中，我們通過(guò)調(diào)用computeScrollOffset（）來(lái)判斷滑動(dòng)是否已停止，如果沒(méi)有，那么我們可以通過(guò)getCurrX（）和getCurrY（）來(lái)獲得新位置，然后通過(guò)調(diào)用scrollTo（）來(lái)實(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)了：），不過(guò)，當(dāng)我們緩慢地拖動(dòng)View，慢慢抬起手指，我們會(huì)發(fā)現(xiàn)通過(guò)這樣的方式，可以使得所有的子View滑到屏幕之外，（所有的子View都消失了：（）。
問(wèn)題主要是出在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)的問(wèn)題
現(xiàn)在ViewGroup可以靈活的滑動(dòng)了，但是當(dāng)我們使用多個(gè)指頭交替滑動(dòng)時(shí)，就會(huì)產(chǎn)生跳動(dòng)的現(xiàn)象。原因是這樣的：
我們實(shí)現(xiàn)onTouchEvent（）的時(shí)候，是通過(guò)event.getX（），以及event.getY（）來(lái)獲取觸摸坐標(biāo)的，實(shí)際上是獲取的手指索引為0的位置坐標(biāo)，當(dāng)我們放上第二個(gè)手指后，這第二個(gè)手指的索引為1，此時(shí)我們同時(shí)滑動(dòng)這兩個(gè)手指，會(huì)發(fā)現(xiàn)沒(méi)有問(wèn)題，因?yàn)槲覀冏粉櫟氖鞘种杆饕秊?的手指位置。但是當(dāng)我們抬起第一個(gè)手指后，問(wèn)題就出現(xiàn)了， 因?yàn)檫@個(gè)時(shí)候原本索引為1的第二個(gè)手指的索引變?yōu)榱?，所以我們追蹤的軌跡就出現(xiàn)了錯(cuò)誤。
簡(jiǎn)單來(lái)說(shuō)，跳動(dòng)就是因?yàn)樽粉櫟氖种傅母淖?，而這兩個(gè)手指之間原本存在間隙，而這個(gè)間隙的距離就是我們跳動(dòng)的距離。
其實(shí)問(wèn)題產(chǎn)生的根本原因就是手指的索引會(huì)變化，因此我們需要記錄被追蹤手指的id，然后當(dāng)有手指離開(kāi)屏幕時(shí)，判斷離開(kāi)的手指是否是我們正在追蹤的手指：
如果不是，忽略;
如果是，則選擇一個(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()來(lái)獲得索引
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:
// 獲取離開(kāi)屏幕的手指的索引
int pointerIndexLeave = event.getActionIndex();
int pointerIdLeave = event.getPointerId(pointerIndexLeave);
if (mPointerId == pointerIdLeave) {
// 離開(kāi)屏幕的正是目前的有效手指，此處需要重新調(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)帶來(lái)的頁(yè)面的跳動(dòng)問(wèn)題。但同時(shí)也還遺留了兩個(gè)問(wèn)題。
我們自定義的這個(gè)ViewGroup本身還不支持onClick, onLongClick事件。
當(dāng)我們給子View設(shè)置click事件后，我們的ViewGroup居然不能滑動(dòng)了。
相對(duì)來(lái)講，第一個(gè)問(wèn)題稍稍容易處理一點(diǎn)，這里我們先說(shuō)一下第二個(gè)問(wèn)題。
onInterceptTouchEvent（）的作用以及何時(shí)會(huì)被調(diào)用
onInterceptTouchEvent（）是用來(lái)給ViewGroup自己一個(gè)攔截事件的機(jī)會(huì)，當(dāng)ViewGroup意識(shí)到某個(gè)Touch事件應(yīng)該由自己處理，那么就可以通過(guò)此方法來(lái)阻止事件被分發(fā)到子View中。
為什么onInterceptTouchEvent（）方法只接收到來(lái)ACTION_DOWN事件？？需要處理ACTION_MOVE,ACTION_UP等等事件嗎？？
按照google官方文檔的說(shuō)明：
如果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ù)的事件呢？？通過(guò)實(shí)驗(yàn)以及stackoverflow上面的一些問(wèn)答得知，當(dāng)我們?cè)趏nInterceptTouchEvent（）方法中返回false，且子View的onTouchEvent返回true的情況下，onInterceptTouchEvent方法才會(huì)收到后續(xù)的事件。
雖然這個(gè)結(jié)果與官方文檔的說(shuō)法有點(diǎn)不同，但實(shí)驗(yàn)說(shuō)明是正確的。仔細(xì)想想這樣的邏輯也確實(shí)非常合理：因?yàn)閛nInterceptTouchEvent方法是用來(lái)攔截觸摸事件，防止被子View捕獲。那么現(xiàn)在子View在onTouchEvent中返回false，明確聲明自己不會(huì)處理這個(gè)觸摸事件，那么這個(gè)時(shí)候還需要攔截嗎？當(dāng)然就不需要了，因此onInterceptTouchEvent不需要攔截這個(gè)事件，那也就沒(méi)有必要將后續(xù)事件再傳給它了。
還有就是onInterceptTouchEvent（）被調(diào)用的前提是它的子View沒(méi)有調(diào)用requestDisallowInterceptTouchEvent（true）方法（這個(gè)方法用于阻止ViewGroup攔截事件）。
ViewGroup的onInterceptTouchEvent方法，onTouchEvent方法以及View的onTouchEvent方法之間的事件傳遞流程
畫(huà)了一個(gè)簡(jiǎn)單的圖，如下：
其中：Intercept指的是onInterceptTouchEvent（）方法，Touch指的是onTouchEvent（）方法。
好了，現(xiàn)在我們可以解決博客開(kāi)頭列出的第二個(gè)問(wèn)題了，之所以為子View設(shè)置click之后，我們的ViewGroup方法無(wú)法滑動(dòng)，是因?yàn)?，子View在接受到ACTION_DOWN事件后返回true，并且ViewGroup的onInterceptTouchEvent（）方法的默認(rèn)實(shí)現(xiàn)是返回false（就是完全不攔截），所以后續(xù)的ACTION_MOVE,ACTION_UP事件都傳遞給了子View，因此我們的ViewGroup自然就無(wú)法滑動(dòng)了。
解決方法就是重寫(xiě)onInterceptTouchEvent方法：
/**
* onInterceptTouchEvent()用來(lái)詢問(wèn)是否要攔截處理。 onTouchEvent()是用來(lái)進(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)畫(huà)還未結(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ì)更新位置，這樣可以通過(guò)累積小的移動(dòng)距離來(lái)判斷是否達(dá)到可以認(rèn)為是Move的閾值。
//這里當(dāng)產(chǎn)生攔截的話，會(huì)更新位置（這樣相當(dāng)于損失了mTouchSlop的移動(dòng)距離，如果不更新，可能會(huì)有一點(diǎn)點(diǎn)跳的感覺(jué)）
if (isIntercept) {
x = mx;
y = my;
}
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
// 這是觸摸的最后一個(gè)事件，無(wú)論如何都不會(huì)攔截
if (velocityTracker != null) {
velocityTracker.recycle();
velocityTracker = null;
}
break;
case MotionEvent.ACTION_POINTER_UP:
solvePointerUp(ev);
break;
}
return isIntercept;
}
private void solvePointerUp(MotionEvent event) {
// 獲取離開(kāi)屏幕的手指的索引
int pointerIndexLeave = event.getActionIndex();
int pointerIdLeave = event.getPointerId(pointerIndexLeave);
if (mPointerId == pointerIdLeave) {
// 離開(kāi)屏幕的正是目前的有效手指，此處需要重新調(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，問(wèn)題應(yīng)該解決了。
onTouchEvent收到ACTION_DOWN，是否一定能收到ACTION_MOVE,ACTION_UP...??? 收到了ACTION_MOVE，能否說(shuō)明它已經(jīng)收到過(guò)ACTION_DOWN???
其實(shí)根據(jù)上面所說(shuō)的onInterceptTouchEvent方法與onTouchEvent方法之間事件傳遞的過(guò)程，我們知道這兩個(gè)問(wèn)題的答案都是否定的。
對(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è)問(wèn)題就是，如果我們單純的在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)沒(méi)有設(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開(kāi)發(fā)中自定義View和ViewGroup的實(shí)例教程
- 一篇文章弄懂Android自定義viewgroup的相關(guān)難點(diǎn)
- Android自定義ViewGroup實(shí)現(xiàn)受邊界限制的滾動(dòng)操作（3）
- Android動(dòng)畫(huà)效果之自定義ViewGroup添加布局動(dòng)畫(huà)（五）
- Android自定義ViewGroup的實(shí)現(xiàn)方法
- Android自定義ViewGroup實(shí)現(xiàn)朋友圈九宮格控件
相關(guān)文章
Android 自定義SeekBar 實(shí)現(xiàn)分段顯示不同背景顏色的示例代碼
這篇文章主要介紹了Android 自定義SeekBar 實(shí)現(xiàn)分段顯示不同背景顏色,本文通過(guò)示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
Android應(yīng)用自動(dòng)跳轉(zhuǎn)到應(yīng)用市場(chǎng)詳情頁(yè)面的方法
最近在工作中遇到一個(gè)需求，推廣部門要求實(shí)現(xiàn)應(yīng)用自動(dòng)跳轉(zhuǎn)到應(yīng)用市場(chǎng)詳情頁(yè)面，通過(guò)查找一些資料，實(shí)現(xiàn)出來(lái)了，覺(jué)得有必要整理下方便以后或者有需要的朋友們參考借鑒，下面來(lái)一起詳細(xì)看看Android應(yīng)用自動(dòng)跳轉(zhuǎn)到應(yīng)用市場(chǎng)詳情頁(yè)面的方法吧。2016-12-12
android studio 3.0 gradle 打包腳本配置詳解
這篇文章主要介紹了android studio 3.0 gradle 打包腳本配置詳解,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
這篇文章主要介紹了Android中的按鈕加圖片功能,代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-02-02
Android實(shí)現(xiàn)語(yǔ)音播放與錄音功能
這篇文章主要為大家詳細(xì)介紹了Android實(shí)現(xiàn)語(yǔ)音播放與錄音功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-07-07
直接應(yīng)用項(xiàng)目中的Android圖片緩存技術(shù)
這篇文章主要為大家詳細(xì)介紹了直接應(yīng)用項(xiàng)目中的Android圖片緩存技術(shù)，簡(jiǎn)單、方便、高效，感興趣的小伙伴們可以參考一下2016-04-04
Android使用NestedScrollView?內(nèi)嵌RecycleView滑動(dòng)沖突問(wèn)題解決
這篇文章主要介紹了Android使用NestedScrollView?內(nèi)嵌RecycleView滑動(dòng)沖突問(wèn)題解決，文章圍繞主題展開(kāi)詳細(xì)的內(nèi)容介紹，具有一定的參考價(jià)值，感興趣的小伙伴可以參考一下2022-06-06
這篇文章主要介紹了Android xml解析實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-06-06
Android 開(kāi)發(fā)程序鎖應(yīng)用簡(jiǎn)單實(shí)例
這篇文章主要介紹了Android 開(kāi)發(fā)程序鎖應(yīng)用簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2016-10-10
這篇文章主要介紹了Android狀態(tài)欄微技巧的相關(guān)資料，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友一起學(xué)習(xí)吧2016-12-12