Android studio の画像付きListViewについて

Question

前提

初めてアプリ開発を行っており、Java初心者です。
一日がかりで調べたり格闘しましたがどうにもならなかったので皆様の知恵をお借りできればと思います。

ListViewを使って画像付きリストを表示し、リスト内をタップすれば詳細を表示できるアプリを作成しています。
文字のリストは出来たのですが、左側に画像を入れることができず困っています。

実現したいこと

リストの各項目左側に対応する画像を表示
以下のイメージでは1枚だけ画像を入れる事が出来たのですが、これをリスト1行ずつにそれぞれ入力したいです。

発生している問題・エラーメッセージ

Javaコードの "//画像" ~ "//リストの表示" について、
int[]で画像配列を指定すればArrayAdapter作成時にエラーとなり、
Integer[] で画像配列を指定すればsetImageResource作成時にエラーとなるため、
どのように配列内すべてを処理させるのかわかりませんでした。

該当のソースコード

package com.example.myapptesut;

import androidx.appcompat.app.AppCompatActivity;
import android.app.AlertDialog;
import android.media.Image;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.ImageView;

import java.util.Collections;

public class MainActivity extends AppCompatActivity {
    //データ
    String[] str = {
            "ライオン",
            "ネコ",
            "シマウマ"
    };

    //データ2
    String[] context = {
            "ライオンの説明",
            "ネコの説明",
            "シマウマの説明"
    };

    //画像
    Integer[] images = {
            R.drawable.img25,
            R.drawable.img16,
            R.drawable.img61,
    };

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

        //アダプター
        ArrayAdapter adapter = new ArrayAdapter(
                this,
            R.layout.list_item,
            str
        );

        ArrayAdapter adapter2 = new ArrayAdapter(
                this,
                R.layout.list_item,
                images
        );


        //リストの表示
        ((ListView)findViewById(R.id.lv)).setAdapter(adapter);
        ((ImageView)findViewById(R.id.ig)).setImageResource(adapter2);

        //クリック処理
        ((ListView)findViewById(R.id.lv)).setOnItemClickListener(
                new AdapterView.OnItemClickListener() {
                    @Override
                    public void onItemClick(AdapterView<?> parent, View view, int position, long id) {
                        //クリックしたときのプログラム
                        new AlertDialog.Builder(MainActivity.this)
                                .setTitle(str[position])
                                .setMessage(context[position])
                                .setPositiveButton("yes",null)
                                .show();
                    }
                }
        );
    }
}

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="6dp">

    <ImageView
        android:id="@+id/ig"
        android:layout_width="50dp"
        android:layout_height="50dp"
        tools:src="@tools:sample/avatars"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ListView
        android:id="@+id/lv"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        tools:text="動物名"
        android:textSize="18sp"
        android:layout_marginStart="6dp"
        android:layout_marginLeft="6dp"
        app:layout_constraintStart_toEndOf="@+id/ig"
        app:layout_constraintTop_toTopOf="@+id/ig" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>
<TextView xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">
</TextView>

<resources>
    <string name="app_name">My Apptesut</string>
</resources>

試したこと

そもそもリストに表示させる方法としてあっているのかもわからず、
strとimagesを1セットにまとめた方がいいのかと考えたり色々試行錯誤しましたが、
解決には至りませんでした。

よろしくお願いいたします。

Comments

[jimbe]

もしこの質問について解決していましたら、ベストアンサーを選んで解決済みとしてください。
解決していなければ、質問を編集して問題となっている点等の情報を追加してください。

Answer 1

まず、基本的な構造からです。

データ、データ2、画像の各要素が1:1で関係し、例えば表にすると

番号	データ(name)	データ2(explanation)	画像(image)
0	ライオン	ライオンの説明	R.drawable.img25
1	ネコ	ネコの説明	R.drawable.img16
2	シマウマ	シマウマの説明	R.drawable.img61

を表す場合、"データ"の配列、"データ2"の配列、"画像"の配列という3つの配列を用意するのでは無く、"データ・データ2・画像の3つの情報を持つクラス"の配列1つを用意します。つまり縦割りでは無く横割りです。

    //1行分のデータが入っているクラスを新設
    class Animal {
      final String name; //データ
      final String explanation; //データ2
      final int image; //画像(リソースID)
      Animal(String name, String explanation, int image) {
        this.name = name;
        this.explanation = explanation;
        this.image = image;
      }
    }
    //データを用意
    Animal[] animals = {
      new Animal("ライオン", "ライオンの説明", R.drawable.img25),
      new Animal("ネコ", "ネコの説明", R.drawable.img16),
      new Animal("シマウマ", "シマウマの説明", R.drawable.img61)
    };

