AndroidSwipeableCardStack

介绍：

类似社交app tinder的滑动卡片效果，流畅，体验很好。可以用来实现滑到左边喜欢，右边不喜欢之类的功能，卡片内容的添加是用的Adapter。

运行效果：

使用说明：

youtube 视频 : https://www.youtube.com/watch?v=YsMnLJeouf8&feature=youtu.be 源码中包含视频，但是卡片内容只是普通视图，不是图片。

安装

下载 released .aar 文件下载当前版本
把它放在项目的lib目录，比如“libs”
在gradle.build 文件中放入下面的代码：

repositories {
    flatDir {
        dirs 'libs'
    }
}
dependencies {
    compile(name:'android-card-stack-0.1.0', ext:'aar')
}

配置

在布局文件中放入CardStack

 <com.wenchao.cardstack.CardStack
        android:id="@+id/container"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding = "20dp"
        android:clipChildren="false"
        android:clipToPadding="false"
    />

在布局里创建卡片视图。

例子: card_layout.xml, 只包含一个textview 。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:id="@+id/content"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
    />
</LinearLayout>

为card stack实现一个自己的adapter，CardStack接受ArrayAdapter。下面的例子继承了一个ArrayAdapter，重写了getView() 提供自定义的卡片视图。

public class CardsDataAdapter extends ArrayAdapter<String> {
    @Override
    public View getView(int position, final View contentView, ViewGroup parent){
        //supply the layout for your card
        TextView v = (TextView)(contentView.findViewById(R.id.content));
        v.setText(getItem(position));
        return contentView;
    }
}

在activity中获取CardStack实例

  protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_my);
        mCardStack = (CardStack)findViewById(R.id.container);
        mCardStack.setContentResource(R.layout.card_content);
        mCardStack.setStackMargin(20);
  }

ps：注意mCardStack.setContentResource(R.layout.card_content)这行代码的作用。

最后，设置adapter

    mCardAdapter = new CardsDataAdapter(getApplicationContext(),0);
    mCardAdapter.add("test1");
    mCardAdapter.add("test2");
    mCardAdapter.add("test3");
    mCardAdapter.add("test4");
    mCardAdapter.add("test5");
    mCardStack.setAdapter(mCardAdapter);

监听 card stack 事件

实现 CardStack.CardEventListener, 然后把它设置为监听者：mCardStack.setListener(yourListener);

Class YourListener extends CardStack.CardEventListener{
    //implement card event interface
    @Override
    public boolean swipeEnd(int direction, float distance) {
        //if "return true" the dismiss animation will be triggered 
        //if false, the card will move back to stack
        //distance is finger swipe distance in dp
        //the direction indicate swipe direction
        //there are four directions
        //  0  |  1
        // ----------
        //  2  |  3
        return (distance>300)? true : false;
    }
    @Override
    public boolean swipeStart(int direction, float distance) {
        return true;
    }
    @Override
    public boolean swipeContinue(int direction, float distanceX, float distanceY) {
        return true;
    }
    @Override
    public void discarded(int direction,int direction) {
       //this callback invoked when dismiss animation is finished. 
    }
    @Override
    public void topCardTapped() {
         //this callback invoked when a top card is tapped by user. 
    }
}