论坛首页 移动开发技术论坛

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

浏览 24853 次
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
   发表时间:2007-11-22  

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

做个ImageItem class存放icon和text:

java 代码
 
  1. public class ImageItem {  
  2.   
  3.     private String text;  
  4.     private Drawable drawable;  
  5.     private boolean isSelectable = true;  
  6.       
  7.     public ImageItem(String text, Drawable drawable) {  
  8.         super();  
  9.         this.text = text;  
  10.         this.drawable = drawable;  
  11.     }  


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

java 代码
 
  1. public class ImageItemView extends LinearLayout {  
  2.   
  3.     private TextView text;  
  4.     private ImageView image;  
  5.       
  6.     public ImageItemView(Context context, String title, Drawable drawable) {  
  7.         super(context);  
  8.         this.setOrientation(HORIZONTAL);  
  9.           
  10.         image = new ImageView(context);  
  11.         image.setImageDrawable(drawable);  
  12.         // 左,上,右,下  
  13.         image.setPadding(0252);  
  14. //这里的layout一定要设置,不然无法显示,NND, 竟然default显示设置都没有!!  
  15.         addView(image, new LinearLayout.LayoutParams(  
  16.                 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
  17.           
  18.         text = new TextView(context);  
  19.         text.setText(title);  
  20.         addView(text, new LinearLayout.LayoutParams(  
  21.                 LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));  
  22.     }  


接下来要做个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 代码
 
  1. public View getView(int position, View convertView, ViewGroup parent) {  
  2.         ImageItemView iiv;  
  3.         if (convertView==null) {  
  4.             iiv = new ImageItemView(context, items.get(position).getText(), items.get(position).getDrawable());  
  5.         } else {  
  6.             iiv = (ImageItemView)convertView;  
  7.             iiv.setText(items.get(position).getText());  
  8.             iiv.setImage(items.get(position).getDrawable());  
  9.         }  
  10.         return iiv;  
  11.     }  


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

java 代码
 
  1. public class ImageListItemDemo extends ListActivity {  
  2.       
  3.     List<ImageItemView> items;  
  4.   
  5. @Override  
  6.     public void onCreate(Bundle icicle) {  
  7.         super.onCreate(icicle);  
  8.         ImageItemArrayAdapter adapter = new ImageItemArrayAdapter(this);  
  9.         Resources res = this.getResources();  
  10.           
  11.         adapter.addItem(new ImageItem("Home", res.getDrawable(R.drawable.sliderhouse)));  
  12.         adapter.addItem(new ImageItem("Bar", res.getDrawable(R.drawable.bar)));  
  13.         adapter.addItem(new ImageItem("Book Store", res.getDrawable(R.drawable.bookstore)));  
  14.         adapter.addItem(new ImageItem("Cafe", res.getDrawable(R.drawable.cafe)));  
  15.         adapter.addItem(new ImageItem("Drug Store", res.getDrawable(R.drawable.drugstore)));  
  16.         adapter.addItem(new ImageItem("Fitness Center", res.getDrawable(R.drawable.fitness)));  
  17.         adapter.addItem(new ImageItem("Grocery", res.getDrawable(R.drawable.grocery)));  
  18.         adapter.addItem(new ImageItem("Library", res.getDrawable(R.drawable.library)));  
  19.         adapter.addItem(new ImageItem("Movie Theatre", res.getDrawable(R.drawable.movietheater)));  
  20.         adapter.addItem(new ImageItem("Park", res.getDrawable(R.drawable.park)));  
  21.         adapter.addItem(new ImageItem("Restaurant", res.getDrawable(R.drawable.restaurant)));  
  22.         adapter.addItem(new ImageItem("Super Market", res.getDrawable(R.drawable.retail)));  
  23.         adapter.addItem(new ImageItem("School", res.getDrawable(R.drawable.school)));  
  24.           
  25.         setListAdapter(adapter);  
  26.     }  


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

  • 大小: 22.3 KB
   发表时间:2007-11-22  
android不是号称采取gwt前端开发模式吗?
0 请登录后投票
   发表时间: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文档摸索需要一些时间,我就偷懒了, 这个实验就做到此,
  • 大小: 48.2 KB
1 请登录后投票
   发表时间:2007-11-22  
大哥,你强大啊!如果能把MapView搞进compsite view里面就NB了!
快点啊,拉票人一起参赛啊!
0 请登录后投票
   发表时间: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;
		}
	}
0 请登录后投票
   发表时间:2007-12-08  
j2mepolish 里边定义着一个IconItem(extends Item), 很容易实现楼主要噶效果...
0 请登录后投票
   发表时间:2007-12-09  
珍爱生命,远离J2ME。。。
0 请登录后投票
   发表时间:2007-12-19  
lz,xm初学andoid,用您提供的代码自己建了个工程运行了一把,没有出结果,本人对您的方法非常感兴趣,能否把源代码提供一下,不胜感激!
0 请登录后投票
   发表时间:2008-01-02  
楼上MM站内短信已经回复。
0 请登录后投票
   发表时间:2008-01-17  
本人对您的方法非常感兴趣,能否把源代码提供一下,不胜感激
0 请登录后投票
论坛首页 移动开发技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics