[Android] ListView中getView的原理＋如何在ListView中放置多個item

ListView 和 Adapter 的基礎

工作原理:

1. ListView 針對List中每個item，要求 adapter “給我一個視圖” (getView)。
2. 一個新的視圖被返回並顯示

如果我們有上億個項目要顯示怎麼辦？為每個項目建立一個新視圖？NO!這不可能！

實際上Android為你緩衝了視圖。

Android中有個叫做Recycler的構件，是他的工作原理：

1. 如果你有10億個項目(item)，其中只有可見的項目存在記憶體中，其他的在Recycler中。
2. ListView先請求一個type1視圖(getView)然後請求其他可見的項目。convertView在getView中是空(null)的。
3. 當item1滾出螢幕，並且一個新的項目從螢幕低端上來時，ListView再請求一個type1視圖。convertView此時不是空值了，它的值是item1。你只需設定新的資料然後返回convertView，不必重新建立一個視圖。

請看下面的範例程式碼，這裡在getView中使用了System.out進行輸出

public class MultipleItemsList extends ListActivity {     private MyCustomAdapter mAdapter;     @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mAdapter = new MyCustomAdapter();        for (int i = 0; i < 50; i++) {            mAdapter.addItem("item " + i);        }        setListAdapter(mAdapter);    }     private class MyCustomAdapter extends BaseAdapter {         private ArrayList mData = new ArrayList();        private LayoutInflater mInflater;         public MyCustomAdapter() {            mInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);        }         public void addItem(final String item) {            mData.add(item);            notifyDataSetChanged();        }         @Override        public int getCount() {            return mData.size();        }         @Override        public String getItem(int position) {            return mData.get(position);        }         @Override        public long getItemId(int position) {            return position;        }         @Override        public View getView(int position, View convertView, ViewGroup parent) {            System.out.println("getView " + position + " " + convertView);            ViewHolder holder = null;            if (convertView == null) {                convertView = mInflater.inflate(R.layout.item1, null);                holder = new ViewHolder();                holder.textView = (TextView)convertView.findViewById(R.id.text);                convertView.setTag(holder);            } else {                holder = (ViewHolder)convertView.getTag();            }            holder.textView.setText(mData.get(position));            return convertView;        }     }     public static class ViewHolder {        public TextView textView;    }}

 

執行程式，然後在Logcat中查看日誌

 

getView 被調用 9 次 ，convertView 對於所有的可見項目是空值（如下）

 

02-05 13:47:32.559: INFO/System.out(947): getView 0 null02-05 13:47:32.570: INFO/System.out(947): getView 1 null02-05 13:47:32.589: INFO/System.out(947): getView 2 null02-05 13:47:32.599: INFO/System.out(947): getView 3 null02-05 13:47:32.619: INFO/System.out(947): getView 4 null02-05 13:47:32.629: INFO/System.out(947): getView 5 null02-05 13:47:32.708: INFO/System.out(947): getView 6 null02-05 13:47:32.719: INFO/System.out(947): getView 7 null02-05 13:47:32.729: INFO/System.out(947): getView 8 null

 

然後稍微向下滾動List，直到item10出現：

 

convertView仍然是空值，因為recycler中沒有視圖（item1的邊緣仍然可見，在頂端）

 

02-05 13:48:25.169: INFO/System.out(947): getView 9 null

 

再滾動List

 

convertView不是空值了！item1離開螢幕到Recycler中去了，然後item11被建立

 

02-05 13:48:42.879: INFO/System.out(947): getView 10 android.widget.LinearLayout@437430f8

 

再滾動：

02-05 14:01:31.069: INFO/System.out(947): getView 11 android.widget.LinearLayout@437447d002-05 14:01:31.142: INFO/System.out(947): getView 12 android.widget.LinearLayout@43744ff802-05 14:01:31.279: INFO/System.out(947): getView 13 android.widget.LinearLayout@43743fa802-05 14:01:31.350: INFO/System.out(947): getView 14 android.widget.LinearLayout@4374582002-05 14:01:31.429: INFO/System.out(947): getView 15 android.widget.LinearLayout@4374604802-05 14:01:31.550: INFO/System.out(947): getView 16 android.widget.LinearLayout@4374687002-05 14:01:31.669: INFO/System.out(947): getView 17 android.widget.LinearLayout@4374709802-05 14:01:31.839: INFO/System.out(947): getView 18 android.widget.LinearLayout@437478c002-05 14:03:30.900: INFO/System.out(947): getView 19 android.widget.LinearLayout@43748df002-05 14:03:32.069: INFO/System.out(947): getView 20 android.widget.LinearLayout@437430f8

convertView 如我們所期待的非空了，在item11離開螢幕之後，它的視圖(@437430f8)作為convertView容納item21了

不同的項目布局(item layout)

我們再舉一個稍微複雜的例子，在上例的list中加入一些分隔線

你需要做這些:

1. 重(@Override)寫 getViewTypeCount() – 返回你有多少個不同的布局
2. 重寫 getItemViewType(int) – 由position返回view type id
3. 根據view item的類型，在getView中建立正確的convertView

