読者です 読者をやめる 読者になる 読者になる

Androidプログラミングブログ

Androidプログラミングを勉強していく中でわかったことをメモする

【Androidプログラミング入門 #005】ListView(リストビュー)の行をカスタムレイアウトする

はじめに

下記記事でListViewを使ってみました。 android.swift-studying.com ListViewの各行に文字列をひとつ表示します。

各行の表示はAndroidで用意されているレイアウトを使いました。
カスタムしたい場合はどうするのか?

ListViewでデータを表示する際は下記のような構造になっています。

ListView ↔ Adapter ↔ Data

Adapter部分をカスタム作成することで、
ListViewの各行の表示を変更することができます。

ここでは「名前」と「趣味」を表示するListViewを作成します。

下記の手順を実施する前にスタートプロジェクトをこちらからダウンロードしてください。 SampleListView.zip - Google ドライブ

1. データクラス作成

「名前」と「趣味」をデータに持つクラスを作成します。
Personという名前でクラスを作成します。

f:id:fjswkun:20151021234049p:plain

f:id:fjswkun:20151021234104p:plain

ソースは下記のように入力します。

public class Person {
    // 名前
    private String name;
    // 趣味
    private String hobby;

    public Person(String name, String hobby){
        super();

        this.name = name;
        this.hobby = hobby;
    }

    public String getName(){
        return this.name;
    }

    public String getHobby(){
        return this.hobby;
    }
}

2. 行のレイアウトの作成

ファイル名は「person_listview_cell.xml」としました。

f:id:fjswkun:20151021234216p:plain

f:id:fjswkun:20151021234226p:plain

ファイルは下記のように入力します。

<?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">

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="start"
        android:id="@+id/nameTextView"
        />
    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:id="@+id/hobbyTextView"
        />

</LinearLayout>

3. ListViewに各行を渡すAdapterクラスの作成

「1. データクラス作成」で作成したデータと
「2. 行のレイアウトの作成」からListViewに各行を渡すクラスを作成します。
クラス名は「PersonAdapter」とします。

ファイルの作成方法は「1. データクラス作成」と同様です。
ファイルを作成したら、中身を下記のように入力します。

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;

/**
 * Created by com.swift_studying. on 15/10/21.
 */
public class PersonAdapter extends BaseAdapter{
    Context context;
    LayoutInflater layoutInflater;
    ArrayList<Person> personList;

    public PersonAdapter(Context context, ArrayList<Person> personList){
        this.context = context;
        this.layoutInflater = (LayoutInflater)context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        this.personList = personList;
    }

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

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

    @Override
    public long getItemId(int position){
        return 0;
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent){
        convertView = layoutInflater.inflate(R.layout.person_listview_cell, parent, false);
        TextView nameView = (TextView)convertView.findViewById(R.id.nameTextView);
        nameView.setText(personList.get(position).getName());

        TextView hobbyView = (TextView)convertView.findViewById(R.id.hobbyTextView);
        hobbyView.setText(personList.get(position).getHobby());

        return convertView;
    }
}

4. データ追加とListViewの修正

PersonAdapterに渡すデータの追加と、
ListViewに作成したPersonAdapterをセットします。

MainActivity.javaを開き、onCreateメソッド
「// ListViewの読み込み」以下を下記のように修正します。

// ListViewの読み込み
ListView listView = (ListView)findViewById(R.id.listView);

// Adapterの作成
ArrayList<Person> personList = new ArrayList<Person>();
personList.add(new Person("田中さん", "登山"));
personList.add(new Person("渡辺さん", "水泳"));
personList.add(new Person("山本さん", "映画鑑賞"));
personList.add(new Person("山田さん", "ランニング"));
personList.add(new Person("佐藤さん", "料理"));
PersonAdapter adapter = new PersonAdapter(MainActivity.this, personList);

// Adapterの設定
listView.setAdapter(adapter);

5. 実行

実行してみます。 f:id:fjswkun:20151021014854p:plain

おわりに

うまくいかなかった方はこちらからサンプルをダウンロードし確認してください。 SampleListView.zip - Google ドライブ

参考情報

qiita.com

Androidアプリ開発逆引きレシピ (PROGRAMMER’S RECiPE)

Androidアプリ開発逆引きレシピ (PROGRAMMER’S RECiPE)

開発用デバイス

Androidの勉強をはじめた人は知っているようにエミュレーターはちょー遅い。 開発用に安いAndroidを買えば、勉強がはかどります! iPhoneと比較すると安いので買ったほうがいいと思います。

おすすめデバイス

勉強用に使うだけなので価格が高い最新デバイスは必要ないと思います。 最新のデバイスは一人前のAndroidプログラマーになったら購入を検討しましょう。

nexus5 16GBASUS Nexus7 ( 2013 ) TABLET

その他に探すなら↓から。
Android nexus5を勉強用に購入