SHOEISHA iD

※旧SEメンバーシップ会員の方は、同じ登録情報(メールアドレス&パスワード)でログインいただけます

DeveloperZine(デベロッパージン)- エンジニアの意思決定を支える技術情報メディア ProductZine

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

Android Studio 2で始めるアプリ開発入門

Androidのマテリアルデザイン ~リサイクラービュー~

Android Studio 2で始めるアプリ開発入門 第18回


ListViewの限界(2)

ソースコード記述

 次に、ソースコードを記述していきましょう。まずはstrings.xmlです。以下の内容に変更してください。

リスト1 strings.xml
<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="app_name">リサイクラービューサンプル</string>
    <string name="toolbar_title">Recycle!</string>
</resources>

 次はactivity_scroll_list.xmlです。まず、前回のactivity_scroll_article.xmlの完成版をコピーしてください。その上でNestedScrollViewタグを以下のように置き換えてください。

リスト2 activity_scroll_article.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.design.widget.CoordinatorLayout
      ~省略~
    </android.support.design.widget.AppBarLayout>

    <android.support.v7.widget.RecyclerView  // (1)
        android:id="@+id/lv_menu"
        android:scrollbars="vertical"  // (2)
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:layout_behavior="@string/appbar_scrolling_view_behavior"/>

    <android.support.design.widget.FloatingActionButton
      ~省略~
</android.support.design.widget.CoordinatorLayout>

 (1)のタグがRecyclerViewタグです。通常のタグと同様の記述が可能ですが、1点注意事項があります。RecyclerViewは縦横双方にスクロールすることができるので、どの方向にスクロールさせるのかを属性として指定する必要があります。それが(2)です。

 最後に、ScrollListActivityのonCreate()メソッドに追記しましょう。

リスト3 ScrollListActivityのonCreate()メソッドに追記
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);  // (1)
    setContentView(R.layout.activity_scroll_list);  // (1)

    Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar);
    toolbar.setLogo(R.mipmap.ic_launcher);
    setSupportActionBar(toolbar);
    CollapsingToolbarLayout toolbarLayout = (CollapsingToolbarLayout) findViewById(R.id.toolbarLayout);
    toolbarLayout.setTitle(getString(R.string.toolbar_title));
    toolbarLayout.setExpandedTitleColor(Color.WHITE);
    toolbarLayout.setCollapsedTitleTextColor(Color.LTGRAY);
}

 (1)はもともと記述されているコードです。また、追記したコードは前回のScrollArticleActivityのonCreate()内のコードと同一です。

 ここまでで、ビルドエラーが出なければアプリを起動してください。以下の画面が表示されます。

図3 起動したアプリの画面
図3 起動したアプリの画面

 RecyclerViewで表示させるデータを設定していないため、アクションバー以下は真っ白になっています。

RecyclerViewの使い方

 では、表示させるリストデータを記述していきましょう。こちらはActivityクラスにJavaで記述します。ScrollListActivityのonCreate()メソッドに、先ほどの続きとして以下のコードを記述してください。

リスト4 ScrollListActivityにリストデータ設定処理を追記
protected void onCreate(Bundle savedInstanceState) {
      ~省略~
    RecyclerView lvMenu = (RecyclerView) findViewById(R.id.lv_menu);  // (1)

    LinearLayoutManager layout = new LinearLayoutManager(ScrollListActivity.this);  // (2)
    lvMenu.setLayoutManager(layout);  // (3)

    List<String> menuList = new ArrayList<String>();  // (4)
    menuList.add("から揚げ定食");  // (4)
      ~省略~  // (4)
    menuList.add("餃子定食");  // (4)

    RecyclerListAdapter adapter = new RecyclerListAdapter(menuList);  // (5)
    lvMenu.setAdapter(adapter);  // (6)
}

 RecyclerListAdapterクラスが存在しないため、このままだとコンパイルは通りません。このクラスは後で実装します。

 さて、RecyclerViewでデータを表示するには、少なくとも以下2つの手順を行う必要があります。

  • レイアウトマネージャーの設定:リスト4の(2)と(3)
  • アダプタの設定:リスト4の(5)と(6)

 詳細は後述しますが、レイアウトマネージャーとアダプタのどちらについても、設定にはRecyclerViewのメソッドを使用します。そのため、まずは画面上のRecyclerViewを取得します。それが(1)です。

 また、アダプタの設定では表示データを使用します。それを作成しているのが(4)です。ここでmenuListに定食名を登録していますが、途中の部分は省略しています。省略部分はダウンロードサンプルを参照するか、好きな定食の登録を記述してください(多く登録する方がスクロール時に分かりやすいのでオススメです)。

