2015年3月16日

AndroidでカードUIの実装に便利なプラグイン

こんにちは、細井です。

Androidから少し離れている内に、GoogleがMaterial DesignとかAndroid Studioを使え、とか言っていて取り残されています。。
この記事では、Material Designの概念のうち、カードUIをAndroidで実装する際に便利なプラグインを紹介します。

ListViewAnimations
https://github.com/nhaarman/ListViewAnimations
カードのスクロールにアニメーションを付けたり、カードのドラッグアンドドロップやスワイプでの削除を簡単に行えるようになります。
カードUIでは、スクロールで読み込む前のカードにはアニメーションを付けて、読み込んだ後のカードにはアニメーションを付けないことで、何処まで読み込んだか感覚的に分かるようにすることが推奨されているようです。
今回は、それも実現できるアニメーション付与の機能を試してみます。

StaggeredGridView
https://github.com/etsy/AndroidStaggeredGrid
カードをGridViewで複数列並べた時に、カードの高さが均一になってしまうのを解消してくれるGridViewです。

使ってみた
実際に使って、カードUIの一覧画面っぽいものを作ってみました。
アニメーションは、スクロール時に下からどんどん現れてくるような動きをします。

実装
どちらもGradleでモジュールをダウンロードできます。
build.gradleに以下のdependenciesを追加します。


dependencies {
    // ListViewAnimations
    compile 'com.nhaarman.listviewanimations:lib-core:3.1.0@aar'
    compile 'com.nhaarman.listviewanimations:lib-manipulation:3.1.0@aar'
    compile 'com.nhaarman.listviewanimations:lib-core-slh:3.1.0@aar'
    // Githubでは指定無しですが、無いと動かなかったです
    compile 'com.nineoldandroids:library:2.4.0'
    
    // StaggeredGridView
    compile 'com.etsy.android.grid:library:1.0.5'
    
    // Lollipopで追加されたCardViewも使ってみます
    // support-v7で用意されているので、下位バージョンでも使用できます
    compile "com.android.support:cardview-v7:+"
}

LayoutのxmlはMainActivityのものと、GirdViewに表示するカードのものを用意しました。

【activity_main.xml】


<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="5dp">
    <com.etsy.android.grid.StaggeredGridView
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/grid_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:item_margin="5dp"
        app:column_count="2"/> <!-- GridViewの列数を指定 -->
</RelativeLayout>

【view_card.xml】


<android.support.v7.widget.CardView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    card_view:cardCornerRadius="3dp"> <!-- カードの角丸を指定 -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="10dp">
        <ImageView
            android:id="@+id/card_image"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:adjustViewBounds="true"
            android:src="@drawable/card1" />
        <TextView
            android:id="@+id/card_message"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="@string/card_message_1"
            android:paddingTop="10dp"/>
    </LinearLayout>
</android.support.v7.widget.CardView>

次は、Activity側のソースになります。
基本的にはGridViewやAdapterのオブジェクトを置き換えるだけです。簡単。

【MainActivity.java】


public class MainActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        // GridViewの代わりに、StaggeredGridViewを使用
        StaggeredGridView gridView = (StaggeredGridView) findViewById(R.id.grid_view);
        // 適当なAdapterを作成
        MyAdapter myAdapter = new MyAdapter();
        // 作成したAdapterをListViewAnimationsのクラスに渡して、AnimationAdapterに
        SwingBottomInAnimationAdapter animationAdapter = new SwingBottomInAnimationAdapter(myAdapter);
        animationAdapter.setAbsListView(gridView);
        // StaggeredGridViewにAnimationAdapterをセット
        gridView.setAdapter(animationAdapter);
    }
    
    // BaseAdapterを継承した適当なAdapter
    private class MyAdapter extends BaseAdapter {
       ・・・
    }
}