[Android] ListView リストをタップして画面遷移

Android7 

アンドロイドでリスト表示を使うケースはたくさんあります。例えば、サムネイルの風景写真と場所の名前のリスト、タップしてその詳細を説明するアプリは多いですね。これらはListViewとBaseAdapterを使うと簡単にできます。
 

listviewtapcell_1
listviewtapcell_2
    ArrayAdapter

  1. ListView と ArrayAdapter 簡単なテキストリストの表示
  2. ArrayAdapterを使ってレイアウトをアレンジ
  3. ListActivity と ArrayAdapterで画像とテキストをリスト表示
    Basedapter

  1. BaseAdapterで画像とテキストをリスト表示
  2. ListViewリストをタップして画面遷移
  3. ListViewアイテムの移動、削除


 

Android Studio 2.2.2
Android 7.1.1
sponsored link

ListView

 
前回は「BaseAdapterで画像とテキストをリスト表示」を試しましたが、今回は、以下の追加変更を考えてみます。

  1. drawableに配置したjpg画像の表示
  2. タップで画面遷移、データを渡す

 

drawableに配置したjpg画像の表示

 

jpg画像をres/drawable以下に置きますが、ここに置ける画像には限界があり、メモリを圧迫させない工夫が必要になります。
例として540x300pixel程度の大きさの画像を使っていますが、タップして画面遷移した先でも同じ画像を使うためです。

本来ならばリスト表示ではサムネイル化してもっと小さい画像を使った方がいいでしょう。タップして画面遷移した先では別のサイズの大きな画像をassetsから呼び出した方が画像がきれいになります。

これについてはdrawable VS assetsを参照ください。

listviewtapcell_3
BaseAdapterで画像とテキストをリスト表示 を参考に画像をdrawableから読み出してリスト表示させるところまでをまとめると、

 
MainActivity.java

 
BaseAdapterを継承したadapter class
ListViewAdapter.java

 
レイアウト
activity_main.xml

 
activity_main.xmlにinflateするレイアウト
list.xml

 

 

タップで画面遷移

 
各要素がタップされ、その画像が一面表示される挙動を考えてみます

  1. タップされた時に、その要素の position を取得
  2. SubActivity.java に渡し画面遷移する
  3. SubActivity からその position にある画像とテキストを表示

まず、タップされた事を認識するために、リスナーを設定します。
implements OnItemClickListener
の設定と onCreate() に
listView.setOnItemClickListener(this);
を設定します
 

 
itemがタップされ時に onItemClick() が呼ばれ、itemの position から配列のindexを取得して putExtra() で intent にセットします。そしてスイッチする Activitiy に渡す。
 
MainActivity.java (追加)

 
SubActivity.java にて getStringExtra() から
配列のindexを取り出し
画面に表示します
 
SubActivity.java

 
activity_sub.xml

 
AndroidManifest.xml にSubActivity を追加するのを忘れずに
 

 
以上で完成です
 

このまま同じように GridView に変える事も可能です。

References:
ListView
BaseAdapter