1. 软市首页
  2. 行业观察

Android横向滚动卡片,Android仿探探卡片式滑动效果实现

• 行业观察

前言

第一次进入探探软件界面，就被这种通过卡片式滑动来选择“喜欢/不喜欢”的设计所吸引了。当时就非常想通过自己来实现这种仿探探式的效果，然而却没什么思路。不过毋庸置疑的是，这种效果的原理肯定和 ListView / RecyclerView 类似，涉及到 Item View 的回收和重用，否则早就因为大量的 Item View 而 OOM 了。

再到后来，看到许多大神也推出了同样仿探探效果的博客，从头到尾阅读下来，写得通俗易懂，基本上没什么问题。于是，实现仿探探效果的想法再次出现在脑海中。那么，还犹豫什么，趁热来一发吧!就这么愉快地决定了。

首先面临的问题就是关于实现 View 上的考虑。毫无疑问。

RecyclerView 是最佳选择!

RecyclerView 是最佳选择!

RecyclerView 是最佳选择!

重要的话讲三遍!!!

究其原因，第一，RecyclerView 是自带 Item View 回收和重用功能的，就不需要我们考虑这个问题了;第二，RecyclerView 的布局方式是通过设置 LayoutManager 来实现的，这样就充分地把布局和 RecyclerView “解耦”开来了。而 LayoutManager 是可以通过自定义的方式来实现的。这恰恰是我们想要的!!!再说一点，这也正是不选用 ListView 的原因之一。

下面，我们就开始动手了。带你见证奇迹的时刻。

CardLayoutManager

创建 CardLayoutManager 并继承自 RecyclerView.LayoutManager。需要我们自己实现 generateDefaultLayoutParams()方法：

@Override

public RecyclerView.LayoutParams generateDefaultLayoutParams() {

return new RecyclerView.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);

}

一般情况下，像上面这样写即可。

下面这个方法就是我们的重点了。 onLayoutChildren(final RecyclerView.Recycler recycler, RecyclerView.State state)方法就是用来实现 Item View 布局的：

@Override

public void onLayoutChildren(final RecyclerView.Recycler recycler, RecyclerView.State state) {

super.onLayoutChildren(recycler, state);

// 先移除所有view

removeAllViews();

// 在布局之前，将所有的子 View 先 Detach 掉，放入到 Scrap 缓存中

detachAndScrapAttachedViews(recycler);

int itemCount = getItemCount();

// 在这里，我们默认配置 CardConfig.DEFAULT_SHOW_ITEM = 3。即在屏幕上显示的卡片数为3

// 当数据源个数大于最大显示数时

if (itemCount > CardConfig.DEFAULT_SHOW_ITEM) {

// 把数据源倒着循环，这样，第0个数据就在屏幕最上面了

for (int position = CardConfig.DEFAULT_SHOW_ITEM; position >= 0; position–) {

final View view = recycler.getViewForPosition(position);

// 将 Item View 加入到 RecyclerView 中

addView(view);

// 测量 Item View

measureChildWithMargins(view, 0, 0);

// getDecoratedMeasuredWidth(view) 可以得到 Item View 的宽度

// 所以 widthSpace 就是除了 Item View 剩余的值

int widthSpace = getWidth() – getDecoratedMeasuredWidth(view);

// 同理

int heightSpace = getHeight() – getDecoratedMeasuredHeight(view);

// 将 Item View 放入 RecyclerView 中布局

// 在这里默认布局是放在 RecyclerView 中心

layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 2,

widthSpace / 2 + getDecoratedMeasuredWidth(view),

heightSpace / 2 + getDecoratedMeasuredHeight(view));

// 其实屏幕上有四张卡片，但是我们把第三张和第四张卡片重叠在一起，这样看上去就只有三张

// 第四张卡片主要是为了保持动画的连贯性

if (position == CardConfig.DEFAULT_SHOW_ITEM) {

// 按照一定的规则缩放，并且偏移Y轴。

// CardConfig.DEFAULT_SCALE 默认为0.1f，CardConfig.DEFAULT_TRANSLATE_Y 默认为14

view.setScaleX(1 – (position – 1) * CardConfig.DEFAULT_SCALE);

view.setScaleY(1 – (position – 1) * CardConfig.DEFAULT_SCALE);

view.setTranslationY((position – 1) * view.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y);

} else if (position > 0) {

view.setScaleX(1 – position * CardConfig.DEFAULT_SCALE);

view.setScaleY(1 – position * CardConfig.DEFAULT_SCALE);

view.setTranslationY(position * view.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y);

} else {

// 设置 mTouchListener 的意义就在于我们想让处于顶层的卡片是可以随意滑动的

// 而第二层、第三层等等的卡片是禁止滑动的

view.setOnTouchListener(mOnTouchListener);

}

}

} else {

// 当数据源个数小于或等于最大显示数时，和上面的代码差不多

for (int position = itemCount – 1; position >= 0; position–) {

final View view = recycler.getViewForPosition(position);

addView(view);

measureChildWithMargins(view, 0, 0);

int widthSpace = getWidth() – getDecoratedMeasuredWidth(view);

int heightSpace = getHeight() – getDecoratedMeasuredHeight(view);

layoutDecoratedWithMargins(view, widthSpace / 2, heightSpace / 2,

widthSpace / 2 + getDecoratedMeasuredWidth(view),

heightSpace / 2 + getDecoratedMeasuredHeight(view));

if (position > 0) {

view.setScaleX(1 – position * CardConfig.DEFAULT_SCALE);

view.setScaleY(1 – position * CardConfig.DEFAULT_SCALE);

view.setTranslationY(position * view.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y);

} else {

view.setOnTouchListener(mOnTouchListener);

}

}

}

}

