#iOS | #Android ファショ通

こんな人気記事あります.

2日で約3000語を暗記、スマフォ世代の英単語学習アプリ「mikan」はTinderライク - TechCrunch

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

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

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

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

使い方は簡単で,

レイアウト内に 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