以下是代碼：

 

public class MultipleItemsList extends ListActivity {     private MyCustomAdapter mAdapter;     @Override    public void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        mAdapter = new MyCustomAdapter();        for (int i = 1; i < 50; i++) {            mAdapter.addItem("item " + i);            if (i % 4 == 0) {                mAdapter.addSeparatorItem("separator " + i);            }        }        setListAdapter(mAdapter);    }     private class MyCustomAdapter extends BaseAdapter {         private static final int TYPE_ITEM = 0;        private static final int TYPE_SEPARATOR = 1;        private static final int TYPE_MAX_COUNT = TYPE_SEPARATOR + 1;         private ArrayList mData = new ArrayList();        private LayoutInflater mInflater;         private TreeSet mSeparatorsSet = new TreeSet();         public MyCustomAdapter() {            mInflater = (LayoutInflater)getSystemService(Context.LAYOUT_INFLATER_SERVICE);        }         public void addItem(final String item) {            mData.add(item);            notifyDataSetChanged();        }         public void addSeparatorItem(final String item) {            mData.add(item);            // save separator position            mSeparatorsSet.add(mData.size() - 1);            notifyDataSetChanged();        }         @Override        public int getItemViewType(int position) {            return mSeparatorsSet.contains(position) ? TYPE_SEPARATOR : TYPE_ITEM;        }         @Override        public int getViewTypeCount() {            return TYPE_MAX_COUNT;        }         @Override        public int getCount() {            return mData.size();        }         @Override        public String getItem(int position) {            return mData.get(position);        }         @Override        public long getItemId(int position) {            return position;        }         @Override        public View getView(int position, View convertView, ViewGroup parent) {            ViewHolder holder = null;            int type = getItemViewType(position);            System.out.println("getView " + position + " " + convertView + " type = " + type);            if (convertView == null) {                holder = new ViewHolder();                switch (type) {                    case TYPE_ITEM:                        convertView = mInflater.inflate(R.layout.item1, null);                        holder.textView = (TextView)convertView.findViewById(R.id.text);                        break;                    case TYPE_SEPARATOR:                        convertView = mInflater.inflate(R.layout.item2, null);                        holder.textView = (TextView)convertView.findViewById(R.id.textSeparator);                        break;                }                convertView.setTag(holder);            } else {                holder = (ViewHolder)convertView.getTag();            }            holder.textView.setText(mData.get(position));            return convertView;        }     }     public static class ViewHolder {        public TextView textView;    }}

 

運行程式，你會看到每4個item一個分割線

看看日誌，無異常，所有的convertView都是空的

 

02-05 15:19:03.080: INFO/System.out(1035): getView 0 null type = 002-05 15:19:03.112: INFO/System.out(1035): getView 1 null type = 002-05 15:19:03.130: INFO/System.out(1035): getView 2 null type = 002-05 15:19:03.141: INFO/System.out(1035): getView 3 null type = 002-05 15:19:03.160: INFO/System.out(1035): getView 4 null type = 102-05 15:19:03.170: INFO/System.out(1035): getView 5 null type = 002-05 15:19:03.180: INFO/System.out(1035): getView 6 null type = 002-05 15:19:03.190: INFO/System.out(1035): getView 7 null type = 002-05 15:19:03.210: INFO/System.out(1035): getView 8 null type = 002-05 15:19:03.210: INFO/System.out(1035): getView 9 null type = 1

滾動list：

02-05 15:19:54.160: INFO/System.out(1035): getView 10 null type = 002-05 15:19:57.440: INFO/System.out(1035): getView 11 android.widget.LinearLayout@43744528 type = 002-05 15:20:01.310: INFO/System.out(1035): getView 12 android.widget.LinearLayout@43744eb0 type = 002-05 15:20:01.880: INFO/System.out(1035): getView 13 android.widget.LinearLayout@437456d8 type = 002-05 15:20:02.869: INFO/System.out(1035): getView 14 null type = 102-05 15:20:06.489: INFO/System.out(1035): getView 15 android.widget.LinearLayout@43745f00 type = 002-05 15:20:07.749: INFO/System.out(1035): getView 16 android.widget.LinearLayout@43747170 type = 002-05 15:20:10.250: INFO/System.out(1035): getView 17 android.widget.LinearLayout@43747998 type = 002-05 15:20:11.661: INFO/System.out(1035): getView 18 android.widget.LinearLayout@437481c0 type = 002-05 15:20:13.180: INFO/System.out(1035): getView 19 android.widget.LinearLayout@437468a0 type = 102-05 15:20:16.900: INFO/System.out(1035): getView 20 android.widget.LinearLayout@437489e8 type = 002-05 15:20:25.690: INFO/System.out(1035): getView 21 android.widget.LinearLayout@4374a8d8 type = 0

convertView對於分割線是空的，直到第一個分割線可見，當其離開螢幕，視圖去到Recycler並且convertView開始起作用。

本文翻譯自http://android.amberfog.com/?p=296

代碼下載：MultipleItemsList.zip – source code