一步一步学android之控件篇——ListView自定义显示数据格式
2013-11-11 14:46
543 查看
上一篇博客说了ListView的基本使用，这篇将是对ListView的使用进行一个提高，在日常生活中，如果单单给你看一些图片，你可能都不知道这个图片表达的什么意思，但是要是在图片旁边写的备注或者加个名字，我们就会很清楚的知道这张图片是什么，所以就要使用到SimpleAdapter类了，下面用个例子来说明SImpleAdapter在ListView中的作用。
下面要实现的需求是，用ListView显示9个女明星的照片，姓名和简介，然后点击照片可以查看原图。
效果如下：
从上面的效果图可以看出来这个ListView的项是包含了图片和文字两个对象的，所以我们需要先定义一个布局文件来作为显示每一项的模板，listview_item.xml：
然后就是初始化ListView将数据加进去，在MainActivity中进行操作，MainActivity：
按照如上操作就可以实现上面第一张效果图的效果，对代码的解释我直接写在代码中，下面实现点击图片查看原图，我在这里采用了popwindow，对于这个组件，后面也会有讲，这里就提前用下，同时我这里为了效果感，还采用了动画文件，下面开始实现，首先是两个动画文件pophidden_anim.xml：
popshow_anim.xml：
然后是为点击显示原图加一个显示布局，show_item.xml：
接下来就是为ListView加OnItemClickListener事件，然后在里面对查看原图的需求进行实现，修改后的MainActivity.java：
最终效果就是效果图那样的效果，就写到这里了。
下面要实现的需求是，用ListView显示9个女明星的照片，姓名和简介，然后点击照片可以查看原图。
效果如下：
从上面的效果图可以看出来这个ListView的项是包含了图片和文字两个对象的，所以我们需要先定义一个布局文件来作为显示每一项的模板，listview_item.xml：
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="horizontal" >
<ImageView
android:id="@+id/people"
android:layout_width="100dp"
android:layout_height="100dp"
android:layout_margin="10dp" />
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
<TextView
android:id="@+id/name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="TextView" />
<TextView
android:id="@+id/introduce"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="10dp"
android:layout_marginTop="10dp"
android:text="TextView" />
</LinearLayout>
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:orientation="vertical" >
</LinearLayout>
</LinearLayout>然后就是初始化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<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
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<String, Object> map = new HashMap<String, Object>();
map.put("people", res[i]);
map.put("name", string[i][0]);
map.put("introduce", string[i][1]);
list.add(map);
}
}
}按照如上操作就可以实现上面第一张效果图的效果，对代码的解释我直接写在代码中，下面实现点击图片查看原图，我在这里采用了popwindow，对于这个组件，后面也会有讲，这里就提前用下，同时我这里为了效果感，还采用了动画文件，下面开始实现，首先是两个动画文件pophidden_anim.xml：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<!-- 透明度渐变 -->
<scale
android:duration="325"
android:fillAfter="false"
android:fromXScale="1"
android:fromYScale="1"
android:interpolator="@android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.5"
android:toYScale="1.5" >
</scale>
<alpha
android:duration="400"
android:fromAlpha="1"
android:interpolator="@android:anim/linear_interpolator"
android:toAlpha="0" />
</set>popshow_anim.xml：
<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android" >
<scale
android:duration="325"
android:fillAfter="true"
android:fromXScale="1.5"
android:fromYScale="1.5"
android:interpolator="@android:anim/linear_interpolator"
android:pivotX="50%"
android:pivotY="50%"
android:toXScale="1.0"
android:toYScale="1.0" >
</scale>
<alpha
android:duration="400"
android:fromAlpha="0"
android:interpolator="@android:anim/linear_interpolator"
android:toAlpha="1" />
</set>然后是为点击显示原图加一个显示布局，show_item.xml：
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
android:background="#b0000000">
<ImageView
android:id="@+id/show_img"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerInParent="true" />
</RelativeLayout>接下来就是为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<Map<String, Object>> list = new ArrayList<Map<String, Object>>();
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<String, Object> map = new HashMap<String, Object>();
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();
}
}
});
}
}最终效果就是效果图那样的效果，就写到这里了。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- ListView通过自定义适配器来显示数据并对Item项以及子view项的控件实现监听
- android自定义listview格式动态更新显示数据测试
- Android ListView最佳处理方式，ListView拖动防重复数据显示，单击响应子控件
- android--自定义ExpandableListView+隐藏指示器图片+防数据显示混乱
- ListView通过自定义适配器来显示数据并对Item项以及子view项的控件实现监听.
- android之listview无数据时显示自定义view
- Android 自定义 ListView 显示网络上 JSON 格式歌曲列表
- Android 自定义ListView只显示第一条数据的问题
- 【Android】使用自定义Adapter优化ListView、修改数据及控件内部布局
- Android 自定义Adapter 但listview 只显示第一条数据
- ListView通过自定义适配器来显示数据并对Item项以及子view项的控件实现监听.
- Android访问网络：服务端返回XML或JSON格式数据，Android 进行解析并使用ListView显示
- Android自定义Button结合PopupWindow和ListView实现顺序显示下拉菜单控件
- [转]Android ListView最佳处理方式，ListView拖动防重复数据显示，单击响应子控件
- Android布局设计之ExpandableList绑定XML数据构成级联、item布局页面的控件查找及配置child事件，自定义适配显示内容
- ANDROID_MARS学习笔记_S04_008_用Listview、自定义adapter显示返回的微博数据
- [Android]自定义EmptyView列表数据为空显示
- Android Xlistview 或者 listview改变控件显示隐藏，chekBox状态发生改变，下拉，上划出现错乱。
- 数据显示控件在绑定显示的各种格式
- android控件ListView顶部或者底部也显示分割线