[Android] BaseAdapterで画像とテキストをListView表示

ArrayAdapterを使えば手軽に作れる ListView ですが、画像とテキストのリストなど色々と細かく作りこみたい場合はカスタムでadapterを作成することになります。BaseAdapterを継承してカスタムでadapterを作るケースを試してみます。

Android Studio
2021.2.1

ListView

メンバー11人の写真、スタッフ管理番号、eメールアドレス、電話番号（内線）そして名前をリスト化したアプリを作成してみたいと思います。

メンバー：

最終的にこのようになります。

ListViewを作るためのBaseAdapterを継承したクラスは３つあります。

SimpleAdapter
ArrayAdapter
CursorAdapter

単純なテキストリストはArrayAdapterを使ったほうが簡単です。ただし込み入ったレイアウトにしたい時はそのままBaseAdapterをカスタム化して使ったほうがいいでしょう。

目次
1. BaseAdapter
2. サンプルコード
3. convertViewの再利用

BaseAdapter

カスタムadapterを作成する手順としては：

BaseAdapterを継承したクラスを作成
getView() メソッドをオーバライト
リスト項目のレイアウトをカスタマイズ

基本的なBaseAdapterの構造は

// BaseAdapterを継承したクラス
private class TestAdapter extends BaseAdapter {
    private Context context;
    public TestAdapter(Context context) {
        super();
        this.context = context;
    }
    @Override
    public int getCount() {
        return data.length;
    }
    @Override
    public Object getItem(int position) {
        return position;
    }
    @Override
    public long getItemId(int position) {
        return position;
    }

    // getViewメソッドをOverride
    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
        // レイアウトを作成
        if (convertView == null) {

        }else{

        }
        return convertView;
    }
}

// BaseAdapterを継承したクラス

private class TestAdapter extends BaseAdapter {

private Context context;

public TestAdapter(Context context) {

super();

this.context = context;

}

@Override

public int getCount() {

return data.length;

}

@Override

public Object getItem(int position) {

return position;

}

@Override

public long getItemId(int position) {

return position;

}

// getViewメソッドをOverride

@Override

public View getView(int position, View convertView, ViewGroup parent) {

// レイアウトを作成

if (convertView == null) {

}else{

}

return convertView;

}

getCount()：　配列やListの要素数を返す
getItem()：　indexやオブジェクトを返す
getItemId()：　特別なIDをindexの他に返す
getView()：　setImageBitmap() など、ここで描画させている

サンプルコード

実際に作っていきたいと思います。
　
MainActivity.java

//package com.example.testbaseadapter;

import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.BaseAdapter;
import android.widget.ListView;

import java.util.Locale;

public class MainActivity extends AppCompatActivity {

    private static final String[] names = {
            "Yuka",
            "Kurumi",
            "Tomoya",
            "Mai",
            "Miki",
            "Saya",
            "Toko",
            "Nagi",
            "Yuyu",
            "Yumiko",
            "Katakuriko"
    };

    // drawableに画像を入れる、R.id.xxx はint型
    private static final int[] photos = {
            R.drawable.yuka,
            R.drawable.kurumi,
            R.drawable.tomoya,
            R.drawable.mai,
            R.drawable.miki,
            R.drawable.saya,
            R.drawable.toko,
            R.drawable.nagi,
            R.drawable.yuyu,
            R.drawable.yumiko,
            R.drawable.katakuriko
    };

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

        String[] emails = new String[names.length];

        // nameからメルアド作成
        for(int i=0; i< names.length ;i++ ){
            emails[i] = String.format(Locale.US, "%s@mail.co.jp",names[i]);

        }

        // ListViewのインスタンスを生成
        ListView listView = findViewById(R.id.listView);

        // BaseAdapter を継承したadapterのインスタンスを生成
        // レイアウトファイル list_items.xml を
        // activity_main.xml に inflate するためにadapterに引数として渡す
        BaseAdapter adapter = new TestAdapter(this.getApplicationContext(),
                R.layout.list_items, names, emails, photos);

        // ListViewにadapterをセット
        listView.setAdapter(adapter);

    }
}

//package com.example.testbaseadapter;

import androidx.appcompat.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.BaseAdapter;

import android.widget.ListView;

import java.util.Locale;

