<HOME

ListViewを使用してリストを表示する30分


ListViewは、類似のアイテムをリスト表示するためのViewコンポーネントであり、Androidプラットフォームにより提供されるAPIの一つです。

ListViewを使用して画面に画像を表示してみましょう。

  1. 「ListViewTraining」アプリを作成します。

    1. Android Studioを起動し、新規プロジェクトを作成します。

      「Welcome to Android Studio」画面の場合は、「Start a new Android Studio project」をクリックします。

      別のプロジェクトが開いている場合は、ツールバーから「File」→「New」→「New Project...」をクリックします。

    2. HelloWorldの時と同じようにプロジェクトを作成していきます。

      アプリ名は「ListViewTraining」としてください。

      今回は「Backwards Compatibility (AppCompat)」のチェックは外しておきます。

  2. まずは簡単なListViewを表示させてみましょう。

    1. 「activity_main.xml」、「MainActivity.java」を以下のように編集してください。

      activity_main.xml

      コードを表示するにはJavaScriptを有効にしてください

      MainActivity.java

      コードを表示するにはJavaScriptを有効にしてください

    2. アプリを起動してみましょう。

      String配列の定数「ITEMS(リスト表示させるアイテム)」の値に応じてリストが表示されています。

  3. ListViewがどのような仕組みになっているのか、簡単に説明します。

    1. ListViewやGridView(Excelのような格子状のView)は、AdapterViewを継承しており、

      データとListViewを仲介するAdapterを利用して、各データに応じたアイテムViewを表示します。

      詳細についてはAPIガイドに記載されています。

    2. AdapterViewは、データに応じて、表示するViewを動的に変更するのに適しています。

      AdapterViewとデータが別々に管理され、必要な時にAdapterを介して連携するため、

      大量にデータがあったり、頻繁にデータが更新されたりする場合でも、必要な時に必要なViewだけ表示・更新させることができます。


      LinearLayoutやRelativeLayoutなどは「ここに、このViewを配置する」という風に、表示するViewが決まっていると利用しやすいですが、

      リストのように、データに応じて表示するViewの内容が変化するようなケースでは利用するのが難しいです。

      大量にデータがあると最初からその分のViewを用意しないといけないですし、

      データが変更される場合は今Viewが表示されてなくても更新する必要があったりします。

      AdapterViewはこういった問題を解決してくれます。

    3. AdapterViewは、Adapterがセットされた際に、AdapterのgetCountメソッドを通じてデータの数、すなわち必要なアイテムViewの総数を知り、アイテムViewのコンテナを生成します。

      この時点ではアイテムViewそのものは生成されていません。

      AdapterViewが実際に画面に表示されるときや、スクロールなどにより表示範囲が変更される際に、

      表示可能なIndexを引数にAdapterのgetViewメソッドがコールされ、その際にIndexに応じたアイテムViewを生成します。

  4. では、先ほどのソースコードについて説明します。

    • 次の記述について説明します。

      コードを表示するにはJavaScriptを有効にしてください

      このActivityで使用するListViewのAdapterクラスを定義しています。


      このクラスはBaseAdapterというクラスを継承しています。

      BaseAdapterはListAdapterというListView向けのAdapterインターフェースを実装しています。

      ListAdapterはAdapterインターフェースを継承していますが、インターフェースですので基底クラスの各処理の実装を行っていません。

      そのため、AdapterやListAdapterをそのまま利用すると、すべてのメソッドの実装を行う必要があり面倒です。

      BaseAdapterは、それらのメソッドの実装をある程度済ませてくれているので便利です。

      例えば、ListAdapterを実装しただけのクラスであればgetCountだけでなくisEmptyを実装しないといけませんが、

      BaseAdapterを継承したクラスであれば、isEmptyはBaseAdapterで実装済みですので、getCountだけ実装すれば、後はその返却値が0かどうかでうまくisEmptyの返却値も変わるようになっています。

    • 次の記述について説明します。

      コードを表示するにはJavaScriptを有効にしてください

      AdapterのgetCountで、リストに表示するデータ(アイテム)の総数を返却しています。

      ListViewは、この返却値のぶんだけアイテムViewを表示するためのコンテナを生成します。

    • 次の記述について説明します。

      コードを表示するにはJavaScriptを有効にしてください

      AdapterのgetItemで、「このIndexにはこういったデータ(アイテム)が入っているよ」というのを返却します。

      getViewの際にデータを取り出す場合などでよく使われます。

      本来、getItemの返却値の型はObjectですが、今回はアイテムの型がStringであることが明らかなのでString型であることを明示しています。

    • 次の記述について説明します。

      コードを表示するにはJavaScriptを有効にしてください

      AdapterのgetItemIdで、「このIndexのデータ(アイテム)はこういう識別IDを持っているよ」というのを返却します。

      何かアイテムにIDをつけて利用したい場合に有用です。ただ、利用したいケースはあまり多くないかもしれません。

      特別必要としない場合は、indexでもそのまま返却しておけば良いと思います。

    • 次の記述について説明します。

      コードを表示するにはJavaScriptを有効にしてください

      AdapterのgetViewで、「このIndexのデータ(アイテム)はこういうViewを表示するよ」というのを返却します。

      引数にはindexの他に、convertViewとparentが渡されます。

      parentは、ListViewなど、このViewを表示する際の親になるAdapterViewのインスタンスです。


      convertViewは、使いまわし用のViewです。

      AdapterViewは、必要になった際にgetViewでアイテムViewを生成しますが、

      画面スクロール時など、表示される←→されないが頻繁に切り替わる際、いちいち毎回インスタンスを生成していると無駄が多いので、

      前回生成したViewがまだ解放されずに残っている場合は、そのViewを使いまわせるようになっています。


      ここでは、convertViewがnull(まだ生成されていない、もしくは解放されてしまっている)の場合のみインスタンスを生成するようにしています。

      メモリの節約のためにも、convertViewの使いまわしを活用してAdapterViewを実装するようにしてください。


      また、ここでは、getItemで得られたアイテム(文字列)をTextViewにセットしています。

      表示の際にデータの内容が変わっている可能性があるので、データの反映は、convertViewの生成時ではなく、getViewがコールされた際に毎回行う必要があります。

    • 次の記述について説明します。

      コードを表示するにはJavaScriptを有効にしてください

      activity_main.xmlのレイアウトをコンテンツViewにセットし、id「list」のListViewを取り出してAdapterをセットしています。

  5. ちょっと凝ったListViewを作成してみましょう。

    アイコンとテキストが並んだアイテムをリストで複数表示させてみます。

    1. アイテムView用のレイアウトを作成します。

      ファイル名は「list_item.xml」とします。

      アイコンとテキストが横並びになるようなレイアウトを作成しましょう。

      res/layout/list_item.xml

      コードを表示するにはJavaScriptを有効にしてください

    2. アイコンに使用する画像をdrawableフォルダへ格納してください。

      「ICOOON MONO」など、フリーの画像素材配布サイトを利用すると良いと思います。

    3. テキスト表示する文字列をリソースに定義してください。

      res/values/strings.xml

      コードを表示するにはJavaScriptを有効にしてください

    4. 「arrays.xml」を追加して、アイコンとテキストを羅列したarrayリソースを定義します。

      res/values/arrays.xml

      コードを表示するにはJavaScriptを有効にしてください

    5. ソースコードを変更します。

      MainActivity.java

      コードを表示するにはJavaScriptを有効にしてください

      処理の概要は以下の通りです。

      詳細についてはソースコードのコメントを確認してください。

      • アイコンとテキストのIDをもつ「Item」という新規クラスを定義します。

      • ArrayList(配列)のmItemsというインスタンスを生成し、複数のItemを管理します。

      • MyListAdapterというAdapterクラスを定義し、リスト表示時にItemに応じたViewを表示するようにします。

      • Activity生成時にリソースからアイコン・テキストの配列を読み出し、それを基に1つずつItemインスタンスを生成して、mItemsに追加していきます。

      • また、Activity生成時に、Activityが表示するListViewに、MyListAdapterインスタンスをセットします。

    6. アプリを起動してみましょう。

      なお、ListViewはスクロールに対応しており、表示が画面内に収まっていない場合は上下にスクロールして表示範囲を変更することができます。

  6. アイテムをクリックした際の処理を追加してみましょう。

    1. ListViewにOnItemClickListenerをセットします。

      アイテムをクリックした際にコールバックメソッドの「onItemClick」がコールされ、

      引数にクリックしたアイテムのindexやViewインスタンスが渡されるので、

      それらを利用して、クリックしたアイテムに応じた処理を行います。


      クリックした際にそのアイテムをリストから除去する処理を実装してみましょう。

      コードを表示するにはJavaScriptを有効にしてください

      ArrayListのremoveメソッドでデータから該当アイテムを除去しています。

      データの変更があった際には、AdapterViewとの仲介役であるAdapterに教えてあげないと、Viewに変更が反映されませんので、

      BaseAdapterのnotifyDataSetChangedメソッドを使用して変更をAdapterに通知しています。

      サンプル:MainActivity.java

      コードを表示するにはJavaScriptを有効にしてください

    2. アプリを起動して、アイテムをクリックしてみましょう。

      クリックしたアイテムが削除されていけばOKです。

ListViewに用意されているAPIはまだまだたくさんあります。

詳細についてはAPIリファレンスに記載されています。

また、Androidは先人たちがネット上にたくさんの情報を残してくれています。

これらも活用して、是非このAPIを有効に使えるようになってください。