Symfoware

Symfowareについての考察blog

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

Andoroidアプリ
ListViewを使用して、一覧を表示してみます。

こちらを参考にしました。
Android開発でList Viewを使おう!




データ表示の流れ



データ(今回はArrayList)を直接ListViewに設定するのではなく、
アダプター(ArrayAdapter)を介してデータを設定してやります。

766_01.png


・activity_mail.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical">
  7.     <ListView
  8.         android:id="@+id/listView1"
  9.         android:layout_width="match_parent"
  10.         android:layout_height="match_parent"></ListView>
  11. </LinearLayout>




プレビュー画面の表示はこのようになります。

766_02.png




・MainActivity.java


  1. import android.support.v7.app.AppCompatActivity;
  2. import android.os.Bundle;
  3. import android.widget.ArrayAdapter;
  4. import android.widget.ListView;
  5. import java.util.ArrayList;
  6. public class MainActivity extends AppCompatActivity {
  7.     @Override
  8.     protected void onCreate(Bundle savedInstanceState) {
  9.         super.onCreate(savedInstanceState);
  10.         setContentView(R.layout.activity_main);
  11.         // リストに表示するデータ
  12.         ArrayList<String> list = new ArrayList<String>();
  13.         list.add("データ1");
  14.         list.add("データ2");
  15.         list.add("データ3");
  16.         list.add("データ4");
  17.         list.add("データ5");
  18.         list.add("データ6");
  19.         list.add("データ7");
  20.         list.add("データ8");
  21.         list.add("データ9");
  22.         // ArrayAdapterを作成
  23.         // 一行の表示に使用するのは、標準で用意されているandroid.R.layout.simple_list_item_1を指定
  24.         ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, list);
  25.         // ListViewにArrayAdapterを関連付け、データの表示を行う
  26.         ListView listView = (ListView) findViewById(R.id.listView1);
  27.         listView.setAdapter(adapter);
  28.     }
  29. }





表示できました。

766_03.png






AdapterやLayoutを独自に実装



標準のArrayAdapterやandroid.R.layout.simple_list_item_1を使用せず、独自に実装してみます。

まず、android.R.layout.simple_list_item_1の代わりになるデータ1つ分を表示する
レイアウトファイルを作成。

766_04.png

766_05.png


・list_layout.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  3.     android:orientation="horizontal"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent">
  6.     <TextView
  7.         android:id="@+id/name"
  8.         android:layout_width="0dp"
  9.         android:layout_height="wrap_content"
  10.         android:layout_weight="2"
  11.         android:text="Name"
  12.         android:textSize="24sp" />
  13.     <TextView
  14.         android:id="@+id/detail"
  15.         android:layout_width="0dp"
  16.         android:layout_height="wrap_content"
  17.         android:layout_weight="1"
  18.         android:text="Detail"
  19.         android:textSize="24sp" />
  20. </LinearLayout>





次に、1行分のデータを表現するクラスを作成。

・ListRow.java


  1. public class ListRow {
  2.     private String name;
  3.     private String detail;
  4.     public ListRow(String name, String detail) {
  5.         this.name = name;
  6.         this.detail = detail;
  7.     }
  8.     public String getName(){
  9.         return name;
  10.     }
  11.     public void setName(String name){
  12.         this.name = name;
  13.     }
  14.     public String getDetail(){
  15.         return detail;
  16.     }
  17.     public void setDetail(String detail){
  18.         this.detail = detail;
  19.     }
  20. }




BaseAdapterを継承した独自のアダプターを作成します。

・MyAdapter.java


  1. import android.content.Context;
  2. import android.view.LayoutInflater;
  3. import android.view.View;
  4. import android.view.ViewGroup;
  5. import android.widget.BaseAdapter;
  6. import android.widget.TextView;
  7. import java.util.ArrayList;
  8. public class MyAdapter extends BaseAdapter {
  9.     private LayoutInflater layoutInflater = null;
  10.     private ArrayList<ListRow> rows;
  11.     public MyAdapter(Context context) {
  12.         this.layoutInflater = LayoutInflater.from(context);
  13.     }
  14.     public void setList(ArrayList<ListRow> rows) {
  15.         this.rows = rows;
  16.     }
  17.     @Override
  18.     public int getCount() {
  19.         return rows.size();
  20.     }
  21.     @Override
  22.     public Object getItem(int i) {
  23.         return rows.get(i);
  24.     }
  25.     @Override
  26.     public long getItemId(int i) {
  27.         return i;
  28.     }
  29.     @Override
  30.     public View getView(int i, View view, ViewGroup viewGroup) {
  31.         view = layoutInflater.inflate(R.layout.list_layout, viewGroup, false);
  32.         ListRow row = rows.get(i);
  33.         ((TextView)view.findViewById(R.id.name)).setText(row.getName());
  34.         ((TextView)view.findViewById(R.id.detail)).setText(row.getDetail());
  35.         return view;
  36.     }
  37. }