private View.OnTouchListener mOnTouchListener = new View.OnTouchListener() {

@Override

public boolean onTouch(View v, MotionEvent event) {

RecyclerView.ViewHolder childViewHolder = mRecyclerView.getChildViewHolder(v);

// 把触摸事件交给 mItemTouchHelper，让其处理卡片滑动事件

if (MotionEventCompat.getActionMasked(event) == MotionEvent.ACTION_DOWN) {

mItemTouchHelper.startSwipe(childViewHolder);

}

return false;

}

};

总体来说，CardLayoutManager 主要就是为 Item View 布局，然后根据 position 做相对应的偏差。我们一起来看下完成的效果图：

发现还是差了点什么，没错!是缺少了动画。在滑动的过程中我们可以重写 onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder, float dX, float dY, int actionState, boolean isCurrentlyActive) 方法来添加动画：

@Override

public void onChildDraw(Canvas c, RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder,

float dX, float dY, int actionState, boolean isCurrentlyActive) {

super.onChildDraw(c, recyclerView, viewHolder, dX, dY, actionState, isCurrentlyActive);

View itemView = viewHolder.itemView;

if (actionState == ItemTouchHelper.ACTION_STATE_SWIPE) {

// 得到滑动的阀值

float ratio = dX / getThreshold(recyclerView, viewHolder);

// ratio 最大为 1 或 -1

if (ratio > 1) {

ratio = 1;

} else if (ratio

ratio = -1;

}

// 默认最大的旋转角度为 15 度

itemView.setRotation(ratio * CardConfig.DEFAULT_ROTATE_DEGREE);

int childCount = recyclerView.getChildCount();

// 当数据源个数大于最大显示数时

if (childCount > CardConfig.DEFAULT_SHOW_ITEM) {

for (int position = 1; position

int index = childCount – position – 1;

View view = recyclerView.getChildAt(position);

// 和之前 onLayoutChildren 是一个意思，不过是做相反的动画

view.setScaleX(1 – index * CardConfig.DEFAULT_SCALE + Math.abs(ratio) * CardConfig.DEFAULT_SCALE);

view.setScaleY(1 – index * CardConfig.DEFAULT_SCALE + Math.abs(ratio) * CardConfig.DEFAULT_SCALE);

view.setTranslationY((index – Math.abs(ratio)) * itemView.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y);

}

} else {

// 当数据源个数小于或等于最大显示数时

for (int position = 0; position

int index = childCount – position – 1;

View view = recyclerView.getChildAt(position);

view.setScaleX(1 – index * CardConfig.DEFAULT_SCALE + Math.abs(ratio) * CardConfig.DEFAULT_SCALE);

view.setScaleY(1 – index * CardConfig.DEFAULT_SCALE + Math.abs(ratio) * CardConfig.DEFAULT_SCALE);

view.setTranslationY((index – Math.abs(ratio)) * itemView.getMeasuredHeight() / CardConfig.DEFAULT_TRANSLATE_Y);

}

}

// 回调监听器

if (mListener != null) {

if (ratio != 0) {

mListener.onSwiping(viewHolder, ratio, ratio

} else {

mListener.onSwiping(viewHolder, ratio, CardConfig.SWIPING_NONE);

}

}

}

}

private float getThreshold(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {

return recyclerView.getWidth() * getSwipeThreshold(viewHolder);

}

现在我们加上动画后，来看看效果：

发现还是有问题，第一层的卡片滑出去之后第二层的就莫名其妙地偏了。这正是因为 Item View 重用机制“捣鬼”。所以我们应该在 clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder)方法中重置一下：

@Override

public void clearView(RecyclerView recyclerView, RecyclerView.ViewHolder viewHolder) {

super.clearView(recyclerView, viewHolder);

viewHolder.itemView.setRotation(0f);

}

大功告成，我们试一下效果：

7aa357e57917612adc777f1664e8490a.gif

Perfect !

正是我们梦寐以求的效果。我们终于实现了!!!

总结

相关资源：经典刻录软件尼禄Nero6.6.1.4中文安装版及序列 -其它工具类资源…

声明：本站部分文章及图片源自用户投稿，如本站任何资料有侵权请您尽早请联系jinwei@zod.com.cn进行处理,非常感谢！

上一篇 2021年4月22日
下一篇 2021年4月22日

相关推荐

首页
软件超市
企服市场
会员中心