这几天在搞带有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缺省要直接提供,毕竟用到的情况很多很多。
  • 7d18f4cb-4db1-449d-b8b0-d24a243b76ed-thumb
  • 描述:
  • 大小: 22.3 KB
  • 查看次数: 149
评论
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好像不支持吧!
山水之间 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;
}

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

提醒: 该博客已发表在公共论坛,博客所有留言会成为论坛回贴,留言请注意遵守论坛发贴规则

您还没有登录,请登录后发表评论

lordhong
搜索本博客
其他分类
存档
最新评论