android仿探探卡片右滑缩小,仿探探卡片滑动选择

探探的滑动选择妹子的功能，算是一个很经典的交互方式。自从出来以后可以说是备受关注，渐渐地很多类似功能的app也都有尝试。实现也是具有综合性的挑战，所以说网上也是有不少例子的，在这里我通过自定义ViewGroup的方式来实现。

需要达到的效果

实现的过程中，当然我们需要参考探探。这里实现最核心的功能，如下：

卡片的层叠显示

拖动选择卡片

加载数据

怎么实现呢？

当第一眼看到，察觉到的难点当然是拖动的实现。拖动的过程中会旋转，同时层叠中的view 会改变位置。如果松手还会返回原位置或者移除卡片。在自定义viewGroup中拖动事件算是很麻烦的实现。但是呢官方给我们提供一一大神器ViewDragHelper。有了它我们实现起来就事半功倍了，在这里之前也有文章介绍。如果不太明白使用，参考资料会列出来。既然拖动现在好说了。那么层叠的效果呢？这里不得不说算是核心了。在这里我也走过弯路，因为之前的实现我是想的让onlayout的时候，让子view在不同位置，并且缩放的宽高也用onLayout变更left,top,right,bottom实现。但是实践过程中会变得很复杂，不好实现。后面果断改变思路。在onLayout中对每一个view都根据它自身的已测量宽高居中显示，然后通过设置setScale,setTranslationY改变y轴防线的偏移量实现。可以看到我们是居中layout,我们事先的效果是y轴方向的偏移，所以主要看y轴的layout.这里需要琢磨一下滑动的过程中的显示，卡片的总量是固定值，我们默认设置为4，当然是可以改变的。我们可以看到探探滑动的时候，最底层的view，跟倒数第二层初始状态是叠在一起的。我们定义从最顶层为第一层，一次递增。并且每一层都有一个固定的offset，每一层都有固定的缩放scale。因为缩放也会造成y轴方向的偏移变化，这里记缩放引起的偏移scaleYOffset.所以总的totalOffset = offset + scaleYOffset.可以看到offset,scaleYOffset都跟子view所在的层次有关。接下来结合代码分析

先定义一些常量

private static final float DEFAULT_SCALE = 0.05f;//默认缩放的级别

private static final int DEFAULT_OFFSET = 10;//dp

private static final int DEFAULT_MARGIN = 10;//dp

private static final int DEFAULT_DEGRESS = 20;//旋转的度数

private static final int DEFAULT_SHOW_COUNT = 4;//默认显示数量

layout 实现

protected void onLayout(boolean changed, int l, int t, int r, int b) {

float scale = 1f;

int level = 0;

for (int i = getChildCount() - 1; i >= 0; i--) {

View child = getChildAt(i);

float scaleValue = scale - DEFAULT_SCALE * (level);

int offset = ViewExKt.dp2px(this, DEFAULT_OFFSET);

int offsetValue = offset * (level);

child.layout(mCenterX - child.getMeasuredWidth() / 2

, mCenterY - child.getMeasuredHeight() / 2

, mCenterX + child.getMeasuredWidth() / 2

, mCenterY + child.getMeasuredHeight() / 2);

float yOffset = child.getMeasuredHeight() * DEFAULT_SCALE * (level) / 2;

child.setTranslationY(yOffset + offsetValue);

child.setScaleX(scaleValue);

child.setScaleY(scaleValue);

// i > 1 是因为确保最后两个view是重叠在一起

if (i > 1 || getChildCount() < showCount) {

level++;

}

}

}

可以看到以上代码对没个子view进行遍历，同时根据每个子view的level,最顶部为0.根据level 算出拨通的offsetValue,yOffset，最终相加计算出总偏移量，scaleValue 也根据level 计算。最终判断i>1 是为了，不计算最底部level增加，让最底部view跟倒数第二个子view缩放级别一致。在layout之前肯定要先measure，这里实现比较简单,仅仅是对自view进行测量，WRAP_CONTENT状态下没有根据子view宽高，定义自身宽高，还需要改进根据子view最大宽高。

protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {

super.onMeasure(widthMeasureSpec, heightMeasureSpec);

measureChildren(widthMeasureSpec, heightMeasureSpec);

}

当我们测量，和布局之后。显示出来就已经是层叠的效果了，接下来则需要通过ViewDragHelper 对子view进行拖动及触摸反馈了。还有对数据加载的处理。

拖动的处理

可以看到使用ViewDraghelpr处理是非常方便的，每个回调方法都很清晰，方法也很实用。接下来是ViewDragHelper标准操作如下：

//接管onTneterceptTouchEvent

@Override

public boolean onInterceptTouchEvent(MotionEvent ev) {

return mDragHelper.shouldInterceptTouchEvent(ev);

}

//处理onTouchEvent，核心方法，处理事件的封装都在这里了

@Override

public boolean onTouchEvent(MotionEvent event) {

mDragHelper.processTouchEvent(event);

return true;

}

//vdh的滑动采用的OverScroll 当然需要实现computeScroll

@Override

public void computeScroll() {

super.computeScroll();

if (mDragHelper.continueSettling(true)) {

postInvalidate();

}

}

回调方法，这里所有重要的操作都在这些方法里面了，特别是

tryCcaptureView,onViewReleased,onViewPositionChanged.

在拖动的过程中，始终拖动的是最顶部的view，这里怎么实现呢?，很简单,tryCaptureView指定某个view可以被拖动

public boolean tryCaptureView(View child, int pointerId) {

// 最top 的view 可滑动

return indexOfChild(child) == getChildCount() - 1;

}

现在已经可以拖动最顶部的view了，如果我们松手会停留在拖动到的位置，这里只需要调用settleCaptureViewAt,结合computeScroll 可以滑动到指定位置

if (isDraging) {

mDragHelper.settleCapturedViewAt(mCenterX - releasedChild.getMeasuredWidth() / 2

, mCenterY - releasedChild.getMeasuredHeight() / 2);

invalidate();

}

好了，现在我们具有层叠效果，并且可以拖动顶部view，并且松手会返回原位了。接下来就该拖动的时候剩下子view的变化。在拖动的过程中onViewPositionChanged会始终被调用，这里根据拖动的位置left,top,dx,dy的变化，判断出子view的变化。那么子view需要什么变化呢。通过之前onLayout的分析，可知道子view是分level的，比如倒数的二层在onlayout level是1，设定的缩放是0.9f,在这里我们需要根据顶部view的拖动使其它子view,变大或变小，也就是缩放和translationY的变化，都要结合起onLayout的时候来做。这都需要有一个变化率在[0,1]之前，这里我们通过

float rate = left * 1.0f / (getMeasuredWidth() / 3);

float a = Math.min(1, Math.max(0, Math.abs(rate)));

以上代码可以算出我们想要的比例，为什么是宽除以3，这里是我选择的当然也可以选择其他值。因为我觉得3正好。当然越大rate越大。

int offset = ViewExKt.dp2px(TinderStackLayout.this, DEFAULT_OFFSET);

// 这里为什么会有判断 i = 0，i= 1，是因为如果释放了会把view remove

// 所以这里会做判断保证布局底部的显示，从1开始最底部view 不会有变化

for (int i = getChildCount() < showCount ? 0 : 1; i < getChildCount() - 1; i++) {

View child = getChildAt(i);

// ds 代表缩放，分为两部分计算 + 号前面是布局的时候应该缩放多少，后段是跟随滑动

// 缩放的变化量

float ds = 1 - DEFAULT_SCALE * (getChildCount() - 1 - i) + DEFAULT_SCALE * a;

// 同根据布局时固定的的偏移量 - 变化量

float doffset = (getChildCount() - 1 - i) * offset - offset * a;

// 同布局时缩放的偏移量 - 变化量

float yOffset = child.getMeasuredHeight() * DEFAULT_SCALE * (getChildCount() - 1 - i - a) / 2;

child.setScaleY(ds);

child.setScaleX(ds);

child.setTranslationY(doffset + yOffset);

L.d(TAG, "ds : " + ds + " doffset : " + doffset + " a : " + a);

}

