こんな人気記事あります.
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
