Android復雜自定義Listview實現

在Android中實現Listview對新人來說比較難以理解，本人看了若干文章后覺得可以使用以下思路來讓新人更好理解（同時也做好記錄，免得自己以后忘記）。

可參考博客：http://cinderella7.blog.51cto.com/7607653/1281696  （這里用MVC的思想去理解Listview，個人認為還是不錯的）

　　　　　　http://blog.csdn.net/jueblog/article/details/11857281   （一個完整的實現）

 

--------------------------------------------------------------------------分割線-----------------------------------------------------------------

一、理順整個思路。

自定義Listview中包含三個重要概念，這里用MVC的形式去理解：　　

　　ListView相當於MVC框架中的V（視圖）

　　Adapter相當於MVC框架中的C（控制器）

　　數據源相當於MVC框架中的M（模型）

 

二、一步一步實現

　　1、先自定義listview中每個Item子項的布局

listitem.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="match_parent"
              android:layout_height="match_parent">

    <ImageView
            android:layout_width="fill_parent"
            android:layout_height="100dp"
            android:id="@+id/imageView"/>
    <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:textAppearance="?android:attr/textAppearanceLarge"
            android:text="Large Text"
            android:id="@+id/textView"/>
</LinearLayout>

　　2、定義主布局

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
              android:orientation="vertical"
              android:layout_width="fill_parent"
              android:layout_height="fill_parent"
        >
    <ListView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/listView"/>
</LinearLayout>

 

　　3、然后，定義數據源、視圖、適配器

    private List<HashMap<String,Object>> mData;  //M
    private ListView listView;  //V
    private MyAdapter myAdapter;  //C

　　4、獲取數據源

private List<HashMap<String,Object>> getData(){
        ArrayList<HashMap<String,Object>> arrayList = new ArrayList<HashMap<String, Object>>();
        HashMap<String,Object> hashMap = null;
        for(int i=0;i<10;i++){
            hashMap = new HashMap<String, Object>();
            hashMap.put("index",Integer.toString(i+1));
            hashMap.put("img",R.drawable.my);
            arrayList.add(hashMap); //添加到數據源中
        }
        return arrayList;
    }

　　5、自定義適配器，添加數據源到適配器中

//創建自定義adapter
    private class MyAdapter extends BaseAdapter{
        private LayoutInflater mlayoutInflater;

　　　　　　
        public MyAdapter(Context context) {
            mlayoutInflater = LayoutInflater.from(context);  //動態布局映射
        }

        @Override
        public int getCount() {
            return mData.size();
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            convertView = mlayoutInflater.inflate(R.layout.listitem, null);  //  根據布局文件實例化view
            TextView tv = (TextView)convertView.findViewById(R.id.textView);
            tv.setText(mData.get(position).get("index").toString());
            ImageView img = (ImageView)convertView.findViewById(R.id.imageView);
            img.setBackgroundResource((Integer)mData.get(position).get("img"));
            return convertView;
        }
    }

　　6、在onCreate函數中實施

        listView = (ListView)findViewById(R.id.listView);
        //----
        mData = getData();
        myAdapter = new MyAdapter(this);
        listView.setAdapter(myAdapter);

三、總結

　　整個實現流程都嚴格按照MVC的模式去做，首先是自定義自己的元素布局，然后獲取數據源，然后重寫適配器，加載數據源到適配器中，通過listview顯示適配器內容。

以下附上Java代碼完整版：

package com.example.ListViewTest;

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

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

public class MyActivity extends Activity {
    /**
     * Called when the activity is first created.
     */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        listView = (ListView)findViewById(R.id.listView);
        //----
        mData = getData();
        myAdapter = new MyAdapter(this);
        listView.setAdapter(myAdapter);
    }

    private List<HashMap<String,Object>> mData;  //M
    private ListView listView;  //V
    private MyAdapter myAdapter;  //C


    private List<HashMap<String,Object>> getData(){
        ArrayList<HashMap<String,Object>> arrayList = new ArrayList<HashMap<String, Object>>();
        HashMap<String,Object> hashMap = null;
        for(int i=0;i<10;i++){
            hashMap = new HashMap<String, Object>();
            hashMap.put("index",Integer.toString(i+1));
            hashMap.put("img",R.drawable.my);
            arrayList.add(hashMap); //添加到數據源中
        }
        return arrayList;
    }

    //創建自定義adapter
    private class MyAdapter extends BaseAdapter{
        private LayoutInflater mlayoutInflater;

        public MyAdapter(Context context) {
            mlayoutInflater = LayoutInflater.from(context);  //動態布局映射
        }

        @Override
        public int getCount() {
            return mData.size();
        }

        @Override
        public Object getItem(int position) {
            return null;
        }

        @Override
        public long getItemId(int position) {
            return 0;
        }

        @Override
        public View getView(int position, View convertView, ViewGroup parent) {
            convertView = mlayoutInflater.inflate(R.layout.listitem, null);  //  根據布局文件實例化view
            TextView tv = (TextView)convertView.findViewById(R.id.textView);
            tv.setText(mData.get(position).get("index").toString());
            ImageView img = (ImageView)convertView.findViewById(R.id.imageView);
            img.setBackgroundResource((Integer)mData.get(position).get("img"));
            return convertView;
        }
    }
}