ListView的Adapter使用(绑定数据) 之 自定义每一项的布局去绑定数据(二)

紧接上篇：

接下来是自定义布局的例子，我们大家先看下程序出来的效果图：

 

代码是：

1.     首先自定义布局，我们命名一个custom_list_layout.xml的布局文件，代码如下：

 

xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent" android:layout_height="fill_parent">
    <ImageView android:id="@+id/p_w_picpathView" android:layout_width="48dip"
        android:layout_height="48dip" android:scaleType="fitCenter"
        android:adjustViewBounds="true" android:layout_alignParentLeft="true"
        android:layout_margin="5dip">ImageView>
    <TextView android:id="@+id/number" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:textSize="14dip"
        android:layout_toRightOf="@+id/p_w_picpathView" android:layout_alignTop="@+id/p_w_picpathView">TextView>
    <TextView android:id="@+id/name" android:layout_width="wrap_content"
        android:layout_height="wrap_content" android:textSize="10dip"
        android:layout_toRightOf="@+id/p_w_picpathView" android:layout_below="@+id/number">TextView>
RelativeLayout>

2.     我们程序中的代码：

 

/**
 *
 */
package com.cz.list.demo;

import java.util.ArrayList;
import java.util.HashMap;

import android.app.Activity;
import android.content.Context;
import android.os.Bundle;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.ListView;
import android.widget.SimpleAdapter;
import android.widget.TextView;

/**
 * @author CZ
 *
 */
public class CustomSimpleAdapterDemo extends Activity {
    private ListView listView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        // TODO Auto-generated method stub
        super.onCreate(savedInstanceState);
        setContentView(R.layout.array_list_layout);
        listView = (ListView) findViewById(R.id.array_list);

        CustomSimpleAdapter customSimpleAdapter = new CustomSimpleAdapter(
                CustomSimpleAdapterDemo.this, getHashMapData(),
                R.layout.custom_list_layout);

        listView.setAdapter(customSimpleAdapter);
    }

    /**
     *
     * @author CZ
     *  自定义的类去继承SimpleAdapter
     */
    private class CustomSimpleAdapter extends SimpleAdapter {
        private Context context;
        private ArrayList<HashMap<String, Object>> data;
        private int layoutResource;

        /**
         * @param context
         * @param data
         * @param resource
         * @param from
         * @param to  构造函数
         */
        public CustomSimpleAdapter(Context context,
                ArrayList<HashMap<String, Object>> data, int resource) {
            super(context, data, resource, null, null);
            this.context = context;
            this.data = data;
            this.layoutResource = resource;
        }

        class ViewHolder {
            ImageView picture;
            TextView number;
            TextView name;
        }

        /*
         * (non-Javadoc)
         *
         * @see android.widget.SimpleAdapter#getView(int, android.view.View,
         * android.view.ViewGroup)
         */
        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            LayoutInflater layoutInflater = (LayoutInflater) getSystemService(LAYOUT_INFLATER_SERVICE);
            View layoutView = layoutInflater.inflate(layoutResource, null);
            ViewHolder viewHolder = new ViewHolder();
            viewHolder.picture = (ImageView) layoutView
                    .findViewById(R.id.p_w_picpathView);
            viewHolder.number = (TextView) layoutView.findViewById(R.id.number);

            viewHolder.name = (TextView) layoutView.findViewById(R.id.name);
            viewHolder.picture.setImageResource(Integer.parseInt(data.get(
                    position).get("p_w_picpathView").toString()));
            viewHolder.number.setText(data.get(position).get("id").toString());
            Log.e("id", data.get(position).get("name").toString());
            viewHolder.name.setText(data.get(position).get("name").toString());
            return layoutView;
        }
    }

    /**
     *
     * @return
     * Year:2011 Date:2011-10-23 Time:下午05:46:45
     * Author:CZ
     * TODO  自定义的方法绑定数据，为了避免图片全部都一样，我们让三张图片循环绑定。
     */
    private ArrayList<HashMap<String, Object>> getHashMapData() {
        ArrayList<HashMap<String, Object>> hashData = new ArrayList<HashMap<String, Object>>();
        for (int i = 0; i < 10; i++) {
            HashMap<String, Object> mItem = new HashMap<String, Object>();
            mItem.put("id", "当前的编号是：" + i);
            mItem.put("name", "名字是美女" + i);
            switch (i % 3) {
            case 0:
                mItem.put("p_w_picpathView", R.drawable.test1);
                break;
            case 1:
                mItem.put("p_w_picpathView", R.drawable.test2);
                break;
            case 2:
                mItem.put("p_w_picpathView", R.drawable.test3);
                break;
            default:
                mItem.put("p_w_picpathView", R.drawable.test4);
                break;
            }
            hashData.add(mItem);
        }
        return hashData;

    }

}

有了之前的例子做基础，这时候看起来是不是会清楚一些呢，绑定数据是一样的，只不过是多绑定了图片的数据。

然后我们重写了SimpleAdapter,  构造函数我们自己定义参数，需要说明的是：

1)     getView() 方法返回是的是一个View值，我们绑定完数据之后，把这个View返回

2)     我们自己写的layout，要先通过转化，转化成为一个View, 找到她里面对应的TextView，然后取出List 表中相对应位置的HashMap，取出数据显示到相应的ImageView 和TextView上面.

希望对新手有所帮助..

让人纠结的编译器啊，我都贴了两遍...