Tinder風のUIを簡単に作れるライブラリ

SwipeCardsというライブラリが非常に便利

English Study Cardもこのライブラリを使って作っている

インポート

build.gradleのdependenciesに以下を追加してsync

compile 'com.lorentzos.swipecards:library:1.0.7@aar'

layout

    <com.lorentzos.flingswipe.SwipeFlingAdapterView
        android:id="@+id/frame"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

ソース

SwipeFlingAdapterViewにArrayAdapterを設定するだけで動く。リストをカスタムするのと同じようにArrayAdapterのgetViewを書き換えれば簡単にTinder風のUIが再現できる。拾える各種イベントは以下の様なもの。

ArrayAdapter adapter = new ArrayAdapter(this);
flingContainer.setFlingListener(new SwipeFlingAdapterView.onFlingListener() {
    @Override
    public void removeFirstObjectInAdapter() {
        // 一番上のカードがめくれた時に呼ばれる

        // 一番上のアイテムをここで入れ替えてあげる必要がある
        adapter.remove(adapter.getItem(0));
    }

    @Override
    public void onLeftCardExit(Object dataObject) {
        // 左にフリックされた時に呼ばれる
    }

    @Override
    public void onRightCardExit(Object dataObject) {
        // 右にフリックされた時に呼ばれる
    }

    @Override
    public void onAdapterAboutToEmpty(int itemsInAdapter) {
        // Adapterに入ってるアイテムが無くなった時に呼ばれる
    }
});

動き

動きとしてはカードがフリックされた時にremoveFirstObjectInAdapter()が呼び出されるので、ここで表示されるものを変更してあげる必要がある。例ではadapterの一番上のitemをremoveすることで次のやつが出てくるようにしている。

感想

すごく便利だけど、カードをフリックしている途中にどれだけ移動したかのイベントは存在しないため、移動しながら画面が変化するとか作ることができない。簡単なアプリなら使えるけど、複雑なアプリを作るなら自分で実装したほうが早いと思う。FlyingCardっていうのを簡単に使えるしたライブラリらしいのでそっちをカスタマイズしたらいいかも。