Asial Blog

Recruit! Asialで一緒に働きませんか?

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

カテゴリ :
フロントエンド(HTML5)
タグ :
Android
プラグイン
カードUI
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を追加します。

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

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

【activity_main.xml】
  1. <RelativeLayout
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:layout_width="match_parent"
  4.     android:layout_height="match_parent"
  5.     android:padding="5dp">
  6.     <com.etsy.android.grid.StaggeredGridView
  7.         xmlns:app="http://schemas.android.com/apk/res-auto"
  8.         android:id="@+id/grid_view"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"
  11.         app:item_margin="5dp"
  12.         app:column_count="2"/> <!-- GridViewの列数を指定 -->
  13. </RelativeLayout>

【view_card.xml】
  1. <android.support.v7.widget.CardView
  2.     xmlns:android="http://schemas.android.com/apk/res/android"
  3.     xmlns:card_view="http://schemas.android.com/apk/res-auto"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="wrap_content"
  6.     card_view:cardCornerRadius="3dp"> <!-- カードの角丸を指定 -->
  7.     <LinearLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content"
  10.         android:orientation="vertical"
  11.         android:padding="10dp">
  12.         <ImageView
  13.             android:id="@+id/card_image"
  14.             android:layout_width="match_parent"
  15.             android:layout_height="match_parent"
  16.             android:adjustViewBounds="true"
  17.             android:src="@drawable/card1" />
  18.         <TextView
  19.             android:id="@+id/card_message"
  20.             android:layout_width="match_parent"
  21.             android:layout_height="wrap_content"
  22.             android:text="@string/card_message_1"
  23.             android:paddingTop="10dp"/>
  24.     </LinearLayout>
  25. </android.support.v7.widget.CardView>

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

【MainActivity.java】
  1. public class MainActivity extends Activity {
  2.  
  3.     @Override
  4.     protected void onCreate(Bundle savedInstanceState) {
  5.         super.onCreate(savedInstanceState);
  6.         setContentView(R.layout.activity_main);
  7.  
  8.         // GridViewの代わりに、StaggeredGridViewを使用
  9.         StaggeredGridView gridView = (StaggeredGridView) findViewById(R.id.grid_view);
  10.  
  11.         // 適当なAdapterを作成
  12.         MyAdapter myAdapter = new MyAdapter();
  13.  
  14.         // 作成したAdapterをListViewAnimationsのクラスに渡して、AnimationAdapterに
  15.         SwingBottomInAnimationAdapter animationAdapter = new SwingBottomInAnimationAdapter(myAdapter);
  16.         animationAdapter.setAbsListView(gridView);
  17.  
  18.         // StaggeredGridViewにAnimationAdapterをセット
  19.         gridView.setAdapter(animationAdapter);
  20.     }
  21.     
  22.     // BaseAdapterを継承した適当なAdapter
  23.     private class MyAdapter extends BaseAdapter {
  24.        ・・・
  25.     }
  26. }

ListViewAnimationsには、SwingBottomInAnimationAdapterクラス以外にも以下のクラスが用意されています。

・ AlphaAnimationAdapter
・ ScaleInAnimationAdapter
・ SwingLeftInAnimationAdapter
・ SwingRightInAnimationAdapter

クラス毎にアニメーションが異なります。
アニメーションの動作は、ListViewAnimationsのデモアプリで確認できます。

まとめ
既存のコードにも組み込みやすいプラグインなので、
あまり時間はかけられないけど、それっぽい画面を作りたい時には役立つと思います!