Skip to content

Most visited

Recently visited

navigation

リストとカードの作成

マテリアル デザインのスタイルを適用した複雑なリストやカードをアプリで作成するには、 RecyclerView ウィジェットや CardView ウィジェットを使用します。

リストを作成する

RecyclerView ウィジェットは、ListView をさらに進化させて柔軟にしたものです。 このウィジェットは、大きなデータセットを表示するためのコンテナであり、限られたビューを維持することで非常に効率的にスクロールできます。 ユーザーのアクションやネットワークのイベントに基づいて、実行時に要素が変わるデータ コレクションを持つ場合には、 RecyclerView ウィジェットを使用してください。

RecyclerView クラスは次の機能を提供することで、簡単に大きなデータセットを表示したり処理したりできます。

また、RecyclerView ウィジェットのカスタム レイアウト マネージャーやアニメーションも柔軟に定義できます。

図 1 RecyclerView ウィジェット

RecyclerView ウィジェットを使用するには、アダプターとレイアウト マネージャーを指定する必要があります。 アダプターを作成するには、RecyclerView.Adapter クラスを拡張します。具体的な実装方法は、データセットの詳細やビューの種類によって異なります。 詳細については、下記のをご覧ください。

図 2 - RecyclerView を使ったリスト。

レイアウト マネージャーは、RecyclerView 内にアイテム ビューを配置し、ユーザーから見えなくなったアイテム ビューを再利用するタイミングを決定します。 ビューを再利用(またはリサイクル)するために、レイアウト マネージャーからアダプターにデータセットの異なる要素でビューの内容を入れ替えるよう求められることがあります。 このようにビューをリサイクルすることで、不要なビューを作成したりコストのかかる findViewById() のルックアップをしたりせずに済み、パフォーマンスが向上します。

RecyclerView には、次のレイアウト マネージャーが組み込まれています。

カスタム レイアウト マネージャーを作成するには、RecyclerView.LayoutManager クラスを拡張します。

アニメーション

RecyclerView では、アイテムの追加や削除のアニメーションがデフォルトで有効になっています。これらのアニメーションをカスタマイズするには、 RecyclerView.ItemAnimator クラスを拡張し、RecyclerView.setItemAnimator() メソッドを使用します。

次のコードは、レイアウトに RecyclerView を追加する方法の一例です。

<!-- A RecyclerView with some commonly used attributes -->
<android.support.v7.widget.RecyclerView
    android:id="@+id/my_recycler_view"
    android:scrollbars="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

レイアウトに RecyclerView ウィジェットを追加したら、オブジェクトのハンドルを取得してレイアウト マネージャーに接続し、表示するデータのアダプターを添付します。

public class MyActivity extends Activity {
    private RecyclerView mRecyclerView;
    private RecyclerView.Adapter mAdapter;
    private RecyclerView.LayoutManager mLayoutManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_activity);
        mRecyclerView = (RecyclerView) findViewById(R.id.my_recycler_view);

        // use this setting to improve performance if you know that changes
        // in content do not change the layout size of the RecyclerView
        mRecyclerView.setHasFixedSize(true);

        // use a linear layout manager
        mLayoutManager = new LinearLayoutManager(this);
        mRecyclerView.setLayoutManager(mLayoutManager);

        // specify an adapter (see also next example)
        mAdapter = new MyAdapter(myDataset);
        mRecyclerView.setAdapter(mAdapter);
    }
    ...
}

アダプターによって、データセット内の各項目にアクセスしたり、アイテムのビューを作成したり、元のアイテムが見えなくなったときにビューのコンテンツの一部を新しいデータアイテムと入れ替えたりできます。 次のコードはデータセットを実装する簡易な例です。このデータセットは、TextView ウィジェットを使用して表示した文字列の配列で構成されています。

public class MyAdapter extends RecyclerView.Adapter<MyAdapter.ViewHolder> {
    private String[] mDataset;

    // Provide a reference to the views for each data item
    // Complex data items may need more than one view per item, and
    // you provide access to all the views for a data item in a view holder
    public static class ViewHolder extends RecyclerView.ViewHolder {
        // each data item is just a string in this case
        public TextView mTextView;
        public ViewHolder(TextView v) {
            super(v);
            mTextView = v;
        }
    }

    // Provide a suitable constructor (depends on the kind of dataset)
    public MyAdapter(String[] myDataset) {
        mDataset = myDataset;
    }

    // Create new views (invoked by the layout manager)
    @Override
    public MyAdapter.ViewHolder onCreateViewHolder(ViewGroup parent,
                                                   int viewType) {
        // create a new view
        View v = LayoutInflater.from(parent.getContext())
                               .inflate(R.layout.my_text_view, parent, false);
        // set the view's size, margins, paddings and layout parameters
        ...
        ViewHolder vh = new ViewHolder(v);
        return vh;
    }

    // Replace the contents of a view (invoked by the layout manager)
    @Override
    public void onBindViewHolder(ViewHolder holder, int position) {
        // - get element from your dataset at this position
        // - replace the contents of the view with that element
        holder.mTextView.setText(mDataset[position]);

    }

    // Return the size of your dataset (invoked by the layout manager)
    @Override
    public int getItemCount() {
        return mDataset.length;
    }
}

図 3 カードの例

カードを作成する

CardViewFrameLayout クラスを拡張して、あらゆるプラットフォームで統一された外観のカード内に情報を表示できます。CardView ウィジェットは、シャドウを付けたり角を丸くしたりできます。

シャドウ付きのカードを作成するには、card_view:cardElevation 属性を使用します。 CardView は Android 5.0(API レベル 21)以降ではリアルなエレベーションや動きのあるシャドウを使用し、それより前のバージョンではプログラム的なシャドウを使用します。詳細については、互換性の維持をご覧ください。

CardView ウィジェットの外観をカスタマイズするには、次のプロパティを使用します。

次のコードは、レイアウトに CardView ウィジェットを含める方法の一例です。

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:card_view="http://schemas.android.com/apk/res-auto"
    ... >
    <!-- A CardView that contains a TextView -->
    <android.support.v7.widget.CardView
        xmlns:card_view="http://schemas.android.com/apk/res-auto"
        android:id="@+id/card_view"
        android:layout_gravity="center"
        android:layout_width="200dp"
        android:layout_height="200dp"
        card_view:cardCornerRadius="4dp">

        <TextView
            android:id="@+id/info_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    </android.support.v7.widget.CardView>
</LinearLayout>

詳細については、API リファレンスの CardView をご覧ください。

依存関係を追加する

RecyclerView ウィジェットと CardView ウィジェットは、v7 サポート ライブラリの一部です。 プロジェクトでこれらのウィジェットを使うには、次のようにアプリのモジュールに Gradle 依存関係を追加します。

dependencies {
    ...
    compile 'com.android.support:cardview-v7:21.0.+'
    compile 'com.android.support:recyclerview-v7:21.0.+'
}
This site uses cookies to store your preferences for site-specific language and display options.

Get the latest Android developer news and tips that will help you find success on Google Play.

* Required Fields

Hooray!

Browse this site in ?

You requested a page in , but your language preference for this site is .

Would you like to change your language preference and browse this site in ? If you want to change your language preference later, use the language menu at the bottom of each page.

This class requires API level or higher

This doc is hidden because your selected API level for the documentation is . You can change the documentation API level with the selector above the left navigation.

For more information about specifying the API level your app requires, read Supporting Different Platform Versions.

Take a one-minute survey?
Help us improve Android tools and documentation.