一步一步学android之控件篇——ListView自定义显示数据格式
上一篇博客说了ListView的基本使用，这篇将是对ListView的使用进行一个提高，在日常生活中，如果单单给你看一些图片，你可能都不知道这个图片表达的什么意思，但是要是在图片旁边写的备注或者加个名字，我们就会很清楚的知道这张图片是什么，所以就要使用到SimpleAdapter类了，下面用个例子来说明SImpleAdapter在ListView中的作用。
下面要实现的需求是，用ListView显示9个女明星的照片，姓名和简介，然后点击照片可以查看原图。
效果如下：
从上面的效果图可以看出来这个ListView的项是包含了图片和文字两个对象的，所以我们需要先定义一个布局文件来作为显示每一项的模板，listview_item.xml：
然后就是初始化ListView将数据加进去，在MainActivity中进行操作，MainActivity：
package com.example.listviewbasic;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import android.app.Activity;
import android.os.Bundle;
import android.widget.ListView;
import android.widget.SimpleAdapter;
public class MainActivity extends Activity {
private ListView listView = null;
private List> list = new ArrayList>();
private SimpleAdapter simpleAdapter = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
listView = (ListView) super.findViewById(R.id.listView);
settingAdapter();
listView.setAdapter(simpleAdapter);
}
private void settingAdapter() {
initList();
// map中的key
String from[] = new String[] { "people", "name", "introduce" };
// 模板中的组件id
int to[] = new int[] { R.id.people, R.id.name, R.id.introduce };
simpleAdapter = new SimpleAdapter(this, list, R.layout.listview_item,
from, to);
}
private void initList() {
// 显示的图片资源
int[] res = new int[] { R.drawable.liushishi, R.drawable.liushishi2,
R.drawable.aiweier, R.drawable.aiweier2, R.drawable.piaoxinhui,
R.drawable.piaoxinhui2, R.drawable.w, R.drawable.yuner,
R.drawable.yuner2 };
// 定义一个二维数组来显示姓名和简介
String string[][] = new String[][] { { "刘诗诗", "刘诗诗简介" },
{ "刘诗诗2", "刘诗诗2简介" }, { "艾薇儿", "艾薇儿简介" }, { "艾薇儿", "艾薇儿2简介" },
{ "朴信惠", "朴信惠简介" }, { "朴信惠2", "朴信惠2简介" }, { "朴信惠3", "朴信惠3简介" },
{ "允儿", "允儿简介" }, { "允儿2", "允儿2简介" }, };
//初始化list数据
for (int i = 0; i < 9; i++) {
HashMap map = new HashMap();
map.put("people", res[i]);
map.put("name", string[i][0]);
map.put("introduce", string[i][1]);
list.add(map);
}
}
} 按照如上操作就可以实现上面第一张效果图的效果，对代码的解释我直接写在代码中，下面实现点击图片查看原图，我在这里采用了popwindow，对于这个组件，后面也会有讲，这里就提前用下，同时我这里为了效果感，还采用了动画文件，下面开始实现，首先是两个动画文件pophidden_anim.xml：
popshow_anim.xml：
接下来就是为ListView加OnItemClickListener事件，然后在里面对查看原图的需求进行实现，修改后的MainActivity.java：
package com.example.listviewbasic;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;
import android.app.Activity;
import android.graphics.drawable.BitmapDrawable;
import android.os.Bundle;
import android.view.Gravity;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.OnTouchListener;
import android.view.ViewGroup.LayoutParams;
import android.widget.AdapterView;
import android.widget.AdapterView.OnItemClickListener;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.PopupWindow;
import android.widget.SimpleAdapter;
public class MainActivity extends Activity implements OnItemClickListener {
private ListView listView = null;
private List> list = new ArrayList>();
private SimpleAdapter simpleAdapter = null;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
initView();
}
private void initView() {
listView = (ListView) super.findViewById(R.id.listView);
settingAdapter();
listView.setAdapter(simpleAdapter);
listView.setOnItemClickListener(this);
}
private void settingAdapter() {
initList();
// map中的key
String from[] = new String[] { "people", "name", "introduce" };
// 模板中的组件id
int to[] = new int[] { R.id.people, R.id.name, R.id.introduce };
simpleAdapter = new SimpleAdapter(this, list, R.layout.listview_item,
from, to);
}
private void initList() {
// 显示的图片资源
int[] res = new int[] { R.drawable.liushishi, R.drawable.liushishi2,
R.drawable.aiweier, R.drawable.aiweier2, R.drawable.piaoxinhui,
R.drawable.piaoxinhui2, R.drawable.w, R.drawable.yuner,
R.drawable.yuner2 };
// 定义一个二维数组来显示姓名和简介
String string[][] = new String[][] { { "刘诗诗", "刘诗诗简介" },
{ "刘诗诗2", "刘诗诗2简介" }, { "艾薇儿", "艾薇儿简介" }, { "艾薇儿", "艾薇儿2简介" },
{ "朴信惠", "朴信惠简介" }, { "朴信惠2", "朴信惠2简介" }, { "朴信惠3", "朴信惠3简介" },
{ "允儿", "允儿简介" }, { "允儿2", "允儿2简介" }, };
//初始化list数据
for (int i = 0; i < 9; i++) {
HashMap map = new HashMap();
map.put("people", res[i]);
map.put("name", string[i][0]);
map.put("introduce", string[i][1]);
list.add(map);
}
}
@Override
public void onItemClick(AdapterView parent, View view, int position,
long id) {
// TODO Auto-generated method stub
//点击list的item时获取ImageView对象
final ImageView img = (ImageView) view.findViewById(R.id.people);
//设置单击事件
img.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
try {
// 动态加载要用来显示点击放大的图片的布局
View show = LayoutInflater.from(MainActivity.this).inflate(
R.layout.show_item, null);
// 定义一个popwindow
final PopupWindow pw = new PopupWindow(show,
LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT,
true);
// 获取show_item布局中的ImageView id
ImageView showImg = (ImageView) show
.findViewById(R.id.show_img);
// 将点击的图片设置到showImg中
showImg.setImageDrawable(img.getDrawable());
// 点击屏幕关闭popwindow，这里是不管点击屏幕上什么地方都关闭
// pw.setTouchInterceptor(new OnTouchListener() {
//
// @Override
// public boolean onTouch(View v, MotionEvent event) {
// // TODO Auto-generated method stub
// pw.dismiss();
// return false;
// }
// });
// 控制点击能正常关闭popwindow，这句话很重要。（去掉不能正常监听返回键）
pw.setBackgroundDrawable(new BitmapDrawable());
// 设置区域外可获取触摸事件
pw.setOutsideTouchable(true);
// 设置动画
pw.setAnimationStyle(R.style.mypopwindow_anim_style);
// 居中
pw.showAtLocation(v, Gravity.CENTER, 0, 0);
pw.update();
} catch (Exception e) {
e.printStackTrace();
}
}
});
}
}
最终效果就是效果图那样的效果，就写到这里了。