以上代码，根据onlayout的数据，和rate值的变化设置child的scale,和 translationy的变化。这里就不多解释了，代码注释相信可以理解。就是onLayout的值加上 rate的相关变化率。通过这里代码的实现我们已经可以拖动的时候实现其他子view的缩放平移变化了。会发现，可以一直拖动但是我们需要，超过一个限定值就会触发选择事件，移除view,并滑向远方。这里使用两个值判断,a.是否left超过width的三分之一，b.斜率是否超过0.15。

//斜率，有方向

float sloap = top * 1.0f / left;

斜率的计算。

判断是否是继续拖动还是触发事件

// top view 滑动的距离超过 宽度的三分之一，并且斜率 大于0.15 可以视为触发选择事件

if (Math.abs(left) > getMeasuredWidth() / 3 && Math.abs(sloap) > 0.15) {

mReleasedPoint.x = left;

mReleasedPoint.y = top;

isDraging = false;

}

在这里因为需要记录状态值，和拖动事件触发的位置，用于释放时的计算。通过isDraging,mReleasedPoint保存。接下来看onViewReleased的实现，这里是实现的事件触发的关键

if (isDraging) {

通过isDraging的判断是否停止拖动触发事件

if (mReleasedPoint.x != 0 && mReleasedPoint.y != 0) {

final float sloap = mReleasedPoint.y / (mReleasedPoint.x * 1.0f);

if (Math.abs(mReleasedPoint.x) > getMeasuredWidth() / 3 && Math.abs(sloap) > 0.15) {

mDragHelper.smoothSlideViewTo(releasedChild, getMeasuredWidth(), (int) (getMeasuredWidth() * sloap));

onChoosePick(sloap);

invalidate();

mReleasedPoint.x = 0;

mReleasedPoint.y = 0;

removeView(releasedChild);

onAddView();

}

}

通过代码判断是否触发移除和触发事件。mDraghelper.smoothSlideViewTo 把view 通过动画移到远处，并且removeView,触发onChoosePick(sloap)是左选还是右选，onAddView()添加新的view进来，如果有的话。

通过以上实现我们已经可以拖动到指定限制处释放view了。实现选择功能了。但是我们还需要旋转，这里很简单，在onViewPositionChanged里面的rate可以帮助实现，并且rate是又方向的，这可以实现左右拖动角度的变化

changedView.setRotation(rate * DEFAULT_DEGRESS);

限制基本上效果都有了，但是还有个问题，因为left不会为0，所以rate不会为0 会有偏差，所以需要监听IDLE状态，设置到0

public void onViewDragStateChanged(int state) {

super.onViewDragStateChanged(state);

// 停止滑动的时候，将最后一个view 角度设置为0，因为算斜率的

// 的方式最后滑动完成会有微小的偏差

if (state == ViewDragHelper.STATE_IDLE && isDraging) {

View childTop = getChildAt(getChildCount() - 1);

if (childTop != null) {

childTop.setRotation(0);

}

}

}

这样基本功能已经实现，但是我们需要数据还有选择的监听,这也很重要。这里采用适配器实现我们关心的只有是否添加view.还有个数。

public interface BaseCardAdapter {

int getItemCount();

View getView();

}

public interface OnChooseListener{

// 1 为右边滑动 0 为左边滑动

void onPicked(int directon);

}

这里是回调

private void onAddView() {

if (adapter != null) {

if (adapter.getView() == null) {

return;

}

addView(adapter.getView(),0);

}

}

private void onChoosePick(float sloap) {

if (chooseListener != null) {

chooseListener.onPicked(sloap > 0 ? 1 : 0);

}

}

设置adapter添加初始数据

public void setAdapter(BaseCardAdapter adapter) {

this.adapter = adapter;

if (adapter != null){

int count = Math.min(adapter.getItemCount(),showCount);

if (count <= 0) {

return ;

}

for (int i = 0 ;i < count ; i++) {

addView(adapter.getView());

}

}

}

到这里已经实现完毕，效果还不错，如果需要查看一下demo，请参考源码。

device-2019-01-05-181446.png

参考资料