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

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

Android Studio 3.5.3
API 29



ListView

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

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

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

listview itemclick 03b - [Android] ListView リストをタップして画面遷移させてみる
listview itemclick 04c - [Android] ListView リストをタップして画面遷移させてみる

 

 

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

 
画像を res/drawable 以下に置きますが、ここに置ける画像には限界があり、メモリを圧迫させない工夫が必要になります。
ここでは簡単な例として 540×300 pixel 程度の画像をリストと、タップして画面遷移した先でも同じ画像を使っています。
 
本来ならばリスト表示ではサムネイル化してもっと小さい画像を使った方がいいでしょう。タップして画面遷移した先では別のサイズの大きな画像をassetsから呼び出した方が画像がきれいになります。
 
これについてはdrawable VS assetsを参照ください。
 
listview b02 - [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 にセットします。そして遷移先の Activitiy に渡す。
 
MainActivity.java

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

 

サンプルコード

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

listview itemclick 02b - [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

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

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

 

アプリ開発が上達するお勧め

アプリ開発を始めたけどわからないところがあり、誰かに聞きたいけど周りにはそんな人はいない…あるいは、会社で働いていて日中そんなに時間をとれないなど、オンラインのプログラミングスクールがいいでしょう。

オンラインスクールは色々ありますが、以下の3つはAndroidが学習できる老舗スクールです。


TECH ACADEMY
Androidアプリコース


こういうものではアプリ作れないと言う意見もありますが、それは結局本人のやる気があるかないかです。やる気があっても独学では突破しにくいところは教えてもらうのが一番早い。


侍エンジニア塾
侍エンジニア塾 無料体験レッスン


とても簡単なことなのに本やネットの画像だけでは分かりにくいことはあります。実際に質問してピンポイントで教えてもらうと、なんだそんなこと、と言うのがけっこうあります。


CodeCamp
~約8,000名の受講生と80社以上の導入実績~
現役エンジニアのオンライン家庭教師CodeCamp




直接(ネットで)誰か分かる人に聞いた方が早く解決して、上達も早いと思います。




シェアする

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

フォローする