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

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

listviewtapcell 1 170x300 - [Android] ListView リストをタップして画面遷移させてみる
listviewtapcell 2 170x300 - [Android] ListView リストをタップして画面遷移させてみる
    ArrayAdapter
  1. ListView と ArrayAdapter 簡単なテキストリストの表示
  2. ArrayAdapterを使ってレイアウトをアレンジ
  3. ListActivity と ArrayAdapterで画像とテキストをリスト表示
    Basedapter
  1. BaseAdapterで画像とテキストをリスト表示
  2. ListViewリストをタップして画面遷移
  3. ListViewアイテムの移動、削除
  4. ListView アイテム個々の背景、高さなどを変える

 

Android Studio 3.2.1
Android 9.0

 



ListView

 
画像とテキストをリスト表示できたところから、アイテムのクリックと画面遷移の追加変更を考えてみます。
 

 

画像とテキストのListViewの作成

 
画像をres/drawable以下に置きますが、ここに置ける画像には限界があり、メモリを圧迫させない工夫が必要になります。
例として540x300pixel程度の大きさの画像を使っていますが、タップして画面遷移した先でも同じ画像を使うためです。
 
本来ならばリスト表示ではサムネイル化してもっと小さい画像を使った方がいいでしょう。タップして画面遷移した先では別のサイズの大きな画像をassetsから呼び出した方が画像がきれいになります。
 
これについてはdrawable VS assetsを参照ください。
 
listviewtapcell 3 300x300 - [Android] ListView リストをタップして画面遷移させてみる
BaseAdapterで画像とテキストをリスト表示 を元に画像をdrawableから読み出してリスト表示させるところまでをまとめると、
 
MainActivity.java

 
BaseAdapterを継承したadapter class
ListViewAdapter.java

 
レイアウト
activity_main.xml

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

 
リソース
strings.xml

 

アイテムをクリックした時の挙動をコーディング

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

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

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

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

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

 
activity_sub.xml

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

 

サンプルコード

 
まとめてみましょう。
MainActivity.java

 
ListViewAdapter.java

 
遷移先のActivityです。
SubActivity.java

 
SubActivityを登録します。

 
MainActivityのレイアウト
activity_main.xml

 
ListViewのinflater
list.xml

 
SubActivityのレイアウト

 
リソース
strings.xml

 

サンプル動画

 

 
このまま同じように GridView に変える事も可能です。
 
 
References:
ListView | Android Developers
リストビュー | Android Developers
BaseAdapter | Android Developers

誤字脱字、意味不明で分からにゃイ、
などのご意見はこちらから mailフォーム

ブックマークしておくと便利です このエントリーをはてなブックマークに追加


 


ページのトップへ戻る




シェアする

  • このエントリーをはてなブックマークに追加

フォローする