最後に、MainActivityのソースを修正。


  1. import android.support.v7.app.AppCompatActivity;
  2. import android.os.Bundle;
  3. import android.widget.ListView;
  4. import java.util.ArrayList;
  5. public class MainActivity extends AppCompatActivity {
  6.     @Override
  7.     protected void onCreate(Bundle savedInstanceState) {
  8.         super.onCreate(savedInstanceState);
  9.         setContentView(R.layout.activity_main);
  10.         // リストに表示するデータ
  11.         ArrayList<ListRow> list = new ArrayList<ListRow>();
  12.         list.add(new ListRow("データ1", "詳細1"));
  13.         list.add(new ListRow("データ2", "詳細2"));
  14.         list.add(new ListRow("データ3", "詳細3"));
  15.         list.add(new ListRow("データ4", "詳細4"));
  16.         list.add(new ListRow("データ5", "詳細5"));
  17.         // MyAdapterを作成し、データを設定
  18.         MyAdapter adapter = new MyAdapter(this);
  19.         adapter.setList(list);
  20.         // ListViewにArrayAdapterを関連付け、データの表示を行う
  21.         ListView listView = (ListView) findViewById(R.id.listView1);
  22.         listView.setAdapter(adapter);
  23.     }
  24. }




実行結果

766_06.png





リストにデータを追加



リストにデータを動的に追加する場合を考えます。
画面にボタンを追加。

・activity_main.xml


  1. <?xml version="1.0" encoding="utf-8"?>
  2. <LinearLayout
  3.     xmlns:android="http://schemas.android.com/apk/res/android"
  4.     android:layout_width="match_parent"
  5.     android:layout_height="match_parent"
  6.     android:orientation="vertical">
  7.     <LinearLayout
  8.         android:layout_width="match_parent"
  9.         android:layout_height="wrap_content"
  10.         android:orientation="horizontal">
  11.         <Button
  12.             android:layout_width="wrap_content"
  13.             android:layout_height="wrap_content"
  14.             android:text="@string/button_send"
  15.             android:onClick="sendMessage" />
  16.     </LinearLayout>
  17.     <ListView
  18.         android:id="@+id/listView1"
  19.         android:layout_width="match_parent"
  20.         android:layout_height="match_parent"></ListView>
  21. </LinearLayout>



766_07.png





ボタンをクリックした時の処理を追記。
MyAdapter#notifyDataSetChanged()でデータの表示を更新します。


  1. import android.support.v7.app.AppCompatActivity;
  2. import android.os.Bundle;
  3. import android.view.View;
  4. import android.widget.ListView;
  5. import java.util.ArrayList;
  6. public class MainActivity extends AppCompatActivity {
  7.     private ArrayList<ListRow> mList;
  8.     private MyAdapter mAdapter;
  9.     @Override
  10.     protected void onCreate(Bundle savedInstanceState) {
  11.         super.onCreate(savedInstanceState);
  12.         setContentView(R.layout.activity_main);
  13.         // リストに表示するデータ
  14.         mList = new ArrayList<ListRow>();
  15.         mList.add(new ListRow("データ1", "詳細1"));
  16.         mList.add(new ListRow("データ2", "詳細2"));
  17.         mList.add(new ListRow("データ3", "詳細3"));
  18.         mList.add(new ListRow("データ4", "詳細4"));
  19.         mList.add(new ListRow("データ5", "詳細5"));
  20.         // MyAdapterを作成し、データを設定
  21.         mAdapter = new MyAdapter(this);
  22.         mAdapter.setList(mList);
  23.         // ListViewにArrayAdapterを関連付け、データの表示を行う
  24.         ListView listView = (ListView) findViewById(R.id.listView1);
  25.         listView.setAdapter(mAdapter);
  26.     }
  27.     public void sendMessage(View view) {
  28.         mList.add(new ListRow("データ追加", "詳細追加"));
  29.         mAdapter.notifyDataSetChanged();
  30.     }
  31. }




動的にデータが追加できました。

766_08.png

関連記事

テーマ:プログラミング - ジャンル:コンピュータ

  1. 2017/08/08(火) 23:44:56|
  2. Java
  3. | トラックバック:0
  4. | コメント:0
  5. | 編集
<<Android Studio コードの折りたたみ機能を無効化 | ホーム | JavaScriptで選択されたjpgのサイズ(高さ、幅)をSOFマーカーから取得する>>

コメント

コメントの投稿


管理者にだけ表示を許可する

トラックバック

トラックバック URL
http://symfoware.blog68.fc2.com/tb.php/2015-b4d5c9f2
この記事にトラックバックする(FC2ブログユーザー)