Android自定義ViewGroup實(shí)現(xiàn)右滑進(jìn)入詳情
更新時間：2023年01月12日 15:25:28 作者：newki
這篇文章主要為大家詳細(xì)介紹了Android如何通過自定義ViewGroup實(shí)現(xiàn)右滑進(jìn)入詳情效果，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以了解一下
前言
在之前的 ViewGroup 的事件相關(guān)一文中，我們詳細(xì)的講解了一些常見的 ViewGroup 需要處理的事件與運(yùn)動的方式。
我們了解了如何處理攔截事件，如何滾動，如何處理子 View 的協(xié)調(diào)運(yùn)動等。
再復(fù)雜一點(diǎn)，我們可以組合在一起使用。例如在攔截事件之后滾動，或者在滾動到一個閾值之后攔截事件。
今天我們一起再鞏固一下相關(guān)的知識點(diǎn)，以比較常見的一個應(yīng)用場景，右滑進(jìn)入詳情的場景為例子。
這個例子中又分幾種常見的類型，以幾個頭部App為例的話：
1. 一種是類似抖音列表的的右滑直接詳情：
2. 一種是類似閑魚這種右滑提示再進(jìn)入詳情
3. 另一種是類似豆瓣這種列表滑動進(jìn)入詳情
接下來我們就一起復(fù)習(xí)一下，看看都能怎么實(shí)現(xiàn)。
話不多說，Let's go
一、抖音直接右滑進(jìn)入詳情
其實(shí)抖音的這種效果實(shí)現(xiàn)的方式有很多，比如 ViewPager 是最簡單的 ，但是抖音的首頁本身就是一個垂直的 ViewPager（RV） ，內(nèi)部的 Item 再用橫向的 ViewPager 做內(nèi)容與詳情的切換？要這么做嗎？能不能這么做？
能當(dāng)然能，但是呢，沒必要。
一般這種簡單的效果，我們一般使用自定義 ViewGroup 即可實(shí)現(xiàn)輕量的效果，不需要整那么“笨重” 。
那么自定義 ViewGroup 如何實(shí)現(xiàn)這種效果呢？ 總歸是記錄點(diǎn)擊坐標(biāo)，記錄移動坐標(biāo)，然后對對應(yīng)的子View做移動，例如 TranslationX 、Scroller 都可以完成類似的邏輯，在放開的時候滾動回指定的位置即可。
確實(shí)，這樣是標(biāo)準(zhǔn)的做法，也不是不行，但是我們這個效果并不涉及到事件的攔截與一些處理，其實(shí)我們可以使用更簡單的方式 ViewDragHelper 來實(shí)現(xiàn)，它內(nèi)部集成了移動事件的判斷與移動的邏輯封裝，還能讓子View協(xié)調(diào)運(yùn)動，也是特別適合這個場景。
如何使用呢？代碼如下：
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) {
//當(dāng)詳情布局移動的時候，內(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);
//松開之后，只要移動超過一半就可以打開或者關(guān)閉
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多行。
這樣即可實(shí)現(xiàn)簡單的效果了：
是不是很簡單！
而有些同學(xué)可能會說 viewDragHelper 好麻煩，我還需要在移動的時候處理事件呢，也不方便用 viewDragHelper ，能不能使用基本的方式來實(shí)現(xiàn)呢？
二、閑魚右滑進(jìn)入詳情
確實(shí)，如果內(nèi)部有多個View ，還涉及到一些事件的攔截與處理，我們可以使用基本的 MotionEvent 來判斷。
這里以閑魚的右滑進(jìn)入詳情為例子，我們需要在滑動的時候記錄移動值，然后讓右側(cè)的滑塊繪制對應(yīng)的貝塞爾背景，并且這個 TextView 還是豎直排列文本的，所以我們需要先自定義一個這個特殊的 TextView 。
完整的代碼如下：
/**
* 右側(cè)的查看滑動更多，豎版排列文本效果，并繪制貝塞爾曲線背景
*/
public class ShowMoreTextView extends AppCompatTextView {
// 默認(rèn)文本
private CharSequence mDefaultText = "更多";
//默認(rèn)使用文本畫筆
protected TextPaint mTextPaint;
//每個文字的間距
private int mCharSpacing;
// 貝塞爾陰影畫筆
private Paint mShadowPaint;
// 貝塞爾的路徑
private Path mShadowPath;
//貝塞爾曲線的控制點(diǎn)-變量動態(tài)控制
private float mShadowOffset = 0;
//默認(rèn)的間距
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);
//默認(rèn)間距
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會導(dǎo)致間距異常
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();
}
/**
* 暴露的方法，控制貝塞爾曲線的控制點(diǎn)
*/
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)反復(fù)的復(fù)習(xí)過了，這里就快速跳過這些非重點(diǎn)代碼：
//完成初始化，獲取控件
@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();
//右側(cè)布局的偏移量
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);
}接下來就是記錄坐標(biāo)點(diǎn)，移動的坐標(biāo)點(diǎn)，以及取消事件的動畫，基本上可以認(rèn)為是一套模板代碼，可以套用到類似的效果上。
@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;
}
//如果達(dá)到指定位置了才算釋放
if (mOffsetWidth != 0 && mHintLeftMargin <= mOffsetWidth && mListener != null) {
mListener.onRelease();
}
//默認(rèn)的回去動畫
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;
}
/**
* 設(shè)置ShowMore布局的偏移量，并且設(shè)置內(nèi)部重繪貝塞爾曲線的控制點(diǎn)變量
*/
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);
}
}核心的邏輯是拿到了移動變量之后設(shè)置右側(cè)的 ShowMoreView 的 setTranslationX 與它內(nèi)部的 mShadowOffset 變量，從而達(dá)到繪制貝塞爾背景的效果。
這里我們的移動是使用的 setTranslationX ，取消事件使用的是屬性動畫的方式，當(dāng)然了使用其他方式例如，我們移動都交給 Scroller 來完成也是可以的。
效果：
同樣的效果，其實(shí)我們甚至可以直接使用 ViewDragHelper 來實(shí)現(xiàn)更為簡單，怎么說了，為了下面的例子擴(kuò)展，我們先選擇使用 MotionEvent + setTranslationX 的方式實(shí)現(xiàn)，如果有興趣，大家可以自行使用不同的方式來實(shí)現(xiàn)，接下來就是看如何在滾動的列表中加入右滑進(jìn)入詳情的邏輯了。
三、列表的右滑進(jìn)入詳情
如果說之前的效果都可以用 ViewDragHelper 來簡化完成，那么這種帶列表的滾動我們還是最好自己來處理事件與移動與攔截。
對比來說，唯一麻煩的就是我們需要在左側(cè)的RV滾動的時候去及時的處理攔截事件。移動的也好處理，我們可以直接設(shè)置左側(cè)RV的 TranslationX 移動 和 右側(cè)ShowMoreView 的 TranslationX 移動。這樣就能達(dá)到移動的效果。
在我們之前的例子基礎(chǔ)上實(shí)現(xiàn)，還是基于 setTranslationX 來移動，并且使用屬性動畫來做釋放的邏輯，我們再之前的代碼上修改一番。
首先我們的布局應(yīng)該是如下的：
ShowMoreTextView 我們已經(jīng)很了解了，他就兩個功能，第一個就是垂直的文本排列，第二個就是通過一個入?yún)⒆兞靠刂曝惾麪柷€的控制點(diǎn)。為了簡單我就直接使用上一個效果的View了。
此效果的重點(diǎn)就是如何自定義 ViewGroup ，處理對應(yīng)的排列，移動，與事件攔截。
首先一個 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;
//右側(cè)布局的偏移量
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測量 - 默認(rèn)的測量不改動
measureChild(mHorizontalRecyclerView, widthMeasureSpec, heightMeasureSpec);
int width = mHorizontalRecyclerView.getMeasuredWidth();
int height = mHorizontalRecyclerView.getMeasuredHeight();
//右側(cè)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);
}
}在之前的文章中，我們反復(fù)的復(fù)習(xí)過測量與布局，這里就一筆帶過，接下來就是事件的處理與移動。并且在 ViewGroup 分發(fā)事件，判斷是否攔截事件。
- 當(dāng)滑動到最左側(cè)的時候我們可以繼續(xù)滑動，給內(nèi)部的兩個布局設(shè)置 setTranslationX 從而達(dá)到移動的效果。
- 當(dāng)滑動到最右側(cè)的時候，我們同樣可以繼續(xù)滑動，但是內(nèi)部的方法就可以判斷設(shè)置 setShadowOffset 去設(shè)置貝塞爾曲線的顯示。
- 當(dāng)滑動到中間的時候，我們不攔截事件，我們把事件給RV，所以當(dāng)前滾動的是RV 控件。
具體實(shí)現(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一起設(shè)置-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一起設(shè)置-TranslationX
mHorizontalRecyclerView.setTranslationX(transX);
setHintTextTranslationX(mDeltaX);
}
}
break;
case MotionEvent.ACTION_CANCEL:
case MotionEvent.ACTION_UP:
//攔截事件-父布局滾
getParent().requestDisallowInterceptTouchEvent(false);
// 釋放動畫
if (mReleasedAnim != null && mReleasedAnim.isRunning()) {
break;
}
//如果達(dá)到指定位置了才算釋放
if (mOffsetWidth != 0 && mHintLeftMargin <= mOffsetWidth && mListener != null) {
mListener.onRelease();
}
//默認(rèn)的回去動畫
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);
}
/**
* 設(shè)置ShowMore布局的偏移量，并且設(shè)置內(nèi)部重繪貝塞爾曲線的控制點(diǎn)變量
*/
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);
這行不行，行！但是這么已攔截當(dāng)按在這個控件上往上下滑動的時候，同樣不能生效，會導(dǎo)致斷觸的效果。所以我們需要讓攔截事件只攔截水平方向的事件。
并且為了兼容處理，有些設(shè)備第一次觸摸的時候，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("進(jìn)入更多的頁面")
}效果：
如果嵌套會怎樣？
如果和豆瓣的滑動效果與閑魚的滑動進(jìn)入詳情效果放在一起：
當(dāng)我們滑動正常布局可以觸發(fā)閑魚的滑動，當(dāng)我們滑動豆瓣的滑動詳情，則是請求父布局不要攔截，可以正常的觸發(fā)滑動的效果，確實(shí)也符合我們的預(yù)期。
后記
其實(shí)本文并沒有什么新的知識點(diǎn)，無非就是在 ViewGroup 的測量布局的基礎(chǔ)上，加上事件的處理，從易到難實(shí)現(xiàn)各種右滑進(jìn)入詳情的效果。
只是需要注意的是，事件的處理與滑動有多種組合的方式實(shí)現(xiàn)，我們還是需要按需選擇，比如有一些處理滑動沖突的情況，最好我們還是使用 MotionEvent + Scroller / setTranslation 實(shí)現(xiàn)，對于一些不復(fù)雜的頁面我們可以使用谷歌封裝好的 ViewDragHelper 來快速實(shí)現(xiàn)。
當(dāng)然類似的效果也并不是只有自定義ViewGroup可以實(shí)現(xiàn)，其他的類似 behavor 也能實(shí)現(xiàn)同樣的效果，但我認(rèn)為它并不屬于自定義View體系，是另一個概念了，所以并沒有對它有過多的介紹。如果真要擴(kuò)展開來要講的東西也太多了。
以上就是Android自定義ViewGroup實(shí)現(xiàn)右滑進(jìn)入詳情的詳細(xì)內(nèi)容，更多關(guān)于Android ViewGroup的資料請關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Android獲取手機(jī)文件夾及文件列表的方法,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-11-11
Android ListView添加頭布局和腳布局實(shí)例詳解
這篇文章主要介紹了Android ListView添加頭布局和腳布局實(shí)例詳解的相關(guān)資料,大家看下效果是否是自己想要實(shí)現(xiàn)的效果，這里附了實(shí)現(xiàn)代碼和實(shí)現(xiàn)效果圖，需要的朋友可以參考下2016-11-11
Android Application存取公共數(shù)據(jù)的實(shí)例詳解
這篇文章主要介紹了Android Application存取公共數(shù)據(jù)的實(shí)例詳解的相關(guān)資料,需要的朋友可以參考下2017-07-07
這篇文章主要介紹了Android編程之文件的讀寫方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了Android針對文件操作的詳細(xì)步驟,常用函數(shù)及使用技巧,需要的朋友可以參考下2015-12-12
MVP是從經(jīng)典的模式MVC演變而來，它們的基本思想有相通的地方：Controller/Presenter負(fù)責(zé)邏輯的處理，Model提供數(shù)據(jù)，View負(fù)責(zé)顯示。下面這篇文章主要給大家介紹了關(guān)于Android從實(shí)現(xiàn)到封裝MVP的相關(guān)內(nèi)容，分享出來供大家參考學(xué)習(xí)，下面話不多說了，來一起看看詳細(xì)的介紹吧2023-03-03
這篇文章主要為大家詳細(xì)介紹了Android自定義跑馬燈文字效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
Android Universal ImageLoader 緩存圖片
Universal Image Loader for Android的目的是為了實(shí)現(xiàn)異步的網(wǎng)絡(luò)圖片加載、緩存及顯示，支持多線程異步加載，通過本文給大家介紹Android Universal ImageLoader緩存圖片相關(guān)資料，涉及到imageloader緩存圖片相關(guān)知識，對imageloader緩存圖片相關(guān)知識感興趣的朋友一起學(xué)習(xí)2016-01-01
android 開發(fā)中使用okhttp上傳文件到服務(wù)器
在開發(fā)android手機(jī)客戶端，常常會需要上傳文件到服務(wù)器，使用okhttp會是一個很好的選擇，它使用很簡單，而且運(yùn)行效率也很高，下面小編給大家?guī)砹薬ndroid 開發(fā)中使用okhttp上傳文件到服務(wù)器功能，一起看看吧2018-01-01
Android Studio 配置:自定義頭部代碼注釋及添加模版方式
這篇文章主要介紹了Android Studio 配置:自定義頭部代碼注釋及添加模版方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-03-03
Android 進(jìn)度條按鈕ProgressButton的實(shí)現(xiàn)代碼
這篇文章主要介紹了Android 進(jìn)度條按鈕實(shí)現(xiàn)(ProgressButton)代碼，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2018-10-10