C/C++プログラマの管理者が, Androidプログラムにチャレンジ. AndroidプログラミングのTipsをメモっていく予定です.

リストビューで表示する項目のレイアウトを変更するには, アダプタ(Adapter)クラスを利用する.



項目のレイアウト変更

  • ItemData.java
    • 項目に表示するデータを扱うクラスを定義する.
package com.moonlight_aska.android.listview01;

import android.graphics.Bitmap;

public class ItemData {
  private Bitmap imgData;  // 画像データ
  private String txtData;  // テキストデータ

  public ItemData(Bitmap img, String text) {
    this.imgData = img;
    this.txtData = text;
  }

  public Bitmap getImage() {
    return imgData;
  }

  public String getText() {
    return txtData;
  }
}
  • layout/item.xml
    • 項目のレイアウトを定義する.
   (例:左側にアイコン, 右側にテキスト)
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  android:orientation="horizontal" >

  <ImageView android:id="@+id/itemimage_id"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:adjustViewBounds="true" />
  <TextView android:id="@+id/itemtext_id"
    android:layout_width="match_parent"
    android:layout_height="match_parent" />
</LinearLayout>
  • ItemAdapter.java
    • ArrayAdapterクラスを継承したクラスを作成する.
    • Context$#etSystemServiceメソッドに, Context.LAYOUT_INFLATER_SERVICEを指定して, LayoutInflaterを準備する.
    • ArrayAdapter#getViewを実装する.
    • convertViewがnullの場合, LayoutInflater#inflateメソッドでレイアウトXMLファイルからViewを生成する.
    • List#getメソッドで, 指定された行(position)の項目データを取得する.
    • Viewに画像及びテキストをセットする.
package com.moonlight_aska.android.listview01;

import java.util.List;
import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ImageView;
import android.widget.TextView;

public class ItemAdapter extends ArrayAdapter<ItemData> {
  private LayoutInflater inflater;
  private List<ItemData> items;

  public ItemAdapter(Context context, int resource, List<ItemData> objects) {
    super(context, resource, objects);
    // TODO Auto-generated constructor stub
    // LayoutInflaterの準備
    inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    items = objects;
  }

  @Override
  public View getView(int position, View convertView, ViewGroup parent) {
    // TODO Auto-generated method stub
    if (convertView == null) {
      // レイアウトXMLファイルからViewの生成
      convertView = inflater.inflate(R.layout.item, null);
    }
    // アイコンとテキストセット
    // 指定された行(position)の項目データ取得
    ItemData item = (ItemData)items.get(position);
    ImageView img = (ImageView)convertView.findViewById(R.id.itemimage_id);
    img.setImageBitmap(item.getImage());
    TextView info = (TextView)convertView.findViewById(R.id.itemtext_id);
    info.setText(item.getText());
    return convertView;
  }
}
  • MainActivity.java
    • ArrayListメソッドで, Listのインスタンスを生成する.
    • List#addメソッドで, 項目データを追加する.
    • 項目のリストを指定して, ItemAdapterのインスタンスを生成する.
    • findViewByIdメソッドで, 指定されたListViewを取得する.
    • ListView#setAdapterメソッドで, Adapterを設定する.
package com.moonlight_aska.android.listview01;

import java.util.ArrayList;
import java.util.List;
import android.os.Bundle;
import android.widget.ListView;
import android.app.Activity;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;

public class MainActivity extends Activity {
  @Override
  protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_main);

    // リストビューの項目セット
    Bitmap image = BitmapFactory.decodeResource(getResources(), R.drawable.ic_launcher);
    List<ItemData> objects = new ArrayList<ItemData>();
    objects.add(new ItemData(image, "Item 1"));
    objects.add(new ItemData(image, "Item 2"));
    objects.add(new ItemData(image, "Item 3"));
    objects.add(new ItemData(image, "Item 4"));
    ItemAdapter adapter = new ItemAdapter(this, R.layout.item, objects);
    // リストビュー表示
    ListView lView = (ListView)findViewById(R.id.listview_id);
    lView.setAdapter(adapter);
  }
}



このページへのコメント

askaです.

以下の手順で, 画像を変更できます.
1) res/drawableに画像データを置く.
2) BitmapFactory#decodeResourceメソッドで,
ビットマップ画像を取得する.
3) ItemDataにその画像を渡す.

項目毎に異なる画像を準備し, 上記手順で各項目のItemDataに画像を渡すことで,
それぞれの項目で異なった画像を表示することができます.

Posted by aska 2014年08月17日(日) 00:00:43

このコードの場合で画像を変えるとしたら、どこにどんなコードを追加すれば良いですか?

Posted by M 2014年08月16日(土) 21:09:01

コメントをかく


「http://」を含む投稿は禁止されています。

利用規約をご確認のうえご記入下さい

Menu


逆引き(基礎編)

画面表示/操作(49)

フラグメント(1)

逆引き(応用編)

AD



管理人のみ編集できます