これにより、各データの関係が明白になり、追加とか修正とかの場合にどれかの配列にやり忘れたとかも無くなります。

その上で、 ListView に表示するように構成したほうが良いと思います。

---

ArrayAdapter はテキスト1つの表示しか出来ません。同類の SimpleAdapter は Map 構造のデータで無いと使えません。ですので BaseAdapter から自作します(AnimalAdapter)。

MainActivity.java

import androidx.annotation.DrawableRes;
import androidx.appcompat.app.*;

import android.os.Bundle;
import android.view.*;
import android.widget.*;

import java.util.*;

public class MainActivity extends AppCompatActivity {
  private static class Animal {
    final String name; //データ
    final String explanation; //データ2
    final @DrawableRes int image; //画像(リソースID)
    Animal(String name, String explanation, @DrawableRes int image) {
      this.name = name;
      this.explanation = explanation;
      this.image = image;
    }
  }

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

    Animal[] animals = {
        new Animal("ライオン", "ライオンの説明", R.drawable.img25),
        new Animal("ネコ", "ネコの説明", R.drawable.img16),
        new Animal("シマウマ", "シマウマの説明", R.drawable.img61)
    };

    ListView listView = findViewById(R.id.listView);
    listView.setAdapter(new AnimalAdapter(animals));
    listView.setOnItemClickListener((parent, view, position, id) -> {
      Animal animal = (Animal)listView.getItemAtPosition(position);
      new AlertDialog.Builder(MainActivity.this)
              .setTitle(animal.name)
              .setMessage(animal.explanation)
              .setPositiveButton("yes",null)
              .show();
    });
  }

  private static class AnimalAdapter extends BaseAdapter {
    private static class ViewHolder {
      final ImageView imageView;
      final TextView nameView;
      ViewHolder(View itemView) {
        imageView = itemView.findViewById(R.id.image);
        nameView = itemView.findViewById(R.id.name);
      }
    }

    private List<Animal> animalList;

    AnimalAdapter(Animal[] animals) {
      this.animalList = Arrays.asList(animals);
    }

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

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

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

    @Override
    public View getView(int position, View convertView, ViewGroup parent) {
      if(convertView == null) {
        convertView = LayoutInflater.from(parent.getContext()).inflate(R.layout.list_item, parent, false);
        convertView.setTag(new ViewHolder(convertView));
      }

      Animal animal = animalList.get(position);
      ViewHolder vh = (ViewHolder)convertView.getTag();
      vh.nameView.setText(animal.name);
      vh.imageView.setImageResource(animal.image);

      return convertView;
    }
  }
}

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<ListView
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/listView"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity" />

res/layout/list_item.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto">

  <ImageView
      android:id="@+id/image"
      android:layout_width="50dp"
      android:layout_height="50dp"
      android:layout_margin="5dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent" />
  <TextView
      android:id="@+id/name"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:textSize="30dp"
      android:text="sample"
      android:layout_marginStart="10dp"
      android:layout_marginEnd="10dp"
      app:layout_constraintBottom_toBottomOf="parent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintStart_toEndOf="@id/image"
      app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

実行結果

Comments

[akiraaaa]

ご返信ありがとうございます。
構造の説明からご親切に教えていただけて、とても嬉しいです。
本当に初歩的なことも把握できておらず、すみません...。

自分の環境でも無事表示することができ、感謝申し上げます。
まだ記述内容全ての理解には至っておりませんが、調べる中でどうしても分からない部分がありましたら
改めて質問させていただければと思います。

[jimbe]

java の基本であるオブジェクト(クラスを含む)は、int とか String とかより大きなレベルで『データの塊』(本件では動物の情報としてのAnimalクラス)を表すものです。ですので如何にその塊を見出だせるかが最初になります。

Adapter は大抵の紹介記事では、 ArrayAdapter や SimpleAdapter を用いていると思いますが、残念ながら使い方が(相対的に)簡単な分出来ることが限られ、本件のように少し表示を増やそうとか、チェックボックスやボタンを～等とすると動かなくなってしまいます。
ListView と Adapter は実際かなり本格的(?)な構造で繋がっていますし、 Adapter は View の再利用もしていますのでなかなか大変かと思いますが、回答の AnimalAdapter は ListView の Adapter の基本構造として個人的に使い回しているものですので、参考になれば。

[Openyo]

J

Answer 2

ヘディングのテキスト