Androidのリストビューで画像のリストを表示する方法は？
ListViewを使用して画像のリストを表示するにはどうすればよいですか？実行時に画像をダウンロードしています。画像の総数は固定されていません。
私はこのようなものから始めます（そして、私のコードに何か問題があれば、もちろんコメントをいただければ幸いです）：
_public class ItemsList extends ListActivity {
private ItemsAdapter adapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.items_list);
this.adapter = new ItemsAdapter(this, R.layout.items_list_item, ItemManager.getLoadedItems());
setListAdapter(this.adapter);
}
private class ItemsAdapter extends ArrayAdapter<Item> {
private Item[] items;
public ItemsAdapter(Context context, int textViewResourceId, Item[] items) {
super(context, textViewResourceId, items);
this.items = items;
}
@Override
public View getView(int position, View convertView, ViewGroup parent) {
View v = convertView;
if (v == null) {
LayoutInflater vi = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);
v = vi.inflate(R.layout.items_list_item, null);
}
Item it = items[position];
if (it != null) {
ImageView iv = (ImageView) v.findViewById(R.id.list_item_image);
if (iv != null) {
iv.setImageDrawable(it.getImage());
}
}
return v;
}
}
@Override
protected void onListItemClick(ListView l, View v, int position, long id) {
this.adapter.getItem(position).click(this.getApplicationContext());
}
}
_例えば。 ArrayAdapterを独自のタイプのアイテム（画像に関する情報を保持）で拡張し、getView()メソッドをオーバーライドして、リスト内のアイテムのビューを準備します。 ArrayAdapterには、リストの最後にアイテムを追加するメソッドadd()もあります。
_R.layout.items_list_はListViewを含む単純なレイアウトです
_R.layout.items_list_item_はリスト内の1つのアイテムを表すレイアウトです
package studRecords.one;
import Java.util.List;
import Java.util.Vector;
import Android.app.Activity;
import Android.app.ListActivity;
import Android.content.Context;
import Android.content.Intent;
import Android.net.ParseException;
import Android.os.Bundle;
import Android.view.LayoutInflater;
import Android.view.View;
import Android.view.ViewGroup;
import Android.widget.ArrayAdapter;
import Android.widget.ImageView;
import Android.widget.ListView;
import Android.widget.TextView;
public class studRecords extends ListActivity
{
static String listName = "";
static String listUsn = "";
static Integer images;
private LayoutInflater layoutx;
private Vector<RowData> listValue;
RowData rd;
static final String[] names = new String[]
{
"Name (Stud1)", "Name (Stud2)",
"Name (Stud3)","Name (Stud4)"
};
static final String[] usn = new String[]
{
"1PI08CS016","1PI08CS007","1PI08CS017","1PI08CS047"
};
private Integer[] imgid =
{
R.drawable.stud1,R.drawable.stud2,R.drawable.stud3,
R.drawable.stud4
};
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
setContentView(R.layout.mainlist);
layoutx = (LayoutInflater) getSystemService(
Activity.LAYOUT_INFLATER_SERVICE);
listValue = new Vector<RowData>();
for(int i=0;i<names.length;i++)
{
try
{
rd = new RowData(names[i],usn[i],i);
}
catch (ParseException e)
{
e.printStackTrace();
}
listValue.add(rd);
}
CustomAdapter adapter = new CustomAdapter(this, R.layout.list,
R.id.detail, listValue);
setListAdapter(adapter);
getListView().setTextFilterEnabled(true);
}
public void onListItemClick(ListView parent, View v, int position,long id)
{
listName = names[position];
listUsn = usn[position];
images = imgid[position];
Intent myIntent = new Intent();
Intent setClassName = myIntent.setClassName("studRecords.one","studRecords.one.nextList");
startActivity(myIntent);
}
private class RowData
{
protected String mNames;
protected String mUsn;
protected int mId;
RowData(String title,String detail,int id){
mId=id;
mNames = title;
mUsn = detail;
}
@Override
public String toString()
{
return mNames+" "+mUsn+" "+mId;
}
}
private class CustomAdapter extends ArrayAdapter<RowData>
{
public CustomAdapter(Context context, int resource,
int textViewResourceId, List<RowData> objects)
{
super(context, resource, textViewResourceId, objects);
}
@Override
public View getView(int position, View convertView, ViewGroup parent)
{
ViewHolder holder = null;
TextView title = null;
TextView detail = null;
ImageView i11=null;
RowData rowData= getItem(position);
if(null == convertView)
{
convertView = layoutx.inflate(R.layout.list, null);
holder = new ViewHolder(convertView);
convertView.setTag(holder);
}
holder = (ViewHolder) convertView.getTag();
i11=holder.getImage();
i11.setImageResource(imgid[rowData.mId]);
title = holder.gettitle();
title.setText(rowData.mNames);
detail = holder.getdetail();
detail.setText(rowData.mUsn);
return convertView;
}
private class ViewHolder
{
private View mRow;
private TextView title = null;
private TextView detail = null;
private ImageView i11=null;
public ViewHolder(View row)
{
mRow = row;
}
public TextView gettitle()
{
if(null == title)
{
title = (TextView) mRow.findViewById(R.id.title);
}
return title;
}
public TextView getdetail()
{
if(null == detail)
{
detail = (TextView) mRow.findViewById(R.id.detail);
}
return detail;
}
public ImageView getImage()
{
if(null == i11)
{
i11 = (ImageView) mRow.findViewById(R.id.img);
}
return i11;
}
}
}
}
//mainlist.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:orientation="horizontal"
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
>
<ListView
Android:id="@Android:id/list"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
/>
</LinearLayout>
6年後、これは一部の検索で依然としてトップです。それ以来、物事は大きく変わりました。事実上の標準は多かれ少なかれ Volley を使用し、NetworkImageViewがあなたのために面倒を処理します。
Apaters、Loader、ListFragmentsが既に適切に設定されていると仮定すると、この 公式のGoogleチュートリアル はNetworkImageViewを使用して画像を読み込む方法を説明します。画像はバックグラウンドスレッドに自動的にロードされ、ビューはUIスレッドで更新されます。キャッシングもサポートしています。
さまざまな画像を使用した簡単なリストビューを次に示します。まず、さまざまな種類の画像をコピーして、プロジェクトのres/drawable-hdpiに貼り付ける必要があります。画像は（.png）ファイル形式である必要があります。次に、このコードをコピーします。
Main.xmlで
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="fill_parent"
Android:layout_height="fill_parent"
Android:orientation="vertical" >
<TextView
Android:id="@+id/textview"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content" />
<ListView
Android:id="@+id/listview"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content" />
listview_layout.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/flag"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:contentDescription="@string/hello"
Android:paddingTop="10dp"
Android:paddingRight="10dp"
Android:paddingBottom="10dp" />
<LinearLayout
Android:layout_width="match_parent"
Android:layout_height="match_parent"
Android:orientation="vertical" >
<TextView
Android:id="@+id/txt"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:textSize="15dp"
Android:text="TextView1" />
<TextView
Android:id="@+id/cur"
Android:layout_width="wrap_content"
Android:layout_height="wrap_content"
Android:textSize="10dp"
Android:text="TextView2" />
</LinearLayout>
あなたの活動で
package com.test;
import Java.util.ArrayList;
import Java.util.HashMap;
import Java.util.List;
import Android.app.Activity;
import Android.os.Bundle;
import Android.widget.ListView;
import Android.widget.SimpleAdapter;
public class SimpleListImageActivity extends Activity {
// Array of strings storing country names
String[] countries = new String[] {
"India",
"Pakistan",
"Sri Lanka",
"China",
"Bangladesh",
"Nepal",
"Afghanistan",
"North Korea",
"South Korea",
"Japan"
};
// Array of integers points to images stored in /res/drawable-hdpi/
//here you have to give image name which you already pasted it in /res/drawable-hdpi/
int[] flags = new int[]{
R.drawable.image1,
R.drawable.image2,
R.drawable.image3,
R.drawable.image4,
R.drawable.image5,
R.drawable.image6,
R.drawable.image7,
R.drawable.image8,
R.drawable.image9,
R.drawable.image10,
};
// Array of strings to store currencies
String[] currency = new String[]{
"Indian Rupee",
"Pakistani Rupee",
"Sri Lankan Rupee",
"Renminbi",
"Bangladeshi Taka",
"Nepalese Rupee",
"Afghani",
"North Korean Won",
"South Korean Won",
"Japanese Yen"
};
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
// Each row in the list stores country name, currency and flag
List<HashMap<String,String>> aList = new ArrayList<HashMap<String,String>>();
for(int i=0;i<10;i++){
HashMap<String, String> hm = new HashMap<String,String>();
hm.put("txt", "Country : " + countries[i]);
hm.put("cur","Currency : " + currency[i]);
hm.put("flag", Integer.toString(flags[i]) );
aList.add(hm);
}
// Keys used in Hashmap
String[] from = { "flag","txt","cur" };
// Ids of views in listview_layout
int[] to = { R.id.flag,R.id.txt,R.id.cur};
// Instantiating an adapter to store each items
// R.layout.listview_layout defines the layout of each item
SimpleAdapter adapter = new SimpleAdapter(getBaseContext(), aList, R.layout.listview_layout, from, to);
// Getting a reference to listview of main.xml layout file
ListView listView = ( ListView ) findViewById(R.id.listview);
// Setting the adapter to the listView
listView.setAdapter(adapter);
}
}
これは完全なコードです。必要に応じて変更を加えることができます...コメントを歓迎します
私は「BatchImageDownloader」と呼ばれる、うまく機能するソリューションを思い付きました。使用方法の概要は次のとおりです。
描画可能なオブジェクトのキャッシュとして機能するグローバルHashMap（理想的にはApplicationオブジェクト内）を保持します
リストアダプターのgetView（）メソッドで、キャッシュからのドロアブルを使用して、リストアイテムにImageViewを設定します。
ListViewアダプターを渡してBatchImageDownloaderのインスタンスを作成します
取得/表示する必要がある各画像に対してaddUrl（）を呼び出します
完了したら、execute（）を呼び出します。これにより、すべての画像を取得するAsyncTaskが起動し、各画像が取得されてキャッシュに追加されると、（notifyDataSetChanged（）を呼び出して）ListViewが更新されます
このアプローチには次の利点があります。
- すべての画像を取得するために、画像/ビューごとに個別のスレッドではなく、単一のワーカースレッドが使用されます
- 画像が取得されると、それを使用するすべてのリストアイテムが即座に更新されます
- コードはリストアイテムの画像ビューに直接アクセスしません。代わりに、リストアダプターでnotifyDataSetChanged（）を呼び出すことでリストビューの更新をトリガーし、getView（）実装はキャッシュからドロアブルをプルして表示します。これにより、ListViewで使用されるリサイクルされたViewオブジェクトに関連する問題が回避されます。
BatchImageDownloaderのソースコードは次のとおりです。
package com.mobrite.androidutils;
import Java.io.IOException;
import Java.io.InputStream;
import Java.util.ArrayList;
import Java.util.HashMap;
import Java.util.List;
import org.Apache.http.HttpResponse;
import org.Apache.http.client.ClientProtocolException;
import org.Apache.http.client.methods.HttpGet;
import org.Apache.http.impl.client.DefaultHttpClient;
import Android.graphics.drawable.Drawable;
import Android.os.AsyncTask;
import Android.widget.BaseAdapter;
public class BatchImageDownloader extends AsyncTask<Void, Void, Void> {
List<String> imgUrls = new ArrayList<String>();
BaseAdapter adapter;
HashMap<String, Drawable> imageCache;
public BatchImageDownloader(BaseAdapter adapter,
HashMap<String, Drawable> imageCache) {
this.adapter = adapter;
this.imageCache = imageCache;
}
public void addUrl(String url) {
imgUrls.add(url);
}
@Override
protected Void doInBackground(Void... params) {
for (String url : imgUrls) {
if (!imageCache.containsKey(url)) {
Drawable bm = downloadImage(url);
if (null != bm) {
imageCache.put(url, bm);
publishProgress();
}
}
}
return null;
}
@Override
protected void onProgressUpdate(Void... values) {
adapter.notifyDataSetChanged();
}
@Override
protected void onPostExecute(Void result) {
adapter.notifyDataSetChanged();
}
public Drawable downloadImage(String url) {
DefaultHttpClient httpClient = new DefaultHttpClient();
HttpGet request = new HttpGet(url);
try {
HttpResponse response = httpClient.execute(request);
InputStream stream = response.getEntity().getContent();
Drawable drawable = Drawable.createFromStream(stream, "src");
return drawable;
} catch (ClientProtocolException e) {
e.printStackTrace();
return null;
} catch (IllegalStateException e) {
e.printStackTrace();
return null;
} catch (IOException e) {
e.printStackTrace();
return null;
}
}
}
データベースからデータを取得するには、SimpleCursorAdapterを使用します。
SimpleCursorAdapterをListViewに直接バインドできると思います。そうでない場合は、カスタム ViewBinder でSimpleCursorAdapterを拡張するカスタムアダプタークラスを作成できます。 = setViewValueをオーバーライドします。
Notepad チュートリアルを見て、SimpleCursorAdapterの使用方法を確認してください。
ファイル名はレイアウトIDと一致する必要があります。この例では、アプリケーションのレイアウトフォルダー内のitems_list_item.xml
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
Android:layout_width="fill_parent"
Android:layout_height="wrap_content"
>
<ImageView Android:id="@+id/R.id.list_item_image"
Android:layout_width="100dip"
Android:layout_height="wrap_content" />
</LinearLayout>
2つのレイアウトを実装する必要があります。 1つはリストビューを保持し、もう1つはリストビューの行項目を保持します。独自のカスタムアダプタを実装します。アイデアは、1つのtextviewと1つのimageviewを含めることです。
public View getView(int position, View convertView, ViewGroup parent) {
// TODO Auto-generated method stub
LayoutInflater inflater = (LayoutInflater) context
.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View single_row = inflater.inflate(R.layout.list_row, null,
true);
TextView textView = (TextView) single_row.findViewById(R.id.textView);
ImageView imageView = (ImageView) single_row.findViewById(R.id.imageView);
textView.setText(color_names[position]);
imageView.setImageResource(image_id[position]);
return single_row;
}
次に、メインアクティビティに機能を実装して、実行時に画像とテキストデータを動的に組み込みます。動的に作成されたテキスト配列とイメージID配列をカスタムアダプターのコンストラクターに渡すことができます。
Customlistadapter adapter = new Customlistadapter(this, image_id, text_name);