AndroidでListViewにカスタムアダプターを追加する方法を徹底解説

この記事では、AndroidアプリのListViewにカスタムアダプター（BaseAdapter）を実装する方法を、サンプルプロジェクトのコードとともにステップ形式で解説します。リストの各行に「番号」「名前」「電話番号」を表示するシンプルな連絡先リストを作成しながら、カスタムアダプターの基本的な仕組みを学びましょう。

カスタムアダプターとは？

ListViewは、データの一覧をスクロール可能な形で表示するためのUIコンポーネントです。デフォルトの ArrayAdapter では単純なテキストしか表示できませんが、BaseAdapter を継承したカスタムアダプターを使えば、複数の TextView や ImageView を組み合わせた自由度の高い行レイアウトを実現できます。

Step 1：新規プロジェクトを作成する

まずは Android Studio で新しいプロジェクトを作成します。[File] → [New Project] を選択し、必要な情報を入力して新規プロジェクトを生成してください。

Step 2：activity_main.xml に ListView を配置する

次に、res/layout/activity_main.xml に以下のコードを記述します。画面全体を LinearLayout（垂直方向）で構成し、その中に ListView を配置しています。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <ListView
        android:id="@+id/listView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"/>
</LinearLayout>

Step 3：MainActivity.java を実装する

src/MainActivity.java に以下のコードを追加します。ここでは、MyData オブジェクトを格納する ArrayList を作成し、それを MyAdapter 経由で ListView にセットしています。

import android.os.Bundle;
import android.support.v7.app.AppCompatActivity;
import android.widget.ListView;
import java.util.ArrayList;
public class MainActivity extends AppCompatActivity {
    ListView listView;
    ArrayList<MyData> arrayList = new ArrayList<>();
    MyAdapter adapter;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        listView = findViewById(R.id.listView);
        arrayList.add(new MyData(1, " Mashu","987576443"));
        arrayList.add(new MyData(2, " Azhar","8787576768"));
        arrayList.add(new MyData(3, " Niyaz","65757657657"));
        adapter = new MyAdapter(this, arrayList);
        listView.setAdapter(adapter);
    }
}

Step 4：データ保持用クラス（MyData.java）を作成する

続いて、表示するデータを保持する Java クラス「MyData.java」を作成します。「連番・名前・電話番号」の3つのフィールドと、それぞれの getter / setter を定義します。

public class MyData {
    private int serialNum;
    private String name;
    private String mobileNumber;
    public MyData(int num, String name, String mobileNumber) {
        this.serialNum = num;
        this.name = name;
        this.mobileNumber = mobileNumber;
    }
    public int getNum() {
        return serialNum;
    }
    public void setNum(int num) {
        this.serialNum = num;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public String getMobileNumber() {
        return mobileNumber;
    }
    public void setMobileNumber(String mobileNumber) {
        this.mobileNumber = mobileNumber;
    }
}

Step 5：カスタムアダプター（MyAdapter.java）を作成する

ここが今回のポイントです。BaseAdapter を継承した MyAdapter.java クラスを作成します。getCount() でデータ件数を返し、getView() 内で LayoutInflater を使って行レイアウトを展開し、各 TextView にデータをバインドします。

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 {
    private Context context;
    private ArrayList<MyData> arrayList;
    private TextView serialNum, name, contactNum;
    public MyAdapter(Context context, ArrayList<MyData> arrayList) {
        this.context = context;
        this.arrayList = arrayList;
    }
    @Override
    public int getCount() {
        return arrayList.size();
    }
    @Override
    public Object getItem(int position) {
        return position;
    }
    @Override
    public long getItemId(int position) {
        return position;
    }
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        convertView = LayoutInflater.from(context).inflate(R.layout.row, parent, false);
        serialNum = convertView.findViewById(R.id.serailNumber);
        name = convertView.findViewById(R.id.studentName);
        contactNum = convertView.findViewById(R.id.mobileNum);
        serialNum.setText(" " + arrayList.get(position).getNum());
        name.setText(arrayList.get(position).getName());
        contactNum.setText(arrayList.get(position).getMobileNumber());
        return convertView;
    }
}

Step 6：行レイアウト（row.xml）を作成する

リストの各行の見た目を定義するレイアウトリソースファイル「row.xml」を res/layout フォルダに作成し、以下のコードを追加します。連番・名前・電話番号の3つの TextView を縦に並べています。

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="https://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="4dp">
    <TextView
        android:id="@+id/serailNumber"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Number"
        android:textColor="@color/colorPrimary"
        android:textSize="16sp" />
    <TextView
        android:id="@+id/studentName"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Name"
        android:textColor="#000000"
        android:textSize="16sp" />
    <TextView
        android:id="@+id/mobileNum"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Mobile Number"
        android:textColor="@color/colorAccent"
        android:textSize="16sp" />
</LinearLayout>

Step 7：AndroidManifest.xml を確認する

最後に、androidManifest.xml に以下のように MainActivity を登録します。

<?xml version="1.0" encoding="utf-8"?>
<manifest
    xmlns:android="https://schemas.android.com/apk/res/android"
    package="app.com.sample">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action
                    android:name="android.intent.action.MAIN" />
                <category
                    android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

アプリを実行して動作を確認しよう

以上で実装は完了です。実際の Android 端末を PC に接続した状態で、Android Studio のツールバーにある Run アイコンをクリックしてアプリを実行してみましょう。接続したモバイル端末を選択すると、以下のようにカスタムアダプターで作成した連絡先リストが画面に表示されます。

まとめ

ListView にカスタムアダプターを追加することで、複数のビューを含む柔軟なリスト表示が可能になります。BaseAdapter の getCount()・getItem()・getItemId()・getView() の4つのメソッドの役割を理解しておくと、RecyclerView への移行時にも役立ちます。ぜひ本記事のサンプルコードを参考に、自分だけのリスト UI を作ってみてください。