public class MainActivity extends AppCompatActivity {

private static final String[] names = {

"Yuka",

"Kurumi",

"Tomoya",

"Mai",

"Miki",

"Saya",

"Toko",

"Nagi",

"Yuyu",

"Yumiko",

"Katakuriko"

};

// drawableに画像を入れる、R.id.xxx はint型

private static final int[] photos = {

R.drawable.yuka,

R.drawable.kurumi,

R.drawable.tomoya,

R.drawable.mai,

R.drawable.miki,

R.drawable.saya,

R.drawable.toko,

R.drawable.nagi,

R.drawable.yuyu,

R.drawable.yumiko,

R.drawable.katakuriko

};

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

String[] emails = new String[names.length];

// nameからメルアド作成

for(int i=0; i< names.length ;i++ ){

emails[i] = String.format(Locale.US, "%s@mail.co.jp",names[i]);

}

// ListViewのインスタンスを生成

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

// BaseAdapter を継承したadapterのインスタンスを生成

// レイアウトファイル list_items.xml を

// activity_main.xml に inflate するためにadapterに引数として渡す

BaseAdapter adapter = new TestAdapter(this.getApplicationContext(),

R.layout.list_items, names, emails, photos);

// ListViewにadapterをセット

listView.setAdapter(adapter);

}

　
新しいTestAdapterクラスをprojectに作成します。
TestAdapter.java

//package com.example.testbaseadapter;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.BaseAdapter;
import android.widget.ImageView;
import android.widget.TextView;


public class TestAdapter extends BaseAdapter {

    private final LayoutInflater inflater;
    private final int layoutID;
    private final String[] namelist;
    private final String[] emaillist;
    private final Bitmap[] photolist;

    static class ViewHolder {
        TextView text;
        TextView email;
        ImageView img;
    }

    TestAdapter(Context context, int itemLayoutId,
                String[] names, String[] emails, int[] photos ){

        inflater = LayoutInflater.from(context);
        layoutID = itemLayoutId;

        namelist = names;
        emaillist = emails;
        // bitmapの配列
        photolist = new Bitmap[photos.length];
        // drawableのIDからbitmapに変換
        for( int i = 0; i< photos.length; i++){
            photolist[i] = BitmapFactory.decodeResource(context.getResources(), photos[i]);
        }
    }

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {

        ViewHolder holder;

        if (convertView == null) {
            convertView = inflater.inflate(layoutID, null);
            holder = new ViewHolder();
            holder.img = convertView.findViewById(R.id.img_item);
            holder.text = convertView.findViewById(R.id.text_view);
            holder.email = convertView.findViewById(R.id.text_mail);
            convertView.setTag(holder);
        } else {
            holder = (ViewHolder) convertView.getTag();
        }

        holder.img.setImageBitmap(photolist[position]);

        String str = "Staff ID.170900"+ (position+1)
                + "\n\nEmail: " + emaillist[position]
                + "\nTel: 020-8931-9933 #340" + (position+1);
        holder.email.setText(str);

        holder.text.setText(namelist[position]);

        return convertView;
    }

