AndroidのRecyclerView、AndroidのCardViewの例のチュートリアル

Android Lollipopで導入されたAndroid RecyclerViewとAndroid CardViewは、マテリアルデザインを採用しています。マテリアルデザインは、Android 5.0以降導入されたUIウィジェットの包括的なガイドであり、アプリの視覚的な魅力を向上させます。

アンドロイドのリサイクラービュー

AndroidのRecyclerViewは、ListViewのより高度でパワフルで柔軟なバージョンです。AndroidのRecyclerViewは、ListViewと似ていますが、ListViewでは強制されない要素を保持するためにRecyclerView.ViewHolderクラスを使用しなければなりません。名前の通り、AndroidのRecyclerViewは、リスト内のアイテムをリサイクルすることで上下にスクロールする際にセルを再利用するために使用されます。RecyclerViewのもう1つの改善点は、ランタイムでレイアウトマネージャーを動的に設定できることです。これに対し、ListViewは垂直スクロールのリストのみが利用可能でした。RecyclerViewでは、ランタイム時に以下のタイプのレイアウトを設定することができます。

• LinearLayoutManager : it supports both vertical and horizontal lists
• StaggeredLayoutManager : it supports staggered lists
• GridLayoutManager : it supports displaying grids as seen in GalleryView earlier

アンドロイドのリサイクルビュークラス (Andoroido no risaikuru byū kurasu)

• The RecyclerView.ItemAnimator class provides better support to animating the views unlike the ListViews
• The RecyclerView.ItemDecorator class provides better support when it comes to adding borders and dividers thereby giving huge control to us

だから、RecyclerViewはListViewと比べてよりカスタマイズ可能であり、ユーザーにより大きな制御を提供します。RecyclerViewはサポートライブラリで利用可能です。そのため、以下の依存関係を追加するためにgradleスクリプトを修正する必要があります。

dependencies {
       compile 'com.android.support:recyclerview-v7:21.0.0-rc1'
 }

アンドロイドのCardView

Android CardView UIコンポーネントは、カードの内部に情報を表示するために使用されます。通常、このコンポーネントは連絡先情報を表示するために使用されます。このコンポーネントは別のサポートライブラリでも利用可能であるため、その依存関係も追加する必要があります。

dependencies {
        compile 'com.android.support:cardview-v7:21.0.0-rc1'
        compile 'com.android.support:recyclerview-v7:21.0.0-rc1'
 }

以下は、ネイティブな日本語での一つのオプションです。

AndroidのCardViewウィジェットは、背景色、影、角の半径、高さなどを制御することができます。XMLでカスタム属性を使用するためには、親のレイアウトに以下の名前空間宣言を追加する必要があります。以下は、プロジェクトからのいくつかの属性を含んだ名前空間宣言です。

<android.support.v7.widget.CardView
        android:id="@+id/card_view"
        xmlns:card_view="https://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@color/grey_300"
        card_view:cardCornerRadius="10dp"
        card_view:cardElevation="5dp"
        card_view:cardUseCompatPadding="true">

上記で使用される重要な属性は次のとおりです。

• card_view:cardCornerRadius : Used to set the corner radius in our layouts
• card_view:cardBackgroundColor : Used to set the background color of the view

私たちのサンプルプロジェクトでは、Androidのバージョン名と番号、そしてサンプルのロゴを含むCardViewのリストを表示するためにRecyclerViewを追加します。CardViewをクリックした場合は、そのカードをリストから削除するようにプログラムされています。ActionBarには、削除されたカードを順に追加するためのメニューオプションを追加しました。注意：ロゴ画像はランダムにGoogleから取得されますので、サイズは異なる場合があります。

アンドロイドのRecyclerViewとCardViewの例

プロジェクトは、RecyclerViewを表示するMainActivityで構成されています。CardViewはCustomAdapterクラスからRecyclerViewに追加されます。DataModelは各CardViewのデータをゲッターを通じて取得するために使用されます。MyDataクラスには、テキストビューとドローアブルの配列とそれらのIDが保持されています。

AndroidのRecyclerViewとCardViewの例題コード

activity_main.xmlには、以下に示すようにRelativeLayout内にRecyclerViewが配置されています。activity_main.xmlのコード：

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context=".MainActivity"
    android:background="@color/grey_300"
    >

    <android.support.v7.widget.RecyclerView
        android:id="@+id/my_recycler_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbars="vertical"
        />

</RelativeLayout>

