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

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

Android Studio
2021.2.1




ListView

 

画像とテキストのListViewを作りましたが

base adapter 00 100x100 - [Android] ListView リストをタップして画面遷移させてみる
ArrayAdapterを使えば手軽に作れる ListView ですが、画像とテキストのリストなど色々と細かく作りこみたい場合はカスタムでa...

アイテムのクリックと画面遷移の追加変更を考えてみます。

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

 

 

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

 

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

 
BaseAdapterを継承したadapter class
ListViewAdapter.java

 

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

 

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

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

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

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

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

 

サンプルコード

 

まとめてみましょう。
新規に作成するファイル、取り込む画像などが多いのでプロジェクトとしてはこのような配置になります。

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


MainActivity.java

 
ListViewAdapter.java

 
遷移先のActivityです。
SubActivity.java

 
ManifestにSubActivityを登録します。
AndroidManifest.xml

 
MainActivityのレイアウト
activity_main.xml

 
ListViewのinflater
list.xml

 
SubActivityのレイアウト
activity_sub.xml

 
リソース
strings.xml

 

サンプル動画

 

 

このまま同じように GridView に変える事も可能です。
 
関連ページ:

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

  

References:
ListView | Android Developers
リストビュー | Android Developers
BaseAdapter | Android Developers

シェアする

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

フォローする