Android自定義ViewGroup實現(xiàn)右滑進入詳情
更新時間：2023年01月12日 15:25:28 作者：newki
這篇文章主要為大家詳細介紹了Android如何通過自定義ViewGroup實現(xiàn)右滑進入詳情效果，文中的示例代碼講解詳細，感興趣的小伙伴可以了解一下
前言
在之前的 ViewGroup 的事件相關一文中，我們詳細的講解了一些常見的 ViewGroup 需要處理的事件與運動的方式。
我們了解了如何處理攔截事件，如何滾動，如何處理子 View 的協(xié)調(diào)運動等。
再復雜一點，我們可以組合在一起使用。例如在攔截事件之后滾動，或者在滾動到一個閾值之后攔截事件。
今天我們一起再鞏固一下相關的知識點，以比較常見的一個應用場景，右滑進入詳情的場景為例子。
這個例子中又分幾種常見的類型，以幾個頭部App為例的話：
1. 一種是類似抖音列表的的右滑直接詳情：
2. 一種是類似閑魚這種右滑提示再進入詳情
3. 另一種是類似豆瓣這種列表滑動進入詳情
接下來我們就一起復習一下，看看都能怎么實現(xiàn)。
話不多說，Let's go
一、抖音直接右滑進入詳情
其實抖音的這種效果實現(xiàn)的方式有很多，比如 ViewPager 是最簡單的 ，但是抖音的首頁本身就是一個垂直的 ViewPager（RV） ，內(nèi)部的 Item 再用橫向的 ViewPager 做內(nèi)容與詳情的切換？要這么做嗎？能不能這么做？
能當然能，但是呢，沒必要。
一般這種簡單的效果，我們一般使用自定義 ViewGroup 即可實現(xiàn)輕量的效果，不需要整那么“笨重” 。
那么自定義 ViewGroup 如何實現(xiàn)這種效果呢？ 總歸是記錄點擊坐標，記錄移動坐標，然后對對應的子View做移動，例如 TranslationX 、Scroller 都可以完成類似的邏輯，在放開的時候滾動回指定的位置即可。
確實，這樣是標準的做法，也不是不行，但是我們這個效果并不涉及到事件的攔截與一些處理，其實我們可以使用更簡單的方式 ViewDragHelper 來實現(xiàn)，它內(nèi)部集成了移動事件的判斷與移動的邏輯封裝，還能讓子View協(xié)調(diào)運動，也是特別適合這個場景。
如何使用呢？代碼如下：
public class DouyinView5 extends FrameLayout {
private View contentView;
private View detailView;
private int contentWidth;
private int contentHeight;
private int detailWidth;
private int detailHeight;
private ViewDragHelper viewDragHelper;
private float downX;
private float downY;
public DouyinView5(Context context) {
super(context);
init();
}
public DouyinView5(Context context, AttributeSet attrs) {
super(context, attrs);
init();
}
public DouyinView5(Context context, AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
init();
}
private void init() {
viewDragHelper = ViewDragHelper.create(this, callback);
}
@Override
public boolean onInterceptTouchEvent(MotionEvent ev) {
return viewDragHelper.shouldInterceptTouchEvent(ev);
}
@Override
public boolean onTouchEvent(MotionEvent event) {
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = event.getX();
downY = event.getY();
break;
case MotionEvent.ACTION_MOVE:
float moveX = event.getX();
float moveY = event.getY();
float dx = moveX - downX;
float dy = moveY - downY;
if (Math.abs(dx) > Math.abs(dy)) {
requestDisallowInterceptTouchEvent(true);
}
downX = moveX;
downY = moveY;
break;
case MotionEvent.ACTION_UP:
break;
}
viewDragHelper.processTouchEvent(event);
return true;
}
//完成初始化，獲取控件
@Override
protected void onFinishInflate() {
super.onFinishInflate();
contentView = getChildAt(0);
detailView = getChildAt(1);
}
/**
* 完成測量時調(diào)用，獲取高度，寬度
*/
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
contentWidth = contentView.getMeasuredWidth();
contentHeight = contentView.getMeasuredHeight();
detailWidth = detailView.getMeasuredWidth();
detailHeight = detailView.getMeasuredHeight();
}
/**
* 調(diào)用方法完成位置的布局
*/
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
contentView.layout(0, 0, contentWidth, contentHeight);
detailView.layout(contentWidth, 0, contentWidth + detailWidth, detailHeight);
}
private ViewDragHelper.Callback callback = new ViewDragHelper.Callback() {
@Override
public boolean tryCaptureView(View child, int pointerId) {
return child == contentView || child == detailView;
}
@Override
public int getViewHorizontalDragRange(View child) {
return detailWidth;
}
@Override
public int clampViewPositionHorizontal(View child, int left, int dx) {
//邊界的限制
if (child == contentView) {
if (left > 0) left = 0;
if (left < -detailWidth) left = -detailWidth;
} else if (child == detailView) {
if (left > contentWidth) left = contentWidth;
if (left < contentWidth - detailWidth) left = contentWidth - detailWidth;
}
return left;
}
@Override
public void onViewPositionChanged(View changedView, int left, int top, int dx, int dy) {
super.onViewPositionChanged(changedView, left, top, dx, dy);
//做內(nèi)容布局移動的時候，詳情布局跟著同樣的移動
if (changedView == contentView) {
detailView.layout(detailView.getLeft() + dx, detailView.getTop() + dy,
detailView.getRight() + dx, detailView.getBottom() + dy);
} else if (changedView == detailView) {
//當詳情布局移動的時候，內(nèi)容布局做同樣的移動
contentView.layout(contentView.getLeft() + dx, contentView.getTop() + dy,
contentView.getRight() + dx, contentView.getBottom() + dy);
}
}
@Override
public void onViewReleased(View releasedChild, float xvel, float yvel) {
super.onViewReleased(releasedChild, xvel, yvel);
//松開之后，只要移動超過一半就可以打開或者關閉
if (contentView.getLeft() < -detailWidth / 2) {
open();
} else {
close();
}
}
};
public void open() {
viewDragHelper.smoothSlideViewTo(contentView, -detailWidth, 0);
ViewCompat.postInvalidateOnAnimation(this);
}
public void close() {
viewDragHelper.smoothSlideViewTo(contentView, 0, 0);
ViewCompat.postInvalidateOnAnimation(this);
}
@Override
public void computeScroll() {
if (viewDragHelper.continueSettling(true)) {
ViewCompat.postInvalidateOnAnimation(this);
}
}
}
除去測量布局的代碼（繼承了FramLayout，不需要我們自己手動測量了），再除去 viewDragHelper 的模板代碼。核心代碼就那么10多行。
這樣即可實現(xiàn)簡單的效果了：
是不是很簡單！
而有些同學可能會說 viewDragHelper 好麻煩，我還需要在移動的時候處理事件呢，也不方便用 viewDragHelper ，能不能使用基本的方式來實現(xiàn)呢？
二、閑魚右滑進入詳情
確實，如果內(nèi)部有多個View ，還涉及到一些事件的攔截與處理，我們可以使用基本的 MotionEvent 來判斷。
這里以閑魚的右滑進入詳情為例子，我們需要在滑動的時候記錄移動值，然后讓右側的滑塊繪制對應的貝塞爾背景，并且這個 TextView 還是豎直排列文本的，所以我們需要先自定義一個這個特殊的 TextView 。
完整的代碼如下：
/**
* 右側的查看滑動更多，豎版排列文本效果，并繪制貝塞爾曲線背景
*/
public class ShowMoreTextView extends AppCompatTextView {
// 默認文本
private CharSequence mDefaultText = "更多";
//默認使用文本畫筆
protected TextPaint mTextPaint;
//每個文字的間距
private int mCharSpacing;
// 貝塞爾陰影畫筆
private Paint mShadowPaint;
// 貝塞爾的路徑
private Path mShadowPath;
//貝塞爾曲線的控制點-變量動態(tài)控制
private float mShadowOffset = 0;
//默認的間距
private int mNormalSpaceing;
public ShowMoreTextView(Context context) {
this(context, null);
}
public ShowMoreTextView(Context context, @Nullable AttributeSet attrs) {
this(context, attrs, 0);
}
public ShowMoreTextView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
super(context, attrs, defStyleAttr);
//畫筆的一些配置
mTextPaint = new TextPaint(Paint.ANTI_ALIAS_FLAG);
mTextPaint.setAntiAlias(true);
//默認間距
mCharSpacing = CommUtils.dip2px(4);
mNormalSpaceing = CommUtils.dip2px(8);
//畫筆賦值
mShadowPaint = new Paint();
mShadowPaint.setColor(Color.parseColor("#4FCCCCCC"));
mShadowPaint.setAntiAlias(true);
mShadowPaint.setStyle(Paint.Style.FILL);
mShadowPaint.setStrokeWidth(1);
mShadowPath = new Path();
}
@Override
protected void onDraw(Canvas canvas) {
super.onDraw(canvas);
mTextPaint.setTextSize(getTextSize());
mTextPaint.setColor(getCurrentTextColor());
mTextPaint.setTypeface(getTypeface());
//豎版文本的繪制
CharSequence text = mDefaultText;
if (text != null && !text.toString().trim().equals("")) {
Rect bounds = new Rect();
mTextPaint.getTextBounds(text.toString(), 0, text.length(), bounds);
float startX = getLayout().getLineLeft(0) + getPaddingLeft();
//處理drawleft的間距
if (getCompoundDrawables()[0] != null) {
Rect drawRect = getCompoundDrawables()[0].getBounds();
startX += (drawRect.right - drawRect.left);
}
startX += getCompoundDrawablePadding();
float startY = getBaseline();
//不處理bounds會導致間距異常
int cHeight = (bounds.bottom - bounds.top + mCharSpacing);
// 居中水平對齊
startY -= (text.length() - 1) * cHeight / 2;
for (int i = 0; i < text.length(); i++) {
String c = String.valueOf(text.charAt(i));
canvas.drawText(c, startX, startY + i * cHeight, mTextPaint);
}
}
// 動態(tài)的繪制貝塞爾的背景
mShadowPath.reset();
mShadowPath.moveTo(getWidth(), 0);
mShadowPath.quadTo(mShadowOffset, getHeight() / 2, getWidth(), getHeight());
canvas.drawPath(mShadowPath, mShadowPaint);
}
@Override
public void setText(CharSequence text, BufferType type) {
mDefaultText = text;
super.setText("", type);
}
public void setVerticalText(CharSequence text) {
if (TextUtils.isEmpty(text)) return;
mDefaultText = text;
invalidate();
}
/**
* 暴露的方法，控制貝塞爾曲線的控制點
*/
public void setShadowOffset(float offset, float maxOffset) {
this.mShadowOffset = offset;
float dis = maxOffset / 2 - mNormalSpaceing;
if (mShadowOffset >= dis) {
mShadowOffset = dis;
} else {
mShadowOffset = dis + (offset - dis) / 2;
}
invalidate();
}
}
主要是基于變量 mShadowOffset 來繪制貝塞爾背景，然后就是其中繪制文本的一些控制了。
而我們主要的容器則是繼承自 ViewGroup , 之前是繼承了FrameLayout ,不需要我們測量，現(xiàn)在測量布局都需要我們自己來了。
在我們之前的文章中，我們都已經(jīng)反復的復習過了，這里就快速跳過這些非重點代碼：
//完成初始化，獲取控件
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mContentView = getChildAt(0);
mMoreTextView = (ShowMoreTextView) getChildAt(1);
}
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
contentWidth = mContentView.getMeasuredWidth();
contentHeight = mContentView.getMeasuredHeight();
showMoreViewWidth = mMoreTextView.getMeasuredWidth();
showMoreViewHeight = mMoreTextView.getMeasuredHeight();
//右側布局的偏移量
mOffsetWidth = -showMoreViewWidth;
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//測量真正的容器的布局
measureChild(mContentView, widthMeasureSpec, heightMeasureSpec);
//測量ShowMore布局
measureChild(mMoreTextView, widthMeasureSpec, heightMeasureSpec);
this.setMeasuredDimension(mContentView.getMeasuredWidth(), mContentView.getMeasuredHeight());
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
mContentView.layout(0, 0, contentWidth, contentHeight);
mMoreTextView.layout(contentWidth, contentHeight / 2 - showMoreViewHeight / 2,
contentWidth + showMoreViewWidth, contentHeight / 2 - showMoreViewHeight / 2 + showMoreViewHeight);
}接下來就是記錄坐標點，移動的坐標點，以及取消事件的動畫，基本上可以認為是一套模板代碼，可以套用到類似的效果上。
@Override
public boolean onTouchEvent(MotionEvent ev) {
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mHintLeftMargin = 0;
mLastX = ev.getRawX();
mLastY = ev.getRawY();
break;
case MotionEvent.ACTION_MOVE:
// 釋放動畫
if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
break;
}
mDeltaX = (ev.getRawX() - mLastX);
mDeltaY = ev.getRawY() - mLastY;
mLastX = ev.getRawX();
mLastY = ev.getRawY();
mDeltaX = mDeltaX * RATIO;
//滑動的賦值
if (mDeltaX > 0) {
// 右滑
setHintTextTranslationX(mDeltaX);
} else if (mDeltaX < 0) {
// 左滑
setHintTextTranslationX(mDeltaX);
}
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
//攔截事件-父布局滾
getParent().requestDisallowInterceptTouchEvent(false);
// 釋放動畫
if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
break;
}
//如果達到指定位置了才算釋放
if (mOffsetWidth != 0 && mHintLeftMargin <= mOffsetWidth && mListener != null) {
mListener.onRelease();
}
//默認的回去動畫
mReleasedAnim = ValueAnimator.ofFloat(1.0f, 0);
mReleasedAnim.setDuration(300);
mReleasedAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
mMoreTextView.setTranslationX(value * mMoreTextView.getTranslationX());
}
});
mReleasedAnim.start();
break;
}
return true;
}
/**
* 設置ShowMore布局的偏移量，并且設置內(nèi)部重繪貝塞爾曲線的控制點變量
*/
private void setHintTextTranslationX(float deltaX) {
float offsetX = 0;
if (mMoreTextView != null) {
mHintLeftMargin += deltaX;
if (mHintLeftMargin <= mOffsetWidth) {
offsetX = mOffsetWidth;
mMoreTextView.setVerticalText(RELEASE_MORE);
} else {
offsetX = mHintLeftMargin;
mMoreTextView.setVerticalText(SCROLL_MORE);
}
mMoreTextView.setShadowOffset(offsetX, mOffsetWidth);
mMoreTextView.setTranslationX(offsetX);
YYLogUtils.w("setTranslationX:" + offsetX);
}
}核心的邏輯是拿到了移動變量之后設置右側的 ShowMoreView 的 setTranslationX 與它內(nèi)部的 mShadowOffset 變量，從而達到繪制貝塞爾背景的效果。
這里我們的移動是使用的 setTranslationX ，取消事件使用的是屬性動畫的方式，當然了使用其他方式例如，我們移動都交給 Scroller 來完成也是可以的。
效果：
同樣的效果，其實我們甚至可以直接使用 ViewDragHelper 來實現(xiàn)更為簡單，怎么說了，為了下面的例子擴展，我們先選擇使用 MotionEvent + setTranslationX 的方式實現(xiàn)，如果有興趣，大家可以自行使用不同的方式來實現(xiàn)，接下來就是看如何在滾動的列表中加入右滑進入詳情的邏輯了。
三、列表的右滑進入詳情
如果說之前的效果都可以用 ViewDragHelper 來簡化完成，那么這種帶列表的滾動我們還是最好自己來處理事件與移動與攔截。
對比來說，唯一麻煩的就是我們需要在左側的RV滾動的時候去及時的處理攔截事件。移動的也好處理，我們可以直接設置左側RV的 TranslationX 移動 和 右側ShowMoreView 的 TranslationX 移動。這樣就能達到移動的效果。
在我們之前的例子基礎上實現(xiàn)，還是基于 setTranslationX 來移動，并且使用屬性動畫來做釋放的邏輯，我們再之前的代碼上修改一番。
首先我們的布局應該是如下的：
ShowMoreTextView 我們已經(jīng)很了解了，他就兩個功能，第一個就是垂直的文本排列，第二個就是通過一個入?yún)⒆兞靠刂曝惾麪柷€的控制點。為了簡單我就直接使用上一個效果的View了。
此效果的重點就是如何自定義 ViewGroup ，處理對應的排列，移動，與事件攔截。
首先一個 ViewGroup 需要先完成的就是測量與布局：
public class ViewGroup5 extends ViewGroup {
private RecyclerView mHorizontalRecyclerView;
private ShowMoreTextView mMoreTextView;
private int rvContentWidth;
private int rvContentHeight;
private int showMoreViewWidth;
private int showMoreViewHeight;
//展示之后獲取寬高信息
@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
super.onSizeChanged(w, h, oldw, oldh);
rvContentWidth = mHorizontalRecyclerView.getMeasuredWidth();
rvContentHeight = mHorizontalRecyclerView.getMeasuredHeight();
showMoreViewWidth = mMoreTextView.getMeasuredWidth();
showMoreViewHeight = rvContentHeight;
//右側布局的偏移量
mOffsetWidth = -showMoreViewWidth;
}
//完成初始化，獲取控件
@Override
protected void onFinishInflate() {
super.onFinishInflate();
mHorizontalRecyclerView = (RecyclerView) getChildAt(0);
mMoreTextView = (ShowMoreTextView) getChildAt(1);
}
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
//RV測量 - 默認的測量不改動
measureChild(mHorizontalRecyclerView, widthMeasureSpec, heightMeasureSpec);
int width = mHorizontalRecyclerView.getMeasuredWidth();
int height = mHorizontalRecyclerView.getMeasuredHeight();
//右側ShowMore的測量 - 自行改動高度測量
final LayoutParams lp = mMoreTextView.getLayoutParams();
mMoreTextView.measure(
getChildMeasureSpec(widthMeasureSpec, mMoreTextView.getPaddingLeft() + mMoreTextView.getPaddingRight(), lp.width),
getChildMeasureSpec(MeasureSpec.EXACTLY, mMoreTextView.getPaddingTop() + mMoreTextView.getPaddingBottom(), height)
);
//指定ViewGroup的測量 - 父布局的測量就是RV的寬高
this.setMeasuredDimension(width, height);
}
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
mHorizontalRecyclerView.layout(0, 0, rvContentWidth, rvContentHeight);
mMoreTextView.layout(mHorizontalRecyclerView.getRight(), 0, mHorizontalRecyclerView.getRight() + showMoreViewWidth, showMoreViewHeight);
}
}在之前的文章中，我們反復的復習過測量與布局，這里就一筆帶過，接下來就是事件的處理與移動。并且在 ViewGroup 分發(fā)事件，判斷是否攔截事件。
- 當滑動到最左側的時候我們可以繼續(xù)滑動，給內(nèi)部的兩個布局設置 setTranslationX 從而達到移動的效果。
- 當滑動到最右側的時候，我們同樣可以繼續(xù)滑動，但是內(nèi)部的方法就可以判斷設置 setShadowOffset 去設置貝塞爾曲線的顯示。
- 當滑動到中間的時候，我們不攔截事件，我們把事件給RV，所以當前滾動的是RV 控件。
具體實現(xiàn)如下：
@Override
public boolean dispatchTouchEvent(MotionEvent ev) {
if (mHorizontalRecyclerView == null) {
return super.dispatchTouchEvent(ev);
}
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mHintLeftMargin = 0;
mMoveIndex = 0;
mLastX = ev.getRawX();
mLastY = ev.getRawY();
break;
case MotionEvent.ACTION_MOVE:
// 釋放動畫
if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
break;
}
float mDeltaX = (ev.getRawX() - mLastX);
float mDeltaY = ev.getRawY() - mLastY;
mLastX = ev.getRawX();
mLastY = ev.getRawY();
mDeltaX = mDeltaX * RATIO;
//滑動的賦值
if (mDeltaX > 0) {
// 右滑并判斷是否滑動到邊緣
if (!mHorizontalRecyclerView.canScrollHorizontally(-1) || mHorizontalRecyclerView.getTranslationX() < 0) {
//偏移值加上已偏移的值
float transX = mDeltaX + mHorizontalRecyclerView.getTranslationX();
if (mHorizontalRecyclerView.canScrollHorizontally(-1) && transX >= 0) {
transX = 0;
}
//RV和ShowMore一起設置-TranslationX
mHorizontalRecyclerView.setTranslationX(transX);
setHintTextTranslationX(mDeltaX);
}
} else if (mDeltaX < 0) {
// 左滑并判斷是否滑動到邊緣
if (!mHorizontalRecyclerView.canScrollHorizontally(1) || mHorizontalRecyclerView.getTranslationX() > 0) {
//偏移值加上已偏移的值
float transX = mDeltaX + mHorizontalRecyclerView.getTranslationX();
if (transX <= 0 && mHorizontalRecyclerView.canScrollHorizontally(1)) {
transX = 0;
}
//RV和ShowMore一起設置-TranslationX
mHorizontalRecyclerView.setTranslationX(transX);
setHintTextTranslationX(mDeltaX);
}
}
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
//攔截事件-父布局滾
getParent().requestDisallowInterceptTouchEvent(false);
// 釋放動畫
if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
break;
}
//如果達到指定位置了才算釋放
if (mOffsetWidth != 0 && mHintLeftMargin <= mOffsetWidth && mListener != null) {
mListener.onRelease();
}
//默認的回去動畫
mReleasedAnim = ValueAnimator.ofFloat(1.0f, 0);
mReleasedAnim.setDuration(300);
mReleasedAnim.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
float value = (float) animation.getAnimatedValue();
mHorizontalRecyclerView.setTranslationX(value * mHorizontalRecyclerView.getTranslationX());
mMoreTextView.setTranslationX(value * mMoreTextView.getTranslationX());
}
});
mReleasedAnim.start();
break;
}
return mHorizontalRecyclerView.getTranslationX() != 0 ? true : super.dispatchTouchEvent(ev);
}
/**
* 設置ShowMore布局的偏移量，并且設置內(nèi)部重繪貝塞爾曲線的控制點變量
*/
private void setHintTextTranslationX(float deltaX) {
float offsetX = 0;
if (mMoreTextView != null) {
mHintLeftMargin += deltaX;
if (mHintLeftMargin <= mOffsetWidth) {
offsetX = mOffsetWidth;
mMoreTextView.setVerticalText(RELEASE_MORE);
} else {
offsetX = mHintLeftMargin;
mMoreTextView.setVerticalText(SCROLL_MORE);
}
mMoreTextView.setShadowOffset(offsetX, mOffsetWidth);
mMoreTextView.setTranslationX(offsetX);
}
}
public interface OnShowMoreListener {
void onRelease();
}
private OnShowMoreListener mListener;
public void setOnShowMoreListener(OnShowMoreListener listener) {
this.mListener = listener;
} 如果是在一個列表中使用此控件，我們最好還需要處理請求父布局的攔截操作，比如：
case MotionEvent.ACTION_MOVE:
float mDeltaX = (ev.getRawX() - mLastX);
float mDeltaY = ev.getRawY() - mLastY;
//攔截事件-讓我滾
getParent().requestDisallowInterceptTouchEvent(true);
這行不行，行！但是這么已攔截當按在這個控件上往上下滑動的時候，同樣不能生效，會導致斷觸的效果。所以我們需要讓攔截事件只攔截水平方向的事件。
并且為了兼容處理，有些設備第一次觸摸的時候，mDeltaX 與 mDeltaY 都為 0，從而無法攔截，所以我們需要做個判斷，非第一次觸摸才開始攔截。
switch (ev.getAction()) {
case MotionEvent.ACTION_DOWN:
mHintLeftMargin = 0;
mMoveIndex = 0;
isFirstMove = true;
mLastX = ev.getRawX();
mLastY = ev.getRawY();
break;
case MotionEvent.ACTION_MOVE:
// 釋放動畫
if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
break;
}
float mDeltaX = (ev.getRawX() - mLastX);
float mDeltaY = ev.getRawY() - mLastY;
if (isFirstMove) {
// 處理事件沖突
if (Math.abs(mDeltaX) > Math.abs(mDeltaY)) {
//攔截事件-讓我滾
getParent().requestDisallowInterceptTouchEvent(true);
} else {
//攔截事件-父布局滾
getParent().requestDisallowInterceptTouchEvent(false);
}
}
mMoveIndex++;
if (mMoveIndex > 2) {
isFirstMove = false;
}
mLastX = ev.getRawX();
mLastY = ev.getRawY();使用與監(jiān)聽：
val group5 = findViewById<ViewGroup5>(R.id.viewgroup5)
val recyclerView = findViewById<RecyclerView>(R.id.recycler_view)
recyclerView.horizontal().bindData(list, R.layout.item_scroll_card) { holder: ViewHolder, t: String, position: Int ->
holder.setText(R.id.tv_name, "測試數(shù)據(jù) $t")
}
group5.setOnShowMoreListener {
toast("進入更多的頁面")
}效果：
如果嵌套會怎樣？
如果和豆瓣的滑動效果與閑魚的滑動進入詳情效果放在一起：
當我們滑動正常布局可以觸發(fā)閑魚的滑動，當我們滑動豆瓣的滑動詳情，則是請求父布局不要攔截，可以正常的觸發(fā)滑動的效果，確實也符合我們的預期。
后記
其實本文并沒有什么新的知識點，無非就是在 ViewGroup 的測量布局的基礎上，加上事件的處理，從易到難實現(xiàn)各種右滑進入詳情的效果。
只是需要注意的是，事件的處理與滑動有多種組合的方式實現(xiàn)，我們還是需要按需選擇，比如有一些處理滑動沖突的情況，最好我們還是使用 MotionEvent + Scroller / setTranslation 實現(xiàn)，對于一些不復雜的頁面我們可以使用谷歌封裝好的 ViewDragHelper 來快速實現(xiàn)。
當然類似的效果也并不是只有自定義ViewGroup可以實現(xiàn)，其他的類似 behavor 也能實現(xiàn)同樣的效果，但我認為它并不屬于自定義View體系，是另一個概念了，所以并沒有對它有過多的介紹。如果真要擴展開來要講的東西也太多了。
以上就是Android自定義ViewGroup實現(xiàn)右滑進入詳情的詳細內(nèi)容，更多關于Android ViewGroup的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要為大家詳細介紹了Android獲取手機文件夾及文件列表的方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
這篇文章主要介紹了Android ListView添加頭布局和腳布局實例詳解的相關資料,大家看下效果是否是自己想要實現(xiàn)的效果，這里附了實現(xiàn)代碼和實現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
Android Application存取公共數(shù)據(jù)的實例詳解
這篇文章主要介紹了Android Application存取公共數(shù)據(jù)的實例詳解的相關資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Android編程之文件的讀寫方法,結合實例形式較為詳細的分析了Android針對文件操作的詳細步驟,常用函數(shù)及使用技巧,需要的朋友可以參考下2015-12-12
MVP是從經(jīng)典的模式MVC演變而來，它們的基本思想有相通的地方：Controller/Presenter負責邏輯的處理，Model提供數(shù)據(jù)，View負責顯示。下面這篇文章主要給大家介紹了關于Android從實現(xiàn)到封裝MVP的相關內(nèi)容，分享出來供大家參考學習，下面話不多說了，來一起看看詳細的介紹吧2023-03-03
這篇文章主要為大家詳細介紹了Android自定義跑馬燈文字效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
Android Universal ImageLoader 緩存圖片
Universal Image Loader for Android的目的是為了實現(xiàn)異步的網(wǎng)絡圖片加載、緩存及顯示，支持多線程異步加載，通過本文給大家介紹Android Universal ImageLoader緩存圖片相關資料，涉及到imageloader緩存圖片相關知識，對imageloader緩存圖片相關知識感興趣的朋友一起學習2016-01-01
android 開發(fā)中使用okhttp上傳文件到服務器
在開發(fā)android手機客戶端，常常會需要上傳文件到服務器，使用okhttp會是一個很好的選擇，它使用很簡單，而且運行效率也很高，下面小編給大家?guī)砹薬ndroid 開發(fā)中使用okhttp上傳文件到服務器功能，一起看看吧2018-01-01
Android Studio 配置:自定義頭部代碼注釋及添加模版方式
這篇文章主要介紹了Android Studio 配置:自定義頭部代碼注釋及添加模版方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android 進度條按鈕ProgressButton的實現(xiàn)代碼
這篇文章主要介紹了Android 進度條按鈕實現(xiàn)(ProgressButton)代碼，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10