レイアウトマネージャー

 それでは、レイアウトマネージャーの設定について解説していきます。リサイクラービューはListViewと違い、柔軟な表示方法が可能です。それをつかさどるのがレイアウトマネージャーであり、各アイテムの配置とスクロール時のアイテムの移動を担当しています。標準では以下3つのレイアウトマネージャーが用意されています。また、RecyclerView.LayoutManagerを継承することで、独自のレイアウトマネージャーを作成することも可能です。

LinearLayoutManager

 ListView同様に、各アイテムを縦のリストに並べます。今回はこちらを使用します。下図が表示結果のサンプルです(ここでは、各アイテムの境界がはっきり分かるように背景色を付けています)。

図4 LinearLayoutManagerを適用した画面
図4 LinearLayoutManagerを適用した画面

GridLayoutManager

 各アイテムを格子状に表示します。GridLayoutManagerを適用すると、定食リストは下図のようになります。ここでは縦5列で表示しています。

図5 GridLayoutManagerを適用した画面
図5 GridLayoutManagerを適用した画面

StaggeredGridLayoutManager

 各アイテムをスタッガード格子状に表示します。StaggeredGridLayoutManagerを適用すると、リストは下図の通り表示されます。GridLayoutManagerとの違いがお分かりいただけると思います。

図6 StaggeredGridLayoutManagerを適用した画面
図6 StaggeredGridLayoutManagerを適用した画面

 これらのレイアウトマネージャーの使い方は簡単です。まず、newします(リスト4の(2))。そのオブジェクトをRecyclerViewのsetLayoutManager()メソッドの引数として渡すだけです(リスト4の(3))。

 なお、new時の引数はレイアウトマネージャーでそれぞれ異なります。LinearLayoutManagerはコンテキストを渡します。その他のレイアウトマネージャーについては、それぞれのAPI仕様書を参照してください。

アダプタ

 次に、アダプタの設定について解説します。アダプタはListViewでも登場し、各リストのデータをListViewの各アイテム(リストの各行)内の画面部品に割り当てていくというものでした。ListViewではアダプタクラスとして、例えばArrayAdapterやSimpleAdapterなどの既存のクラスを使用できました。ところがRecyclerViewにはそういったものがないため、独自にアダプタクラスを作る必要があります。今回のサンプルでは、リスト4の(5)で登場するRecyclerListAdapterクラスがそれにあたります。作成さえしてしまえば、そのアダプタクラスをnewし(リスト4の(5))、RecyclerViewのsetAdapter()メソッドの引数として渡すだけで設定可能です(リスト4の(6))。

次のページ
RecyclerViewの処理の流れ

この記事は参考になりましたか?

Android Studio 2で始めるアプリ開発入門連載記事一覧

もっと読む

この記事の著者

WINGSプロジェクト 齊藤 新三(サイトウ シンゾウ)

WINGSプロジェクトについて>有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。 2026年時点での登録メンバは約50名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂きたい。著書記事多数。 RSS X: @WingsPro_info(公式)、@WingsPro_info/wings(メンバーリスト) Facebook <個人紹介>WINGSプロジェクト所属のテクニカルライター。Web系製作会社のシステム部門、SI会社を経てフリーランスとして独立。屋号はSarva(サルヴァ)。HAL大阪の非常勤講師を兼務。

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

山田 祥寛(ヤマダ ヨシヒロ)

静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for Visual Studio and Development Technologies。執筆コミュニティ「WINGSプロジェクト」代表。主な著書に「独習シリーズ(Java・C#・Python・PHP・Ruby・JSP&サーブレットなど)」「速習シリーズ(ASP.NET Core・Vue.js・React・TypeScript・ECMAScript、Laravelなど)」「改訂3版JavaScript本格入門」「これからはじめるLaravel実践入門」「はじめてのAndroidアプリ開発 Kotlin編 」他、著書多数

※プロフィールは、執筆時点、または直近の記事の寄稿時点での内容です

この記事は参考になりましたか?

この記事をシェア

CodeZine(コードジン)
https://codezine.jp/article/detail/10027 2018/05/23 15:37

イベント

CodeZine編集部では、現場で活躍するデベロッパーをスターにするためのカンファレンス「Developers Summit」や、エンジニアの生きざまをブーストするためのイベント「Developers Boost」など、さまざまなカンファレンスを企画・運営しています。

新規会員登録無料のご案内

  • ・全ての過去記事が閲覧できます
  • ・会員限定メルマガを受信できます

メールバックナンバー