【Android】说做就做：带图标的list item
这几天在搞带有icon的list item，但实现方法貌似很复杂，照着国外达人的一些code snippet也搞不定，他们也没把全部的code发出了，NND。。。怒！今天终于集众家之大成。。。搞定一个了。。。想想还是GWT好，一个composite widget就很轻松搞定了。。。Android目前还算是垃圾滴。。。
做个ImageItem class存放icon和text：
java 代码
publicclassImageItem {
privateString text;
privateDrawable drawable;
privatebooleanisSelectable =true;
publicImageItem(String text, Drawable drawable) {
super();
this.text = text;
this.drawable = drawable;
}
然后做个View给这个composite view，这里extend了linearlayout，但你也可以使用其他的layout：
java 代码
publicclassImageItemViewextendsLinearLayout {
privateTextView text;
privateImageView image;
publicImageItemView(Context context, String title, Drawable drawable) {
super(context);
this.setOrientation(HORIZONTAL);
image = newImageView(context);
image.setImageDrawable(drawable);
// 左，上，右，下
image.setPadding(0,2,5,2);
//这里的layout一定要设置，不然无法显示，NND, 竟然default显示设置都没有！！
addView(image, newLinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
text = newTextView(context);
text.setText(title);
addView(text, newLinearLayout.LayoutParams(
LayoutParams.WRAP_CONTENT, LayoutParams.WRAP_CONTENT));
}
接下来要做个Adapater给我们新建的composite view：
public class ImageItemArrayAdapter extends BaseAdapter {
private Context context;
private List items;
public ImageItemArrayAdapter(Context ctx) {
context = ctx;
items = new ArrayList();
}
里面要实现getView这个method，这里return上面新建的ImageItemView：
java 代码
publicView getView(intposition, View convertView, ViewGroup parent) {
ImageItemView iiv;
if(convertView==null) {
iiv = newImageItemView(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());
}
returniiv;
}
最后用一个简单的ListActivity来demo下：
java 代码
publicclassImageListItemDemoextendsListActivity {
List items;
@Override
publicvoidonCreate(Bundle icicle) {
super.onCreate(icicle);
ImageItemArrayAdapter adapter = newImageItemArrayAdapter(this);
Resources res = this.getResources();
adapter.addItem(newImageItem("Home", res.getDrawable(R.drawable.sliderhouse)));
adapter.addItem(newImageItem("Bar", res.getDrawable(R.drawable.bar)));
adapter.addItem(newImageItem("Book Store", res.getDrawable(R.drawable.bookstore)));
adapter.addItem(newImageItem("Cafe", res.getDrawable(R.drawable.cafe)));
adapter.addItem(newImageItem("Drug Store", res.getDrawable(R.drawable.drugstore)));
adapter.addItem(newImageItem("Fitness Center", res.getDrawable(R.drawable.fitness)));
adapter.addItem(newImageItem("Grocery", res.getDrawable(R.drawable.grocery)));
adapter.addItem(newImageItem("Library", res.getDrawable(R.drawable.library)));
adapter.addItem(newImageItem("Movie Theatre", res.getDrawable(R.drawable.movietheater)));
adapter.addItem(newImageItem("Park", res.getDrawable(R.drawable.park)));
adapter.addItem(newImageItem("Restaurant", res.getDrawable(R.drawable.restaurant)));
adapter.addItem(newImageItem("Super Market", res.getDrawable(R.drawable.retail)));
adapter.addItem(newImageItem("School", res.getDrawable(R.drawable.school)));
setListAdapter(adapter);
}
请看截图，效果不错吧！这个实现我觉得应该在google android API缺省要直接提供，毕竟用到的情况很多很多。
1 楼
yongyuan.jiang
2007-11-22
android不是号称采取gwt前端开发模式吗？
2 楼
QuakeWang
2007-11-22
这样实现ListVie的Row有点太麻烦了，我想可以用xml composite layout以及google提供的一些内建Class来做，做了一个小实验:
定义layout, row.xml
android:orientation="horizontal" android:layout_width="fill_parent"
android:layout_height="fill_parent">
android:layout_height="fill_parent"
android:layout_weight="1"/>
android:layout_height="fill_parent"
android:layout_weight="2"/>
这里是用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:
android:layout_height="fill_parent"
android:layout_weight="1"/>
由于SimpleAdapter只能绑定到TextView，我们还需要自己写一个IconTextAdapter extends SimpleAdapter，重写里面的绑定数据到ImageView的方法，就能够实现想要的效果了。
可惜SDK里面的android.jar还没有放出源代码来，也没有相关的例子，光看api文档摸索需要一些时间，我就偷懒了, 这个实验就做到此,
3 楼
lordhong
2007-11-22
大哥，你强大啊！如果能把MapView搞进compsite view里面就NB了！
快点啊，拉票人一起参赛啊！
4 楼
小小龙猫
2007-11-23
hehe,好好学习一下
5 楼
mwjian
2007-11-30
根据Quake Wang的提示,实现如下,相当简单public class IconTextAdapter extends SimpleAdapter {
private int[] mIcons;
private int mIconId;
/**
* @param icons要显示的Icon资源id
* @param iconIdicon在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;
}
}
6 楼
muscle-liu
2007-12-08
j2mepolish 里边定义着一个IconItem(extends Item), 很容易实现楼主要噶效果...
7 楼
lordhong
2007-12-09
珍爱生命，远离J2ME。。。
8 楼
bobomtv17
2007-12-13
楼主是J2ME高手啊
9 楼
newanan
2007-12-19
lz，xm初学andoid,用您提供的代码自己建了个工程运行了一把，没有出结果，本人对您的方法非常感兴趣，能否把源代码提供一下，不胜感激！
10 楼
lordhong
2008-01-02
楼上MM站内短信已经回复。
11 楼
zhengweiyang1015
2008-01-04
能否把源代码提供一下，不胜感激！
zhengweiyang2008@126.com
12 楼
zhengweiyang
2008-01-09
[color=darkred][/
引用
[img][/i
gsdfgsdgdsgsdgsdfg
mg][/url][url][flash=200,200][/flash]color]
dfsgsdfgfsdg
13 楼
zhengweiyang1015
2008-01-17
本人对您的方法非常感兴趣，能否把源代码提供一下，不胜感激
14 楼
zhengweiyang1015
2008-01-17
本人对您的方法非常感兴趣，能否把源代码提供一下，不胜感激，
我的邮箱是zhengweiyang2006@126.com
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
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:drawSelectorOnTop="false"
/>
另一个是：list_row.xml
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
另外还有一个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;
}
多谢各位了！！！
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
android:orientation="vertical"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
android:layout_width="fill_parent"
android:layout_height="0dip"
android:layout_weight="1"
android:drawSelectorOnTop="false"
/>
另一个是：list_row.xml
android:orientation="horizontal"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
android:layout_width="wrap_content"
android:layout_height="wrap_content"
/>
另外还有一个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好像不支持吧！
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
