【AndroidTraining】ListView 3

Lesson

ListView 3

Training

下記の仕様を満たすアプリを作りましょう。

• 独自List(ImageViewとTextView)を作成して表示する

Snap Shot

Step by Step

1. 新規に画面を追加

ListViewを配置する

activity_training_list_view_actvity2.xmlを見る

<?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"
    tools:context=".TrainingListViewActivity2">

    <ListView
        android:id="@+id/list_view_2"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
</androidx.constraintlayout.widget.ConstraintLayout> 

2. 独自リストのレイアウト作成

ImageViewとTextViewを配置する

image_text_list_item.xmlを見る

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

    <ImageView
        android:id="@+id/list_item_image"
        android:layout_width="70dp"
        android:layout_height="70dp"
        app:srcCompat="@android:drawable/alert_dark_frame"
        android:contentDescription="@string/list_item_image_description" />

    <TextView
        android:id="@+id/list_item_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_vertical" />
</LinearLayout> 

3. 独自リストのアイテムを格納するクラスを作成

ImageTextListItem.javaを見る

/**
 * ImageViewとTextが配置されたリストに使うアイテム
 */
public class ImageTextListItem {
    private Bitmap mImage;
    private String mText;

    /**
     * Constructor.
     *
     * @param image 画像
     * @param text テキスト
     */
    public ImageTextListItem(@NonNull Bitmap image, @NonNull String text) {
        mImage = image;
        mText = text;
    }

    // alt + insert(Getter and Setter)で自動追加できる
    public Bitmap getImage() {
        return mImage;
    }

    public void setImage(Bitmap mImage) {
        this.mImage = mImage;
    }

    public String getText() {
        return mText;
    }

    public void setText(String mText) {
        this.mText = mText;
    }
}

4. ArrayAdapterを継承した独自リストのためのAdaperクラスを作成

ImageTextListAdapter.javaを見る

/**
 * {@link ImageTextListItem}のアダプター。
 */
public class ImageTextListAdapter extends ArrayAdapter<ImageTextListItem> {

    private final int mResource;
    private final List<ImageTextListItem> mItems;
    private final LayoutInflater mInflater;

    /**
     * {@inheritDoc}
     */
    public ImageTextListAdapter(@NonNull Context context, int resource, @NonNull List<ImageTextListItem> items) {
        super(context, resource, items);

        mResource = resource;
        mItems = items;
        mInflater = LayoutInflater.from(context);
    }

    /**
     * {@inheritDoc}
     */
    @NonNull
    @Override
    public View getView(int position, @Nullable View convertView, @NonNull ViewGroup parent) {
        View view;

        if (convertView != null) {
            view = convertView;
        } else {
            view = mInflater.inflate(mResource, null);
        }

        // リストに表示するアイテムを取得
        ImageTextListItem item = mItems.get(position);

        // Imageを設定
        ImageView image = view.findViewById(R.id.list_item_image);
        image.setImageBitmap(item.getImage());

        // Textを設定
        TextView text = view.findViewById(R.id.list_item_text);
        text.setText(item.getText());

        return view;
    }
}

5. 独自リストの中身を作成と表示

TrainingListViewActivity2.javaを見る

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

    // ListViewを取得
    ListView listView = findViewById(R.id.list_view_2);

    // リストに表示するアイテムを作成
    ArrayList<ImageTextListItem> listItems = new ArrayList<>();
    for (int i = 0; i < 3; i++) {
        Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.gohan);
        String text = "List item " + i;
        ImageTextListItem item = new ImageTextListItem(image, text);
        listItems.add(item);
    }

    // 作成したリストを表示する
    ImageTextListAdapter adapter = new ImageTextListAdapter(this, R.layout.image_text_list_item, listItems);
    listView.setAdapter(adapter);
}

Code

ListView 2 · atuyan39/AndroidTraining@d202ae9 · GitHub

Reference

qiita.com

Memo

先人の知恵はすごい。
そして、ListView3だったのに、ListView2でコード作っている。
うまい管理方法を最終的には見つけたいが、今は気のまま実装しよう。