Tinder のような横スワイプできるカードなUIライブラリ「AndTinder」

mikanでは左右にスワイプすることで次々とカードをめくっていくようなUIを採用している。これは、去年あたりからアメリカの若者の間で流行している出会いアプリの「Tinder」が生み出し、多くのアプリが採用しているスマフォ・ネイティブといっていいUIだ。

「素早く振り分けができる」てことなのだろうが, Yes/No ボタンでも同じじゃね?

などと思いつつ, ライブラリを探す.

Swipeable-Cards/AndTinder at master · kikoso/Swipeable-Cards

20140730-133942

20140730-133956

20140730-134023

20140730-134040

使い方は簡単で,

レイアウト内に View コンテナとして埋め込んで,

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              xmlns:app="http://schemas.android.com/apk/res-auto"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
              android:orientation="vertical">

    <com.andtinder.view.CardContainer
        android:id="@+id/layoutview"
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1"/>
</LinearLayout>

利用 Activity でカード内のテキストと画像を指定.
スワイプ処理の Listener もここで.

public class MainActivity extends Activity {

  private CardContainer mCardContainer;

  @Override
  public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    requestWindowFeature(Window.FEATURE_NO_TITLE);
    setContentView(R.layout.mainlayout);

    mCardContainer = (CardContainer) findViewById(R.id.layoutview);

    Resources r = getResources();

    SimpleCardStackAdapter adapter = new SimpleCardStackAdapter(this);

    adapter.add(new CardModel("Title1", "Description goes here", r.getDrawable(R.drawable.picture1)));
    adapter.add(new CardModel("Title2", "Description goes here", r.getDrawable(R.drawable.picture2)));
    ...

    cardModel.setOnClickListener(new CardModel.OnClickListener() {
      @Override
      public void OnClickListener() {
        Log.i("Swipeable Cards","I am pressing the card");
      }
    });

    cardModel.setOnCardDimissedListener(new CardModel.OnCardDimissedListener() {
       @Override
       public void onLike() {
         Log.i("Swipeable Cards","I like the card");
       }

       @Override
       public void onDislike() {
         Log.i("Swipeable Cards","I dislike the card");
       }
    });

    adapter.add(cardModel);
    mCardContainer.setAdapter(adapter);
  }
}

このUI, 実際使ってみると, 気持ちよすぎてクセになるんだわー

Tinder