一步一步学android之控件篇——ListView自定义显示数据格式

上一篇博客说了ListView的基本使用，这篇将是对ListView的使用进行一个提高，在日常生活中，如果单单给你看一些图片，你可能都不知道这个图片表达的什么意思，但是要是在图片旁边写的备注或者加个名字，我们就会很清楚的知道这张图片是什么，所以就要使用到SimpleAdapter类了，下面用个例子来说明SImpleAdapter在ListView中的作用。

下面要实现的需求是，用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" ><ImageViewandroid:id="@+id/people"android:layout_width="100dp"android:layout_height="100dp"android:layout_margin="10dp" /><LinearLayoutandroid:layout_width="wrap_content"android:layout_height="match_parent"android:orientation="vertical" ><TextViewandroid:id="@+id/name"android:layout_width="wrap_content"android:layout_height="wrap_content"android:layout_marginLeft="10dp"android:layout_marginTop="10dp"android:text="TextView" /><TextViewandroid: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><LinearLayoutandroid: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;@Overrideprotected 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中的keyString from[] = new String[] { "people", "name", "introduce" };// 模板中的组件idint 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" ><!-- 透明度渐变 --><scaleandroid: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><alphaandroid: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" ><scaleandroid: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><alphaandroid: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"><ImageViewandroid: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;@Overrideprotected 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中的keyString from[] = new String[] { "people", "name", "introduce" };// 模板中的组件idint 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);}}@Overridepublic 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() {@Overridepublic void onClick(View v) {try {// 动态加载要用来显示点击放大的图片的布局View show = LayoutInflater.from(MainActivity.this).inflate(R.layout.show_item, null);// 定义一个popwindowfinal PopupWindow pw = new PopupWindow(show,LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT,true);// 获取show_item布局中的ImageView idImageView 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();}}});}
}

最终效果就是效果图那样的效果，就写到这里了。

一步一步学android之控件篇——ListView自定义显示数据格式相关推荐

Android 数据显示控件（ListView实战演练）
源码 [工程文件]:https://gitee.com/lwx001/ListView 推荐博客:(这个更详细.) https://blog.csdn.net/weixin_44949135/arti ...
android space控件变成线条,学Android Space控件，只看这篇文章就行了
Space Space is a lightweight View subclass that may be used to create gaps between components in gen ...
Android基础控件——ImageView的自定义，巧用Matrix实现图片不变形的炫酷PK条
前言在开发中常常会遇到PK条制作,如果在PK条中是纯色的情况下,比较好办,如下: 我们通常会设置其权重进行更新两个PK条的进度,实现起来也简单 //更新PkBar宽度比例 private void ...
Android基础控件——SeekBar的自定义，超短代码模仿抖音带有数字拖拽进度条
前言在开发中,经常会遇到SeekBar组件的开发,一个高效的自定义SeekBar显得尤为重要,笔者刚好也在项目中大量使用带有数字的拖拽进度条,在深思熟虑后,打算从继承源码形式上,把数字绘制在拖拽进度 ...
Android Button控件背景图片无法显示问题
原因: themes 文件中的style 标签的parent 属性有问题修改前效果修改后布局代码
验证控件的使用：一步一步学注册——RangeValidator控件
™RangeValidator检查指定范围上一篇博客: 验证控件的使用:一步一步学注册--CompareValidator控件上篇博客说道要继续学习检查指定范围的验证控件RangeValidato ...
Android学习--02（猜猜我的星座App源码+Android常用控件TextView+EditText+Button+ImangeView+DatePicker+App间通信+跳转页面）
猜猜我的星座App 1 Android常用控件 1.1 TextView控件 1.1.1 简介 1.1.2属性 1.1.3 扩展属性 1.1.4 TextView的使用方法 1.1.5总结 1.2 E ...
Android图表控件MPAndroidChart——曲线图LineChart的使用（财富收益图）
目录前言本文涉及文章其他相关文章 1.数据准备 1.1 数据来源 2.曲线展示 2.1 MPAndroidChart获取 2.2 数据对象获取 2.3 数据展示 3.曲线完善 3.1 图表背景. ...
Android图片控件，跟随列表(recyclerView)的上下滚动而同步平移。
一个用于放置在RecycleView中的图片控件,其主要功能是跟随列表的上下滚动而上下平移,使得呈现出一种图像相对列表静止的感觉. Overview ScrollingImageView 提供以下特性 ...

一步一步学android之控件篇——ListView自定义显示数据格式

一步一步学android之控件篇——ListView自定义显示数据格式相关推荐

最新文章

热门文章