可删除超炫&多种特效的Card视图（改造自cardsui-for-android开源项目），提供DEMO下载
转载请注明本文出自大苞米的博客（http://blog.csdn.net/a396901990），谢谢支持！
这里贴几个效果图，我做了一个gif的动态图，但是不知道为什么上传后图片不动，所以只能放在相册里。
如果大家想看动态的图片演示请点击后面的链接gif动态演示图片
实例Demo下载地址在本文最后
简单介绍
这个Demo主要是使用了cardsui-for-android开源项目，并且做了一些优化和改进：
1.自定义card视图
2.添加长按事件，避免误操作
3.长按后可以删除card，并播放选中动画
4.删除后浮现一个悬浮button
5.点击悬浮button可以恢复之前删除的card视图
看内容前强烈建议先阅读以下的两篇文章，因为这个demo是在这两个文章的基础上写的：
关于cardsui-for-android这个开源项目的介绍和实现请看这篇博文酷炫开源项目cardsui-for-android-超详细源码分析，详解所用特效是如何实现的
4,5功能是参照开源项目cardslib，对这个开源项目的导入和简单介绍请看这篇博文开源项目cardslib简单介绍和导入eclipse并运行的方法
接下来对于以上的5个改进简单介绍：(本文只是提供一个思路，具体代码细节建议还是看提供的demo)
1.自定义card视图
这里只是简单的对于不同的card设置了不同的背景颜色：
CardStack stack = new CardStack(this);
stack.setTitle("请支持大苞米的博客");
for (int i = 0; i < 5; i++) {
MyCard card = null ;
switch (i) {
case 0:
card = new MyCard("#FFBB33");
break;
case 1:
card = new MyCard("#98CC00");
break;
case 2:
card = new MyCard("#A966CC");
break;
case 3:
card = new MyCard("#33B4E4");
break;
case 4:
card = new MyCard("#FF4343");
break;
}
stack.add(card);
}
mCardView.addStack(stack);MyCard类就是我自定义的一个继承自card类的一个实现类，具体实现请看demo中的代码，很简单。可以很轻松的改成自己想要的样子，这里不过多介绍。
2.添加长按事件，避免误操作
3.长按后可以删除card，并播放选中动画
在CardStack中getView()方法中可以设置对card的点击监听
//正常点击监听
cardView.setOnClickListener(getClickListener(this, container, i));
//长按点击监听
cardView.setOnLongClickListener(getOnLongClickListener(card));
//触摸监听
cardView.setOnTouchListener(new SwipeDismissTouchListener(
cardView, card, i, new OnDismissCallback() {
@Override
public void onDismiss(View view, Object token, int index) {
....
}
}
}
长按点击监听getOnLongClickListener()的实现：
//改监听传入被按的card作为引用
private OnLongClickListener getOnLongClickListener(final Card card) {
return new OnLongClickListener() {
@Override
public boolean onLongClick(View v) {
//给card设置一个flag，标识这个card被长按过了
card.setLongClickable(true);
//播放动画
Animation shake = AnimationUtils.loadAnimation(mContext , R.anim.shake);
v.startAnimation(shake);
return false;
}
};
}这个动画是一个左右来回摆动的动画，具体实现可以去代码里找，这里不过多介绍了。
这里注意长按监听里最后返回false，这里在之前的那篇文章详介绍了，作用就是将事件接着交给ontouch监听处理。
接下来看看给card设好标识位后来到onTouchListener中，因为正常点击和长按点击都会触发触摸事件
@Override
public boolean onTouch(View view, MotionEvent motionEvent) {
//按下
case MotionEvent.ACTION_DOWN: {
.....
return false;
}
//抬起
case MotionEvent.ACTION_UP: {
if (dismiss && c.isLongClickable()) {
....
}
//将长按标示置为初始false
c.setLongClickable(false);
break;
}
//滑动
case MotionEvent.ACTION_MOVE: {
if (mSwiping & c.isLongClickable()) {
....
return true;
}
break;
}
}如上面的伪代码中，在滑动和抬起操作时先判断card中的长按标示。最后在抬起的时候将长按标示为重置为false，这样就实现了长按操作4.删除后浮现一个悬浮button
如图：
首先要实现这个功能就要先知道删除事件在哪，这样才能添加相应功能。
if (dismiss && c.isLongClickable()) {
// dismiss
animate(mView)
.translationX(dismissRight ? mViewWidth : -mViewWidth)
.alpha(0).setDuration(mAnimationTime)
.setListener(new AnimatorListener() {
@Override
public void onAnimationEnd(Animator arg0) {
//执行删除操作
performDismiss();
}
});
} 删除事件在上面介绍的触摸监听中滑动操作里面，如果可以删除，则先播放一段删除动画。在动画结束的回调方法中执行performDismiss()方法。该方法执行删除的回调方法mCallback.onDismiss(mView, mToken, mIndex);，该回调方法的具体实现在最开始为card设置触摸监听的地方。
cardView.setOnTouchListener(new SwipeDismissTouchListener(
cardView, card, i, new OnDismissCallback() {
@Override
public void onDismiss(View view, Object token, int index) {
Card c = (Card) token;
// call onCardSwiped() listener
c.OnSwipeCard();
cards.remove(c);
mAdapter.setItems(mStack, getPosition());
// refresh();
mAdapter.notifyDataSetChanged();
//Check for a undo message to confirm
if (isEnableUndo() && mUndoBarController!=null){
//Show UndoBar
UndoCard itemUndo=new UndoCard(c , index);
if (mContext!=null){
Resources res = mContext.getResources();
if (res!=null){
int number = index+1;
String messageUndoBar = "确认要删除第"+number+"个card视图吗？";
mUndoBarController.showUndoBar(
false,
messageUndoBar,
itemUndo);
}
}
}
}
}));
回调方法中先从cards集合中删除这个card。之后把这个删除的card和他的位置传递给UndoCard类，之后通过UndoBarController.showUndoBar方法来显示悬浮的点击按钮，这里传递的有显示的消息和携带了删除信息的UndoCard类。
之后来简单看下UndoBarController类：
public UndoBarController(View undoBarView, UndoListener undoListener,UndoBarUIElements undoBarUIElements) {
mBarView = undoBarView;
mBarAnimator = mBarView.animate();
mUndoListener = undoListener;
if (undoBarUIElements==null)
undoBarUIElements = new DefaultUndoBarUIElements();
mUndoBarUIElements = undoBarUIElements;
mMessageView = (TextView) mBarView.findViewById(mUndoBarUIElements.getUndoBarMessageId());
mBarView.findViewById(mUndoBarUIElements.getUndoBarButtonId())
.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
hideUndoBar(false);
mUndoListener.onUndo(mUndoToken);
}
});
hideUndoBar(true);
}
@SuppressLint("NewApi")
public void showUndoBar(boolean immediate, CharSequence message, Parcelable undoToken) {
mUndoToken = undoToken;
mUndoMessage = message;
mMessageView.setText(mUndoMessage);
mHideHandler.removeCallbacks(mHideRunnable);
mHideHandler.postDelayed(mHideRunnable, 5000);
mBarView.setVisibility(View.VISIBLE);
if (immediate) {
mBarView.setAlpha(1);
} else {
mBarAnimator.cancel();
mBarAnimator
.alpha(1)
.setDuration(
mBarView.getResources()
.getInteger(android.R.integer.config_shortAnimTime))
.setListener(null);
}
}
@SuppressLint("NewApi")
public void hideUndoBar(boolean immediate) {
mHideHandler.removeCallbacks(mHideRunnable);
if (immediate) {
mBarView.setVisibility(View.GONE);
mBarView.setAlpha(0);
mUndoMessage = null;
mUndoToken = null;
} else {
mBarAnimator.cancel();
mBarAnimator
.alpha(0)
.setDuration(mBarView.getResources()
.getInteger(android.R.integer.config_shortAnimTime))
.setListener(new AnimatorListenerAdapter() {
@Override
public void onAnimationEnd(Animator animation) {
mBarView.setVisibility(View.GONE);
mUndoMessage = null;
mUndoToken = null;
}
});
}
}
这里主要关注showUndoBar，hideUndoBar，UndoBarController这3个方法
showUndoBar和hideUndoBar主要就是控制显示这个悬浮button，这个button的布局在代码中事先已经添加好，这两个方法中设置它的Visibility属性就可以控制隐藏和显示。
5.点击悬浮button可以恢复之前删除的card视图
接上面。UndoBarController方法中有一个监听器，可以监听悬浮button的点击事件：
mBarView.findViewById(mUndoBarUIElements.getUndoBarButtonId())
.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
hideUndoBar(false);
mUndoListener.onUndo(mUndoToken);
}
});
点击后隐藏这个button，之后执行onUndo方法来恢复被删除的card。(mUndoToken中携带的就是被删除的Card还有他位置信息的UndoCard类)。
public interface UndoListener {
/*
* Called when you undo the action
*/
void onUndo(Parcelable undoToken);
}这个监听器是一个接口，下面要做的就是找到实现mUndoListener.onUndo(mUndoToken)这个监听回调方法的地方。
public class CardStack extends AbstractCard implements UndoBarController.UndoListener实现这个接口的就是我们的CardStack这个类了，接下来在类中找到onUndo回调方法。
@Override
public void onUndo(Parcelable undoToken) {
//Restore items in lists (use reverseSortedOrder)
if (undoToken != null) {
UndoCard item = (UndoCard) undoToken;
Card card = item.card;
int position = item.position;
if (card != null) {
add(card, position);
mAdapter.notifyDataSetChanged();
}
}
}实现很简单：取出存放在UndoCard中的card和位置。把他重新添加到集合中，之后刷新适配器重新显示。
大概的对于这个开源项目的改进介绍完毕，本文只是提供一个思路，具体代码细节建议还是看提供的demo。
删除恢复功能是仿照cardsui这个开源项目实现的。涉及的类上面已经介绍了就是UndoCard和UndoBarController这两个类，
最后我强烈建议好好的看看这两个类和相关的调用方法，代码不多而且设计的很好，值得研究一下。。。
Demo下载地址：点击下载
可删除超炫&多种特效的Card视图（改造自cardsui-for-android开源项目），提供DEMO下载,,5-wow.com
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
