Android之View篇6————仿陌陌卡片左右滑动选择控件
一.目录
Android之View篇6————仿陌陌卡片左右滑动选择控件
一.目录
二.效果图
三.业务需求梳理
四.思路分析
1. 新建TinderCardView类，并继承FrameLayout
2. 新建TinderStackLayout 类，并继承FrameLayout
五.源码地址
二.效果图
三.业务需求梳理
卡片随着手指的移动进行移动
卡片在移动过程中，随着距离的加大，卡片绕z轴旋转
判断手指的移动方向，显示选择/删除图标，同时图标随距离的增大，透明度增加
手指离开卡片后，根据移动的距离，判断卡片是否移出屏幕，从左边移动还是右边移动
显示的卡片移出完后，增加新的卡片。
显示的4张卡片，需要展示出卡片的层次感
四.思路分析
根据上面的业务逻辑梳理，明显可以知道，实现该功能需要自定义两个View，一个是卡片View(TinderCardView)，一个是卡片的容器(TinderStackLayout)。
需求1,2,3都是手指移动过程中发生，即MotionEvent的ACTION_MOVE事件中。
MotionEvent 这一块不知道的可以看我前面写的博客Android之View篇2————View的事件分发
需求4是在手指离开屏幕后中发生的，即MotionEvent的MotionEvent.ACTION_UP事件中
需求5是卡片动画结束后，判断剩余卡片数量，选择是否要加载新的卡片
需求6是加载新卡片时，要求实现的。
1. 新建TinderCardView类，并继承FrameLayout
a.TinderCardView即展示信息的卡片类，重写其onTouch方法
@Override
public boolean onTouch(final View view, MotionEvent motionEvent) {
TinderStackLayout tinderStackLayout = ((TinderStackLayout) view.getParent());
TinderCardView topCard = (TinderCardView) tinderStackLayout.getChildAt(tinderStackLayout.getChildCount() - 1);
if (topCard.equals(view)) {
switch (motionEvent.getAction()) {
case MotionEvent.ACTION_DOWN:
downX = motionEvent.getX();
downY = motionEvent.getY();
view.clearAnimation();
return true;
case MotionEvent.ACTION_MOVE:
newX = motionEvent.getX();
newY = motionEvent.getY();
dX = newX - downX; //手指移动距离
dY = newY - downY;
float posX = view.getX() + dX;
view.setX(view.getX() + dX); //view的新距离 需求1，卡片随手指的移动而移动
view.setY(view.getY() + dY);
float rotation = (CARD_ROTATION_DEGREES * (posX)) / screenWidth;
int halfCardHeight = (view.getHeight() / 2);
if (downY < halfCardHeight - (2 * padding)) {
view.setRotation(rotation); //设置View在Z轴上的旋转角度 需求2，卡片移动过程中，随距离的增大而，选择角度增大
} else {
view.setRotation(-rotation);
}
float alpha = (posX - padding) / (screenWidth * 0.3f);
if (alpha > 0) { //需求3, 判断手指的移动方向，显示选择/删除图标，同时图标随距离的增大，透明度增加
iv_tips.setAlpha(alpha);
iv_tips.setImageResource(R.drawable.ic_like);
} else {
iv_tips.setAlpha(-alpha);
iv_tips.setImageResource(R.drawable.ic_nope);
}
return true;
case MotionEvent.ACTION_UP: //需求4. 手指离开卡片后，根据移动的距离，判断卡片是否移出屏幕，从左边移动还是右边移动
if (isBeyondLeftBoundary(view)) {
removeCard(view, -(screenWidth * 2)); //移动view.向左边移出屏幕
} else if (isBeyondRightBoundary(view)) {
removeCard(view, (screenWidth * 2));
} else {
resetCard(view); //复原view
}
return true;
default:
return super.onTouchEvent(motionEvent);
}
}
return super.onTouchEvent(motionEvent);
}
b.判断是否左右移动距离是否达到要求
private boolean isBeyondLeftBoundary(View view) {
return (view.getX() + (view.getWidth() / 2) < leftBoundary);
}
private boolean isBeyondRightBoundary(View view) {
return (view.getX() + (view.getWidth() / 2) > rightBoundary);
}
c.卡片移出屏幕和复原动画
private void removeCard(final View view, int xPos) { //移出屏幕动画
view.animate()
.x(xPos) //x轴移动距离
.y(0) //y轴移动距离
.setInterpolator(new AccelerateInterpolator()) //插值器 在动画开始的地方速率改变比较慢，然后开始加速
.setDuration(DURATIONTIME) //移动距离
.setListener(new Animator.AnimatorListener() { //监听
@Override
public void onAnimationStart(Animator animator) {
}
@Override
public void onAnimationEnd(Animator animator) {//移出后回调
ViewGroup viewGroup = (ViewGroup) view.getParent();
if (viewGroup != null) {
viewGroup.removeView(view);
int count = viewGroup.getChildCount();
if (count == 1 && listener != null) { //需求5，增加新卡片
listener.onLoad();
}
}
}
@Override
public void onAnimationCancel(Animator animator) {
}
@Override
public void onAnimationRepeat(Animator animator) {
}
});
}
private void resetCard(final View view) { //还原动画
view.animate()
.x(0) //x轴移动
.y(0) //y轴移动
.rotation(0) //循环次数
.setInterpolator(new OvershootInterpolator()) //插值器 向前甩一定值后再回到原来位置
.setDuration(DURATIONTIME);
iv_tips.setAlpha(0f); //图标隐藏
}
2. 新建TinderStackLayout 类，并继承FrameLayout
a.数据的初始化添加
public void setDatas(List list) { //提供给activity调用
this.mList = list;
if (mList == null) {
return;
}
for (int i = index; index < i + STACK_SIZE; index++) {
tc = new TinderCardView(getContext());
tc.bind(mList.get(index));
tc.setOnLoadMoreListener(this);
addCard(tc);
}
}
private void addCard(TinderCardView view) {
int count = getChildCount();
addView(view, 0, params);
float scaleX = 1 - (count / BASESCALE_X_VALUE);
view.animate()
.x(0)
.y(count * scaleY) //需求6，实现层次感
.scaleX(scaleX) //水平缩放比例
.setInterpolator(new AnticipateOvershootInterpolator())
.setDuration(DURATIONTIME);
}
b.实现接口onLoad() 供TinderCardView类调用
@Override
public void onLoad() { //当显示卡片数量==1时，TinderCardView调用该方法添加新卡片
for (int i = index; index < i + (STACK_SIZE - 1); index++) {
if (index == mList.size()) {
return;
}
tc = new TinderCardView(getContext());
tc.bind(mList.get(index));
tc.setOnLoadMoreListener(this);
addCard(tc);
}
int childCount = getChildCount();
for (int i = childCount - 1; i >= 0; i--) {
TinderCardView tinderCardView = (TinderCardView) getChildAt(i);
if (tinderCardView != null) {
float scaleValue = 1 - ((childCount - 1 - i) / 50.0f);
tinderCardView.animate()
.x(0)
.y((childCount - 1 - i) * scaleY)
.scaleX(scaleValue)
.rotation(0)
.setInterpolator(new AnticipateOvershootInterpolator())
.setDuration(DURATIONTIME);
}
}
}
五.源码地址
点位查看源码
如果觉得《android 自定义裁剪 陌陌 Android之View篇6————仿陌陌卡片左右滑动选择布局》对你有帮助，请点赞、收藏，并留下你的观点哦！
