109
Help us understand the problem. What are the problem?

More than 5 years have passed since last update.

posted at

updated at

Android開発でList Viewを使おう!

はじめに

Androidでデータ一覧を表示する時は、List Viewを使うと便利です。
なので、今日の勉強会はList Viewを学んでいきます!

ListViewとAdapter

ListViewクラスは、データをリスト形式で表示するためのビュークラスです。
このListViewにデータを表示するには、Adapterを使用します。
Adapterとは…
"データをViewの橋渡しをするもの"です。
つまり、開発者はAdapterを使ってデータにアクセスしているということです。

Adapterにはいくつか種類があるので少し紹介します。
・ ArrayAdapter
  配列やListを1行に1つ表示する時に使う
・ SimpleAdapter
  XMLファイルで定義されたビューを表示する時に使う
・ BaseAdapter
  ArrayAdapter・CursorAdapter・SimpleAdapterのスーパークラス。
  独自のAdapterクラスを定義して、レイアウトを自由にカスタマイズする時に使う

作ってみよう!

ということで、実際にListViewを使ってListを表示してみよう〜!
レイアウトでListViewを追加してから、
スクリーンショット 2016-01-18 2.33.42.png

ArrayAdapterオブジェクトの生成
ArrayAdapterのコンストラクタ
・ArrayAdapter(Context context, int textViewResourceId, List< T > objects)

引数 説明
context Contextオブジェクト
textViewResourceId レイアウトファイルのID
objects 表示するデータを示す配列 or Listクラス

「android.R.layout.simple_list_item_1」は、アンドロイドにあらかじめ用意されているレイアウトファイルで、自分でカスタマイズすることも可能です。

表示することができました。
スクリーンショット 2016-01-18 2.47.20.png

独自のAdapterを作ってみよう!

自作のAdapterを用意することで、複数の画像やテキストなどをViewに表示させる事ができます。
自由にList Viewをカスタマイズすることが出来ます。
例えば、下のように。
スクリーンショット 2016-01-18 4.11.05.png

独自のAdapterを作る前に、Listに表示させるオブジェクトを作ろう!

例えば、以下のような形で作ってみよう。

Food.java
public class Food {
    long id;
    private String name;
    private int price;

    public long getId() {
        return id;
    }

    public void setId(long id) {
        this.id = id;
    }

    public String getName(){
        return name;
    }

    public void setName(String name){
        this.name=name;
    }

    public int getPrice(){
        return price;
    }

    public void setPrice(int price){
        this.price=price;
    }

}

List Viewの行に使うレイアウトファイルを作成しよう!

自分の好きなようにレイアウトしてみよう。
上の例では、食べ物の名前と値段を表示するために、TextViewを2つ置いた。

foodrow.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">

    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="match_parent">

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/name"
            android:textSize="30dp"
            android:layout_weight="2" />

        <TextView
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="New Text"
            android:id="@+id/price"
            android:textSize="30dp"
            android:layout_weight="1" />
    </LinearLayout>

</LinearLayout>

独自のAdapterを作成しよう!

先ほど出てきた、BaseAdapterを継承した独自のAdapterを作成します。
getView()内で先ほど作成したListViewの行のレイアウトファイルを指定しTextViewに名前や値段を格納します。

MyAdapter.java
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.TextView;

import java.util.ArrayList;

public class MyAdapter extends BaseAdapter {
    Context context;
    LayoutInflater layoutInflater = null;
    ArrayList<Food> foodList;

    public MyAdapter(Context context) {
        this.context = context;
        this.layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

    public void setFoodList(ArrayList<Food> foodList) {
        this.foodList = foodList;
    }

    @Override
    public int getCount() {
        return foodList.size();
    }

    @Override
    public Object getItem(int position) {
        return foodList.get(position);
    }

    @Override
    public long getItemId(int position) {
        return foodList.get(position).getId();
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = layoutInflater.inflate(R.layout.foodrow,parent,false);

        ((TextView)convertView.findViewById(R.id.name)).setText(foodList.get(position).getName());
        ((TextView)convertView.findViewById(R.id.price)).setText(String.valueOf(foodList.get(position).getPrice()));

        return convertView;
    }
}

AdapterにListViewをセットしよう!

最後に、AdapterにListViewをセットすれば完成!

  @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        listView = (ListView) findViewById(R.id.listView);

        ArrayList<Food> list = new ArrayList<>();
        MyAdapter myAdapter = new MyAdapter(MainActivity.this);

        myAdapter.setFoodList(list);
        listView.setAdapter(myAdapter);

    }

ListViewに新しくアイテムを追加するのは、以下のようにすればできます。

Food food = new Food();
food.setName("りんご");
food.setPrice(100);
list.add(food);
myAdapter.notifyDataSetChanged();

いろいろカスタマイズしてみよう!

アイテムを増やしたり、画像を入れてみたり、List Viewの行のレイアウトを変えたりして、ListViewを使ってみよう〜〜

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Sign upLogin
109
Help us understand the problem. What are the problem?