    @Override
    public int getCount() {
        return namelist.length;
    }

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

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

//package com.example.testbaseadapter;

import android.content.Context;

import android.graphics.Bitmap;

import android.graphics.BitmapFactory;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.BaseAdapter;

import android.widget.ImageView;

import android.widget.TextView;

public class TestAdapter extends BaseAdapter {

private final LayoutInflater inflater;

private final int layoutID;

private final String[] namelist;

private final String[] emaillist;

private final Bitmap[] photolist;

static class ViewHolder {

TextView text;

TextView email;

ImageView img;

}

TestAdapter(Context context, int itemLayoutId,

String[] names, String[] emails, int[] photos ){

inflater = LayoutInflater.from(context);

layoutID = itemLayoutId;

namelist = names;

emaillist = emails;

// bitmapの配列

photolist = new Bitmap[photos.length];

// drawableのIDからbitmapに変換

for( int i = 0; i< photos.length; i++){

photolist[i] = BitmapFactory.decodeResource(context.getResources(), photos[i]);

}

@Override

public View getView(int position, View convertView, ViewGroup parent) {

ViewHolder holder;

if (convertView == null) {

convertView = inflater.inflate(layoutID, null);

holder = new ViewHolder();

holder.img = convertView.findViewById(R.id.img_item);

holder.text = convertView.findViewById(R.id.text_view);

holder.email = convertView.findViewById(R.id.text_mail);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();

}

holder.img.setImageBitmap(photolist[position]);

String str = "Staff ID.170900"+ (position+1)

+ "\n\nEmail: " + emaillist[position]

+ "\nTel: 020-8931-9933 #340" + (position+1);

holder.email.setText(str);

holder.text.setText(namelist[position]);

return convertView;

}

@Override

public int getCount() {

return namelist.length;

}

@Override

public Object getItem(int position) {

return position;

}

@Override

public long getItemId(int position) {

return position;

}

　
レイアウトファイル
RelativeLayoutを使いますが、constraintlayoutでも可能です。
activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="10dp"
    android:background="#44a"
    tools:context=".MainActivity">

    <ListView
        android:id="@+id/listView"
        android:divider="@android:color/transparent"
        android:dividerHeight="4dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />

</RelativeLayout>

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:tools="http://schemas.android.com/tools"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:padding="10dp"

android:background="#44a"

tools:context=".MainActivity">

<ListView

android:id="@+id/listView"

android:divider="@android:color/transparent"

android:dividerHeight="4dp"

android:layout_width="match_parent"

android:layout_height="wrap_content" />

</RelativeLayout>

　
新しくLayout XMLファイルをlayout以下に作成します。
list_items.xml

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

    <ImageView
        android:id="@+id/img_item"
        android:scaleType="centerCrop"
        android:layout_margin="5dp"
        android:contentDescription="@string/description"
        android:layout_width="120dp"
        android:layout_height="120dp" />

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="match_parent">

        <TextView
            android:id="@+id/text_mail"
            android:textColor="#000"
            android:layout_marginTop="10dp"
            android:layout_marginStart="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

        <TextView
            android:id="@+id/text_view"
            android:textColor="#04e"
            android:textSize="20sp"
            android:layout_marginTop="10dp"
            android:layout_marginStart="20dp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />

    </LinearLayout>

</LinearLayout>

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout

xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal"

android:background="#afc"

android:layout_width="match_parent"

android:layout_height="match_parent">

<ImageView

android:id="@+id/img_item"

android:scaleType="centerCrop"

android:layout_margin="5dp"

android:contentDescription="@string/description"

android:layout_width="120dp"

android:layout_height="120dp" />

<LinearLayout

android:orientation="vertical"

android:layout_width="wrap_content"

android:layout_height="match_parent">

<TextView

android:id="@+id/text_mail"

android:textColor="#000"

android:layout_marginTop="10dp"

android:layout_marginStart="20dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

<TextView

android:id="@+id/text_view"

android:textColor="#04e"

android:textSize="20sp"

android:layout_marginTop="10dp"

android:layout_marginStart="20dp"

android:layout_width="wrap_content"

android:layout_height="wrap_content" />

</LinearLayout>

　
strings.xml

<resources>
    <string name="app_name">Your App Name</string>
    <string name="description">pictures</string>
</resources>

<string name="description">pictures</string>

</resources>

　
サムネイル化（150x150pixel程度）した小さい画像をdrawableに入れます。
（API24以上を想定した場合はdrawable-v24に入れる）
　

画像は適当なものでかまいませんが、ファイル名がコードで呼ばれているので合わせてください。
　
これで実行してみます。
　

convertViewの再利用

リスト数が10個程度だとあまり気にならないのですが、画像を貼り付けてリスト数が数百になると、あるいはリストを増やせる仕様のケースでは、スクロールが重くなり最終的には Out Of Memory で終了…となる可能性があります。
　
ちょっと古いのですがGoogleがListViewについて解説した2010の動画です。今も使える内容で基本的な事が良く分かります。

Google I/O 2010 – The world of ListView

10000のアイテムをそのままリスト表示させていたらメモリがいくらあっても足りない
描画負荷を減らし、高速にするための手法として

ViewHolder holder;
if (convertView == null) {
	convertView = mInflater.inflate(R.layout.list_item_icon_text, null);
	holder = new ViewHolder();

	holder.img = (ImageView) convertView.findViewById(R.id.img_item);

	convertView.setTag(holder);
} else {
	holder = (ViewHolder) convertView.getTag();
}

ViewHolder holder;

if (convertView == null) {

convertView = mInflater.inflate(R.layout.list_item_icon_text, null);

holder = new ViewHolder();

holder.img = (ImageView) convertView.findViewById(R.id.img_item);

convertView.setTag(holder);

} else {

holder = (ViewHolder) convertView.getTag();

}

　
if (convertView == null){
…
}else{
…
}
の部分で convetView がnullでなければ再利用する
– Inflate()
– findViewById()
は省略され、ViewHolder の children view　が使用されます。

テキストのリストであれば問題ないかもしれませんが、画像を扱うListViewではこれは必須です。
　

References:
ListView
BaseAdapter