【Android】说做就做：带图标的list item

这几天在搞带有icon的list item，但实现方法貌似很复杂，照着国外达人的一些code snippet也搞不定，他们也没把全部的code发出了，NND。。。怒！今天终于集众家之大成。。。搞定一个了。。。想想还是GWT好，一个composite widget就很轻松搞定了。。。Android目前还算是垃圾滴。。。

做个ImageItem class存放icon和text：

java 代码

public class ImageItem {

    private String text;
    private Drawable drawable;
    private boolean isSelectable = true;

    public ImageItem(String text, Drawable drawable) {
        super();
        this.text = text;
        this.drawable = drawable;
    }

然后做个View给这个composite view，这里extend了linearlayout，但你也可以使用其他的layout：

java 代码

public class ImageItemView extends LinearLayout {

    private TextView text;
    private ImageView image;

    public ImageItemView(Context context, String title, Drawable drawable) {
        super(context);
        this.setOrientation(HORIZONTAL);

        image = new ImageView(context);
        image.setImageDrawable(drawable);
        // 左，上，右，下
        image.setPadding(0, 2, 5, 2);
//这里的layout一定要设置，不然无法显示，NND, 竟然default显示设置都没有！！
        addView(image, new LinearLayout.LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));

        text = new TextView(context);
        text.setText(title);
        addView(text, new LinearLayout.LayoutParams(
                LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
    }

接下来要做个Adapater给我们新建的composite view：
public class ImageItemArrayAdapter extends BaseAdapter {

    private Context context;
    private List<ImageItem> items;
   
    public ImageItemArrayAdapter(Context ctx) {
        context = ctx;
        items = new ArrayList<ImageItem>();
    }

里面要实现getView这个method，这里return上面新建的ImageItemView：

java 代码

public View getView(int position, View convertView, ViewGroup parent) {
        ImageItemView iiv;
        if (convertView==null) {
            iiv = new ImageItemView(context, items.get(position).getText(), items.get(position).getDrawable());
        } else {
            iiv = (ImageItemView)convertView;
            iiv.setText(items.get(position).getText());
            iiv.setImage(items.get(position).getDrawable());
        }
        return iiv;
    }

最后用一个简单的ListActivity来demo下：

java 代码

public class ImageListItemDemo extends ListActivity {

    List<ImageItemView> items;

@Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        ImageItemArrayAdapter adapter = new ImageItemArrayAdapter(this);
        Resources res = this.getResources();

        adapter.addItem(new ImageItem("Home", res.getDrawable(R.drawable.sliderhouse)));
        adapter.addItem(new ImageItem("Bar", res.getDrawable(R.drawable.bar)));
        adapter.addItem(new ImageItem("Book Store", res.getDrawable(R.drawable.bookstore)));
        adapter.addItem(new ImageItem("Cafe", res.getDrawable(R.drawable.cafe)));
        adapter.addItem(new ImageItem("Drug Store", res.getDrawable(R.drawable.drugstore)));
        adapter.addItem(new ImageItem("Fitness Center", res.getDrawable(R.drawable.fitness)));
        adapter.addItem(new ImageItem("Grocery", res.getDrawable(R.drawable.grocery)));
        adapter.addItem(new ImageItem("Library", res.getDrawable(R.drawable.library)));
        adapter.addItem(new ImageItem("Movie Theatre", res.getDrawable(R.drawable.movietheater)));
        adapter.addItem(new ImageItem("Park", res.getDrawable(R.drawable.park)));
        adapter.addItem(new ImageItem("Restaurant", res.getDrawable(R.drawable.restaurant)));
        adapter.addItem(new ImageItem("Super Market", res.getDrawable(R.drawable.retail)));
        adapter.addItem(new ImageItem("School", res.getDrawable(R.drawable.school)));

        setListAdapter(adapter);
    }

请看截图，效果不错吧！这个实现我觉得应该在google android API缺省要直接提供，毕竟用到的情况很多很多。

评论

16 楼 superwb 2008-04-18  

山水之间 写道

我用mwjian，Quake Wang的方法实现时是按照以下代码实现的，但在执行时报错java.lang.ClassCastException.时说类型转换错误吧？但我不清楚是什么错误，麻烦各位达人帮忙看一下，多谢！！
共有两个.java文件，
一个是主文件HelloTwoB .java,代码如下：
package com.google.android.hellotwob;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.ListActivity;
import android.os.Bundle;

public class HelloTwoB extends ListActivity {

/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setTheme(android.R.style.Theme_Dark);
        setContentView(R.layout.main);
       
 
        //SimpleAdapter demo
        List listitems = fillMaps();
        IconTextAdapter adapter=new IconTextAdapter( this,
        listitems,
        R.layout.list_row,
        new String[]{"icon", "city"},
        new int[]{R.id.icon, R.id.city},
        new int[]{R.drawable.icon_smile, R.drawable.icon_smile},
        R.id.icon );

        setListAdapter(adapter);
    }
   
    private List fillMaps(){
        List items = new ArrayList();
      
        Map i1 = new HashMap();
        i1.put("icon", getResources().getDrawable(R.drawable.icon_smile));
        i1.put("city", "Beijing");
        items.add(i1);

        Map i2 = new HashMap();
        i2.put("icon", getResources().getDrawable(R.drawable.icon_smile));
        i2.put("city", "Tokyo");
        items.add(i2);
       
        return items;
    }
   
   
}

另一个是文件IconTextAdapter.java,代码如下：
package com.google.android.hellotwob;

import java.util.List;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.SimpleAdapter;

public class IconTextAdapter extends SimpleAdapter {
 
private int[] mIcons; 
private int mIconId; 
      
/**
* @param icons  Icon's id will display.
* @param iconId icon in layout's id
*/ 
public IconTextAdapter( Context context,
List data, 
int resource,
String[] from,
int[] to, 
int[] icons,
int iconId ) { 
    super(context, data, resource, from, to); 
  
    mIcons = icons; 
    mIconId = iconId; 
} 
  
public View getView(int position, View convertView, ViewGroup parent) { 
    View v = super.getView(position, convertView, parent); 
    ImageView img = (ImageView) v.findViewById(mIconId); 
    img.setImageResource(mIcons[position]); 
    return v; 
}
}


xml文件有两个：
一个是main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ListView id="@id/android:list"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:drawSelectorOnTop="false"
    />
</LinearLayout>

另一个是：list_row.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"
    >
<ImageView id="@+id/icon"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          />
<TextView id="@+id/city"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          />
</LinearLayout>

另外还有一个icon,icon_smail.jpg文件
icon_smile.jpg


还有一个问题，List，Map可以如下这样使用吗？
    private List fillMaps(){
        List items = new ArrayList();
      
        Map i1 = new HashMap();
        i1.put("icon", getResources().getDrawable(R.drawable.icon_smile));
        i1.put("city", "Beijing");
        items.add(i1);

        Map i2 = new HashMap();
        i2.put("icon", getResources().getDrawable(R.drawable.icon_smile));
        i2.put("city", "Tokyo");
        items.add(i2);
       
        return items;
    }

多谢各位了！！！

HashMap j2me好像不支持吧！

15 楼 山水之间 2008-01-23  

我用mwjian，Quake Wang的方法实现时是按照以下代码实现的，但在执行时报错java.lang.ClassCastException.时说类型转换错误吧？但我不清楚是什么错误，麻烦各位达人帮忙看一下，多谢！！
共有两个.java文件，
一个是主文件HelloTwoB .java,代码如下：
package com.google.android.hellotwob;

import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import android.app.ListActivity;
import android.os.Bundle;

public class HelloTwoB extends ListActivity {

/** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle icicle) {
        super.onCreate(icicle);
        setTheme(android.R.style.Theme_Dark);
        setContentView(R.layout.main);
       
 
        //SimpleAdapter demo
        List listitems = fillMaps();
        IconTextAdapter adapter=new IconTextAdapter( this,
        listitems,
        R.layout.list_row,
        new String[]{"icon", "city"},
        new int[]{R.id.icon, R.id.city},
        new int[]{R.drawable.icon_smile, R.drawable.icon_smile},
        R.id.icon );

        setListAdapter(adapter);
    }
   
    private List fillMaps(){
        List items = new ArrayList();
      
        Map i1 = new HashMap();
        i1.put("icon", getResources().getDrawable(R.drawable.icon_smile));
        i1.put("city", "Beijing");
        items.add(i1);

        Map i2 = new HashMap();
        i2.put("icon", getResources().getDrawable(R.drawable.icon_smile));
        i2.put("city", "Tokyo");
        items.add(i2);
       
        return items;
    }
   
   
}

另一个是文件IconTextAdapter.java,代码如下：
package com.google.android.hellotwob;

import java.util.List;

import android.content.Context;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.SimpleAdapter;

public class IconTextAdapter extends SimpleAdapter {
 
private int[] mIcons; 
private int mIconId; 
      
/**
* @param icons  Icon's id will display.
* @param iconId icon in layout's id
*/ 
public IconTextAdapter( Context context,
List data, 
int resource,
String[] from,
int[] to, 
int[] icons,
int iconId ) { 
    super(context, data, resource, from, to); 
  
    mIcons = icons; 
    mIconId = iconId; 
} 
  
public View getView(int position, View convertView, ViewGroup parent) { 
    View v = super.getView(position, convertView, parent); 
    ImageView img = (ImageView) v.findViewById(mIconId); 
    img.setImageResource(mIcons[position]); 
    return v; 
}
}


xml文件有两个：
一个是main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
<ListView id="@id/android:list"
    android:layout_width="fill_parent"
    android:layout_height="0dip"
    android:layout_weight="1"
    android:drawSelectorOnTop="false"
    />
</LinearLayout>

另一个是：list_row.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"
    >
<ImageView id="@+id/icon"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          />
<TextView id="@+id/city"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          />
</LinearLayout>

另外还有一个icon,icon_smail.jpg文件
icon_smile.jpg


还有一个问题，List，Map可以如下这样使用吗？
    private List fillMaps(){
        List items = new ArrayList();
      
        Map i1 = new HashMap();
        i1.put("icon", getResources().getDrawable(R.drawable.icon_smile));
        i1.put("city", "Beijing");
        items.add(i1);

        Map i2 = new HashMap();
        i2.put("icon", getResources().getDrawable(R.drawable.icon_smile));
        i2.put("city", "Tokyo");
        items.add(i2);
       
        return items;
    }

多谢各位了！！！

14 楼 zhengweiyang1015 2008-01-17  

本人对您的方法非常感兴趣，能否把源代码提供一下，不胜感激，
我的邮箱是[e-mail]

13 楼 zhengweiyang1015 2008-01-17  

本人对您的方法非常感兴趣，能否把源代码提供一下，不胜感激

12 楼 zhengweiyang 2008-01-09  

[color=darkred][/

引用

[img][/i  gsdfgsdgdsgsdgsdfg   mg][/url][url][flash=200,200][/flash]color]
dfsgsdfgfsdg

11 楼 zhengweiyang1015 2008-01-04  

能否把源代码提供一下，不胜感激！
[e-mail]

10 楼 lordhong 2008-01-02  

楼上MM站内短信已经回复。

9 楼 newanan 2007-12-19  

lz，xm初学andoid,用您提供的代码自己建了个工程运行了一把，没有出结果，本人对您的方法非常感兴趣，能否把源代码提供一下，不胜感激！

8 楼 bobomtv17 2007-12-13  

楼主是J2ME高手啊

7 楼 lordhong 2007-12-09  

珍爱生命，远离J2ME。。。

6 楼 muscle-liu 2007-12-08  

j2mepolish 里边定义着一个IconItem（extends Item）, 很容易实现楼主要噶效果...

5 楼 mwjian 2007-11-30  

根据Quake Wang的提示,实现如下,相当简单

	public class IconTextAdapter extends SimpleAdapter {

		private int[] mIcons;
		private int mIconId;
		
		/**
		 * @param icons	要显示的Icon资源id
		 * @param iconId	icon在layout中的id
		 */
		public IconTextAdapter(Context context, List data,
					int resource, String[] from, int[] to,
					int[] icons, int iconId) {
			super(context, data, resource, from, to);

			mIcons = icons;
			mIconId = iconId;
		}

		public View getView(int position, View convertView, ViewGroup parent) {
			View v = super.getView(position, convertView, parent);
			ImageView img = (ImageView) v.findViewById(mIconId);
			img.setImageResource(mIcons[position]);
			return v;
		}
	}

4 楼 小小龙猫 2007-11-23  

hehe,好好学习一下

3 楼 lordhong 2007-11-22  

大哥，你强大啊！如果能把MapView搞进compsite view里面就NB了！
快点啊，拉票人一起参赛啊！

2 楼 QuakeWang 2007-11-22  

这样实现ListVie的Row有点太麻烦了，我想可以用xml composite layout以及google提供的一些内建Class来做，做了一个小实验:
定义layout, row.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">
	<TextView id="@+id/text1" android:layout_width="0dip"
		android:layout_height="fill_parent"
		android:layout_weight="1"/>
	<TextView id="@+id/text2" android:layout_width="0dip"
		android:layout_height="fill_parent"
		android:layout_weight="2"/>		
</LinearLayout>

这里是用2个TextView来做横向排列的组合

在Activity里面就可以这样写了:

	public void onCreate(Bundle icicle) {
		super.onCreate(icicle);

		List items = new ArrayList();
		Map i1 = new HashMap();
		i1.put("text", "text1");
		i1.put("icon", "icon1");
		items.add(i1);

		Map i2 = new HashMap();
		i2.put("text", "text2");
		i2.put("icon", "icon2");
		items.add(i2);

		ListAdapter adapter = new SimpleAdapter(this, items, R.layout.row, new String[] { "icon", "text" }, new int[] { R.id.text1, R.id.text2 });

		setListAdapter(adapter);
	}

这里用了SDK提供的SimpleAdapter，来把一个Map通过key值绑定到了layout id上，这样出来了附件的显示效果，距离我们想要的最终效果就是文字和图标的区别。


下一步就是把row.xml中的其中一个TextView替换成ImageView:

	<ImageView id="@+id/icon1" android:layout_width="0dip"
		android:layout_height="fill_parent"
		android:layout_weight="1"/>

由于SimpleAdapter只能绑定到TextView，我们还需要自己写一个IconTextAdapter extends SimpleAdapter，重写里面的绑定数据到ImageView的方法，就能够实现想要的效果了。
可惜SDK里面的android.jar还没有放出源代码来，也没有相关的例子，光看api文档摸索需要一些时间，我就偷懒了, 这个实验就做到此,

1 楼 yongyuan.jiang 2007-11-22  

android不是号称采取gwt前端开发模式吗？