以下はAndroidのCardViewレイアウトの定義です: cards_layout.xmlのコードです。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:tag="cards main container">

    <android.support.v7.widget.CardView
        android:id="@+id/card_view"
        xmlns:card_view="https://schemas.android.com/apk/res-auto"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        card_view:cardBackgroundColor="@color/color_white"
        card_view:cardCornerRadius="10dp"
        card_view:cardElevation="5dp"
        card_view:cardUseCompatPadding="true">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="horizontal"
            >

            <ImageView
                android:id="@+id/imageView"
                android:tag="image_tag"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_margin="5dp"
                android:layout_weight="1"
                android:src="@drawable/ic_launcher"/>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="12dp"
                android:layout_weight="2"
                android:orientation="vertical"
                >

                <TextView
                    android:id="@+id/textViewName"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="10dp"
                    android:text="Android Name"
                    android:textAppearance="?android:attr/textAppearanceLarge"/>

                <TextView
                    android:id="@+id/textViewVersion"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:layout_gravity="center_horizontal"
                    android:layout_marginTop="10dp"

                    android:text="Android Version"
                    android:textAppearance="?android:attr/textAppearanceMedium"/>

            </LinearLayout>
        </LinearLayout>

    </android.support.v7.widget.CardView>

</LinearLayout>

Android CardViewは、ネストされたリニアレイアウト内にImageViewと2つのTextViewを持っています。menu_main.xmlには、削除されたカードを戻すための単一のアイテムが含まれています。menu_main.xmlのコードは次のとおりです。

<menu xmlns:android="https://schemas.android.com/apk/res/android"
    xmlns:app="https://schemas.android.com/apk/res-auto"
    xmlns:tools="https://schemas.android.com/tools"
    tools:context=".MainActivity">
    <item android:id="@+id/add_item"
        android:title="Add"
        android:orderInCategory="100"
        app:showAsAction="always"/>
</menu>

以下にMainActivity.javaクラスが定義されています。

package com.scdev.recyclerviewcardview;

import android.content.Context;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.DefaultItemAnimator;
import android.support.v7.widget.LinearLayoutManager;
import android.support.v7.widget.RecyclerView;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.TextView;
import android.widget.Toast;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {

    private static RecyclerView.Adapter adapter;
    private RecyclerView.LayoutManager layoutManager;
    private static RecyclerView recyclerView;
    private static ArrayList<DataModel> data;
    static View.OnClickListener myOnClickListener;
    private static ArrayList<Integer> removedItems;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        myOnClickListener = new MyOnClickListener(this);

        recyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);
        recyclerView.setHasFixedSize(true);

        layoutManager = new LinearLayoutManager(this);
        recyclerView.setLayoutManager(layoutManager);
        recyclerView.setItemAnimator(new DefaultItemAnimator());

        data = new ArrayList<DataModel>();
        for (int i = 0; i < MyData.nameArray.length; i++) {
            data.add(new DataModel(
                    MyData.nameArray[i],
                    MyData.versionArray[i],
                    MyData.id_[i],
                    MyData.drawableArray[i]
            ));
        }

        removedItems = new ArrayList<Integer>();

        adapter = new CustomAdapter(data);
        recyclerView.setAdapter(adapter);
    }


    private static class MyOnClickListener implements View.OnClickListener {

        private final Context context;

        private MyOnClickListener(Context context) {
            this.context = context;
        }

        @Override
        public void onClick(View v) {
            removeItem(v);
        }

        private void removeItem(View v) {
            int selectedItemPosition = recyclerView.getChildPosition(v);
            RecyclerView.ViewHolder viewHolder
                    = recyclerView.findViewHolderForPosition(selectedItemPosition);
            TextView textViewName
                    = (TextView) viewHolder.itemView.findViewById(R.id.textViewName);
            String selectedName = (String) textViewName.getText();
            int selectedItemId = -1;
            for (int i = 0; i < MyData.nameArray.length; i++) {
                if (selectedName.equals(MyData.nameArray[i])) {
                    selectedItemId = MyData.id_[i];
                }
            }
            removedItems.add(selectedItemId);
            data.remove(selectedItemPosition);
            adapter.notifyItemRemoved(selectedItemPosition);
        }
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        super.onCreateOptionsMenu(menu);
        getMenuInflater().inflate(R.menu.menu_main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        super.onOptionsItemSelected(item);
        if (item.getItemId() == R.id.add_item) {
           //check if any items to add
            if (removedItems.size() != 0) {
                addRemovedItemToList();
            } else {
                Toast.makeText(this, "Nothing to add", Toast.LENGTH_SHORT).show();
            }
        }
        return true;
    }

    private void addRemovedItemToList() {
        int addItemAtListPosition = 3;
        data.add(addItemAtListPosition, new DataModel(
                MyData.nameArray[removedItems.get(0)],
                MyData.versionArray[removedItems.get(0)],
                MyData.id_[removedItems.get(0)],
                MyData.drawableArray[removedItems.get(0)]
        ));
        adapter.notifyItemInserted(addItemAtListPosition);
        removedItems.remove(0);
    }
}

listenerメソッドからremoveItems()メソッドを呼び出して、クリックされたCardViewを削除します。削除したCardViewのidは後で参照するために配列に保存されます。後でビューを追加するために、addRemovedItemToList()という別のメソッドを実装しました。このメソッドでは、そのビューをリストの事前定義された位置に追加し、removedItems配列からそのidを削除します。両方のケースでCustomAdapterに通知されます。CustomeAdapter.javaクラスの定義は以下の通りです。

package com.scdev.recyclerviewcardview;

import android.support.v7.widget.RecyclerView;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import java.util.ArrayList;

public class CustomAdapter extends RecyclerView.Adapter<CustomAdapter.MyViewHolder> {

    private ArrayList<DataModel> dataSet;

    public static class MyViewHolder extends RecyclerView.ViewHolder {

        TextView textViewName;
        TextView textViewVersion;
        ImageView imageViewIcon;

        public MyViewHolder(View itemView) {
            super(itemView);
            this.textViewName = (TextView) itemView.findViewById(R.id.textViewName);
            this.textViewVersion = (TextView) itemView.findViewById(R.id.textViewVersion);
            this.imageViewIcon = (ImageView) itemView.findViewById(R.id.imageView);
        }
    }

    public CustomAdapter(ArrayList<DataModel> data) {
        this.dataSet = data;
    }

    @Override
    public MyViewHolder onCreateViewHolder(ViewGroup parent,
                                           int viewType) {
        View view = LayoutInflater.from(parent.getContext())
                .inflate(R.layout.cards_layout, parent, false);

        view.setOnClickListener(MainActivity.myOnClickListener);

        MyViewHolder myViewHolder = new MyViewHolder(view);
        return myViewHolder;
    }

    @Override
    public void onBindViewHolder(final MyViewHolder holder, final int listPosition) {

        TextView textViewName = holder.textViewName;
        TextView textViewVersion = holder.textViewVersion;
        ImageView imageView = holder.imageViewIcon;

        textViewName.setText(dataSet.get(listPosition).getName());
        textViewVersion.setText(dataSet.get(listPosition).getVersion());
        imageView.setImageResource(dataSet.get(listPosition).getImage());
    }

    @Override
    public int getItemCount() {
        return dataSet.size();
    }
}

このコードでは、RecyclerView.ViewHolderを拡張して独自のViewHolderを実装しました。ビューは、layoutsディレクトリで定義したcards_layout.xmlからインフレートされます。MainActivityのonClickListenerは、以下のスニペットでこのビューに関連付けられています。

view.setOnClickListener(MainActivity.myOnClickListener);

ArrayListは、DataModelクラスオブジェクトをArrayList内にすべてのデータとして保存し、リストのそれぞれのカードに追加します。このアプリケーション固有のデータが含まれるDataModel.javaとMyData.javaクラスは以下に示します。

package com.scdev.recyclerviewcardview;

public class DataModel {

    String name;
    String version;
    int id_;
    int image;

    public DataModel(String name, String version, int id_, int image) {
        this.name = name;
        this.version = version;
        this.id_ = id_;
        this.image=image;
    }

    public String getName() {
        return name;
    }

    public String getVersion() {
        return version;
    }

    public int getImage() {
        return image;
    }

    public int getId() {
        return id_;
    }
}

package com.scdev.recyclerviewcardview;

public class MyData {

    static String[] nameArray = {"Cupcake", "Donut", "Eclair", "Froyo", "Gingerbread", "Honeycomb", "Ice Cream Sandwich","JellyBean", "Kitkat", "Lollipop", "Marshmallow"};
    static String[] versionArray = {"1.5", "1.6", "2.0-2.1", "2.2-2.2.3", "2.3-2.3.7", "3.0-3.2.6", "4.0-4.0.4", "4.1-4.3.1", "4.4-4.4.4", "5.0-5.1.1","6.0-6.0.1"};

    static Integer[] drawableArray = {R.drawable.cupcake, R.drawable.donut, R.drawable.eclair,
            R.drawable.froyo, R.drawable.gingerbread, R.drawable.honeycomb, R.drawable.ics,
            R.drawable.jellybean, R.drawable.kitkat, R.drawable.lollipop,R.drawable.marsh};

    static Integer[] id_ = {0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10};
}

以下は、私たちのAndroid RecyclerViewとCardViewのサンプルアプリケーションで生成される出力です。削除されたアイテムは常に3番目のインデックス（リストの4番目の位置）に追加されることがわかります。これにより、Android RecyclerViewとCardViewに関するチュートリアルは終了です。以下のリンクからAndroid RecyclerView CardViewのサンプルプロジェクトをダウンロードすることができます。

AndroidのRecyclerViewとCardViewのサンプルプロジェクトをダウンロードしてください。