1-ListView簡介
在android開發中ListView是比較常用的組件,它以列表的形式展示具體內容,並且能夠根據數據的長度自適應顯示。一個ListView通常有兩個職責。
(1)將數據填充到布局。
(2)處理用戶的選擇點擊等操作。
第一點很好理解,ListView就是實現這個功能的。第二點也不難做到,在后面的學習中讀者會發現,這非常簡單。
一個ListView的創建需要3個元素。
(1)ListView中的每一列的View。
(2)填入View的數據或者圖片等。
(3)連接數據與ListView的適配器。
也就是說,要使用ListView,首先要了解什么是適配器。適配器是一個連接數據和AdapterView(ListView就是一個典型的AdapterView)的橋梁,通過它能有效地實現數據與AdapterView的分離設置,使AdapterView與數據的綁定更加簡便,修改更加方便Android中提供了很多的Adapter,下表出了常用的幾個。
Adapter |
含義 |
ArrayAdapter<T> |
用來綁定一個數組,支持泛型操作 |
SimpleAdapter |
用來綁定在xml中定義的控件對應的數據 |
SimpleCursorAdapter |
用來綁定游標得到的數據 |
BaseAdapter |
通用的基礎適配器 |
其實適配器還有很多,要注意的是,各種Adapter只不過是轉換的方式和能力不一樣而已。
2- ListView的工作原理
ListView中,GridView控件,微調等適配器視圖都只是容器,主要用於裝載要顯示的數據和顯示數據,而Apdater負責提供容器的內容即適配器視圖負責采用合適的方式顯示適配器提供的內容。
在運行時,當需要顯示數據時,ListView中會針對數據項向適配器取出數據,從而加載到界面上。試想下這么一個場景:如果把所有數據集合的信息都加載到視圖上,如果ListView控件要為每個數據都創建一個視圖,
那么會占用非常多的內存從上面可知,ListView控件不會為每一個數據創建一個視圖,為了節省空間和時間,Android的采用了一個叫循環機的組件。
工作原理:當屏幕需要顯示X個項時,那么ListView中只會創建X + 1個視圖,當第一個項目離開屏幕時,此項目的視圖就會被拿來重用(用於顯示下一個項(即第X + 1個)的內容)。
-
工作原理實例
假如屏幕只能顯示7個項目,那么ListView中只會創建(7 + 1)個項目的視圖。當第1個項目離開屏幕時,此項目的視圖就會被拿來重用(用於顯示第8個項目的內容)。原理如下圖顯示
ListView控件的使用
1.生成方式
生成列表視圖(ListView)的方式主要有兩種:
- 直接用ListView進行創建
- 讓活動繼承ListActivity2. xml文件配置信息
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFE1FF" android:orientation="vertical" > <ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
3-適配器視圖(AdapterView)簡介
特征:
- 適配器視圖繼承自ViewGroup中,本質是個容器
- 適配器視圖可以包含多個“列表項”,並將這多個列表項以合適的形式展示
- 適配器視圖顯示的列表項內容由適配器提供
- 它派生的子類在用法上也基本相似,只是在顯示上有一定區別,因此把他們也歸為一類。
- 由適配器視圖直接派生的三個類:AbsListView,AbsSpinner,AdapterViewAnimator。
4.關於適配器
作用:作為視圖和數據之間的橋梁
由於ListView和所要展現的數據是分開的,不直接接觸,所以,Adapter的作用是把數據映射到ListView上,作為中介的作用,如下圖
5-適配器介紹
適配器本身是一個接口,適配器接口及其子類的繼承關系如下圖
-
適配器接口派生了ListAdapter和SpinnerAdapter兩個子接口
其中ListAdapter為AbsAdapter提供列表項,而SpinnerAdapter為AbsSpinner提供列表項
-
ArrayAdapter,SimpleAdapter,SimpleCursorAdapter,BaseAdapter都是常用的實現適配器的類
- ArrayAdapter:簡單,易用的適配器,用於將數組綁定為列表項的數據源,支持泛型操作
- SimpleAdapter:功能強大的適配器,用於將XML中控件綁定為列表項的數據源
- SimpleCursorAdapter:與SimpleAdapter類似,用於綁定游標(直接從數據數取出數據)作為列表項的數據源
- BaseAdapter:可自定義的ListView,通用用於被擴展擴展BaseAdapter可以對各個列表項進行最大程度的定制。
因為自定義ListView時,BaseAdapter常常要被繼承重寫,所以稍微介紹一點關於BaseAdapter擴展的東西
BaseAdapter
定義
自定義的ListView,BaseAdapter通用用於被擴展。擴展BaseAdapter可以對各個列表項進行最大程度的定制
使用步驟:
1.定義主xml布局
2。根據需要定義的ListView每行所實現的XML布局
3。定義一個Adapter類繼承BaseAdapter,重寫里面的方法
4 . 定義一個HashMap構成的列表,將數據以鍵值對的方式存放在里面。
5. 構造Adapter對象,設置適配器。
6. 將LsitView綁定到適配器上。
class MyAdapter extends BaseAdapter { private LayoutInflater mInflater;//得到一個LayoutInfalter對象用來導入布局 //構造函數 public MyAdapter(Context context,ArrayList<HashMap<String, Object>> listItem) { this.mInflater = LayoutInflater.from(context); this.listItem = listItem; }//聲明構造函數 @Override public int getCount() { return listItem.size(); }//這個方法返回了在適配器中所代表的數據集合的條目數 @Override public Object getItem(int position) { return listItem.get(position); }//這個方法返回了數據集合中與指定索引position對應的數據項 @Override public long getItemId(int position) { return position; }//這個方法返回了在列表中與指定索引對應的行id @Override public View getView(int position, View convertView, ViewGroup parent) { return null; }//這個方法返回了指定索引對應的數據項的視圖,還沒寫完 }
講一下BaseAdapter里必須重寫的4個方法
- BaseAdapter的靈活性就在於它要重寫很多方法,其中最重要的即為getView()方法。
- 我們結合上述重寫的4個方法了解下系統-繪制的ListView的原理:
- 當系統開始繪制的ListView的時候,首先調用getCount()方法。得到它的返回值,即ListView中的長度。
- 系統調用getView()方法,根據這個長度逐一繪制的ListView的每一行。(如果讓getCount將()返回1,那么只顯示一行)。
- getItem()時和getItemId()則在需要處理和取得適配器中的數據時調用。
- 那么getView()如何使用呢?如果有10000行數據就繪制萬次?這肯定會極大的消耗資源,導致的ListView滑動非常的慢,那應該怎么做呢?可以使用BaseAdapter進行優化的ListView的顯示。
- 以下將使用3種重寫方法來說明getView()的使用
(1)這種方法每次getView()都要findViewById和重新繪制一個視圖,當列表項數據量很大的時候會嚴重影響性能,造成下拉很慢,所以數據量大的時候不推薦用這種方式
以上是組件相關的背景知識。 基本的使用,不做贅述。
@Override public View getView(int position, View convertView, ViewGroup parent) { View item = mInflater.inflate(R.layout.item,null); ImageView img = (ImageView)item.findViewById(R.id.ItemImage); TextView title = (TextView)item.findViewById(R.id.ItemTitle); TextView test = (TextView)item.findViewById(R.id.ItemText); Button btn = (Button) item.findViewById(R.id.ItemBottom); img.setImageResource((Integer) listItem.get(position).get("ItemImage")); title.setText((String) listItem.get(position).get("ItemTitle")); test.setText((String) listItem.get(position).get("ItemText")); return item; }//這個方法返回了指定索引對應的數據項的視圖
(2)使用convertView作為緩存進行優化
getView()返回值是一個視圖,把它作為輸入參數並放到getView()輸入參數里,形成反饋這樣就形成了適配器的ItemView控件重用機制,減少了重繪查看的次數。這種方法和第一種相比減少了重繪查看的次數,但是還是每一次都要findViewById
@Override public View getView(int position, View convertView, ViewGroup parent) { if(convertView == null) { convertView = mInflater.inflate(R.layout.item, null); }//檢測有沒有可以重用的View,沒有就重新繪制 ImageView img = (ImageView)convertView.findViewById(R.id.ItemImage); TextView title = (TextView)convertView.findViewById(R.id.ItemTitle); TextView test = (TextView)convertView.findViewById(R.id.ItemText); Button btn = (Button) convertView.findViewById(R.id.ItemBottom); img.setImageResource((Integer) listItem.get(position).get("ItemImage")); title.setText((String) listItem.get(position).get("ItemTitle")); test.setText((String) listItem.get(position).get("ItemText")); return convertView; }//這個方法返回了指定索引對應的數據項的視圖
(3)通過convertView + ViewHolder來實現緩存進而進行優化
convertView緩存了查看,ViewHolder相當於更加具體的緩存:查看里的組件,即把搜索和瀏覽的組件一並進行緩存,那么重用查看的時候就不用再重繪查看和瀏覽的組件(findViewById)
這種方法就既減少了重繪視圖,又減少了findViewById的次數,所以這種方法是最能節省資源的,所以非常推薦大家使用通過convertView + ViewHolder來重寫getView()
static class ViewHolder { public ImageView img; public TextView title; public TextView text; public Button btn; }//聲明一個外部靜態類 @Override public View getView(int position, View convertView, ViewGroup parent) { ViewHolder holder ; if(convertView == null) { holder = new ViewHolder(); convertView = mInflater.inflate(R.layout.item, null); holder.img = (ImageView)convertView.findViewById(R.id.ItemImage); holder.title = (TextView)convertView.findViewById(R.id.ItemTitle); holder.text = (TextView)convertView.findViewById(R.id.ItemText); holder.btn = (Button) convertView.findViewById(R.id.ItemBottom); convertView.setTag(holder); } else { holder = (ViewHolder)convertView.getTag(); } holder.img.setImageResource((Integer) listItem.get(position).get("ItemImage")); holder.title.setText((String) listItem.get(position).get("ItemTitle")); holder.text.setText((String) listItem.get(position).get("ItemText")); return convertView; }//這個方法返回了指定索引對應的數據項的視圖
利用convertView + ViewHolder來重寫getView()的實現BaseAdapter的具體實現代碼:
1-主xml布局
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#FFFFFF" android:orientation="vertical" > <ListView android:id="@+id/listView1" android:layout_width="match_parent" android:layout_height="match_parent" /> </LinearLayout>
2-ListView每行所實現的xml布局(item布局)
<?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"> <ImageView android:layout_alignParentRight="true" android:layout_width="wrap_content" android:layout_height="wrap_content" android:id="@+id/ItemImage"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="按鈕" android:id="@+id/ItemBottom" android:focusable="false" android:layout_toLeftOf="@+id/ItemImage" /> <TextView android:id="@+id/ItemTitle" android:layout_height="wrap_content" android:layout_width="fill_parent" android:textSize="20sp"/> <TextView android:id="@+id/ItemText" android:layout_height="wrap_content" android:layout_width="fill_parent" android:layout_below="@+id/ItemTitle"/> </RelativeLayout>
3-定義一個適配器類繼承BaseAdapter,重寫里面的方法。 (利用convertView + ViewHolder來重寫getView())
package scut.learnlistview; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import android.widget.Button; import android.widget.ImageView; import android.widget.TextView; import java.util.ArrayList; import java.util.HashMap; class MyAdapter extends BaseAdapter { private LayoutInflater mInflater;//得到一個LayoutInfalter對象用來導入布局 ArrayList<HashMap<String, Object>> listItem; public MyAdapter(Context context,ArrayList<HashMap<String, Object>> listItem) { this.mInflater = LayoutInflater.from(context); this.listItem = listItem; }//聲明構造函數 @Override public int getCount() { return listItem.size(); }//這個方法返回了在適配器中所代表的數據集合的條目數 @Override public Object getItem(int position) { return listItem.get(position); }//這個方法返回了數據集合中與指定索引position對應的數據項 @Override public long getItemId(int position) { return position; }//這個方法返回了在列表中與指定索引對應的行id //利用convertView+ViewHolder來重寫getView() static class ViewHolder { public ImageView img; public TextView title; public TextView text; public Button btn; }//聲明一個外部靜態類 @Override public View getView(final int position, View convertView, final ViewGroup parent) { ViewHolder holder ; if(convertView == null) { holder = new ViewHolder(); convertView = mInflater.inflate(R.layout.item, null); holder.img = (ImageView)convertView.findViewById(R.id.ItemImage); holder.title = (TextView)convertView.findViewById(R.id.ItemTitle); holder.text = (TextView)convertView.findViewById(R.id.ItemText); holder.btn = (Button) convertView.findViewById(R.id.ItemBottom); convertView.setTag(holder); } else { holder = (ViewHolder)convertView.getTag(); } holder.img.setImageResource((Integer) listItem.get(position).get("ItemImage")); holder.title.setText((String) listItem.get(position).get("ItemTitle")); holder.text.setText((String) listItem.get(position).get("ItemText")); holder.btn.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View v) { System.out.println("你點擊了選項"+position);//bottom會覆蓋item的焦點,所以要在xml里面配置android:focusable="false" } }); return convertView; }//這個方法返回了指定索引對應的數據項的視圖 }
4-在MainActivity里: - 定義一個HashMap構成的列表,將數據以鍵值對的方式存放在里面。 - 構造Adapter對象,設置適配器。 - 將LsitView綁定到Adapter上。
package scut.learnlistview; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.view.View; import android.widget.AdapterView; import android.widget.ArrayAdapter; import android.widget.ListView; import android.widget.SimpleAdapter; import java.util.ArrayList; import java.util.HashMap; import java.util.List; public class MainActivity extends AppCompatActivity { private ListView lv; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); lv = (ListView) findViewById(R.id.listView1); /*定義一個以HashMap為內容的動態數組*/ ArrayList<HashMap<String, Object>> listItem = new ArrayList<HashMap<String, Object>>();/*在數組中存放數據*/ for (int i = 0; i < 100; i++) { HashMap<String, Object> map = new HashMap<String, Object>(); map.put("ItemImage", R.mipmap.ic_launcher);//加入圖片 map.put("ItemTitle", "第" + i + "行"); map.put("ItemText", "這是第" + i + "行"); listItem.add(map); } MyAdapter adapter = new MyAdapter(this, listItem); lv.setAdapter(adapter);//為ListView綁定適配器 lv.setOnItemClickListener(new AdapterView.OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int arg2, long arg3) { System.out.println("你點擊了第" + arg2 + "行");//設置系統輸出點擊的行 } }); } }
以上是比較傳統慣用的寫法,為了提高復用性
- 抽取ViewHolder,作為公共的類。
- 將Adapter封裝成CommonAdapter,作為公共的類
(1)activity_main.xml:
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <ListView android:id="@+id/listView" android:layout_width="match_parent" android:layout_height="match_parent"></ListView> </RelativeLayout>
(2)item_listview.xml.xml:(ListView中單個item的布局)
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp"> <TextView android:id="@+id/titleTv" android:layout_width="wrap_content" android:layout_height="wrap_content" android:singleLine="true" android:text="Android新技能" android:textColor="#444" android:textSize="16sp" /> <TextView android:id="@+id/descTv" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_below="@+id/titleTv" android:layout_marginTop="10dp" android:maxLines="2" android:minLines="1" android:text="Android為ListView和GridView打造萬能適配器" android:textColor="#898989" android:textSize="16sp" /> <TextView android:id="@+id/timeTv" android:paddingTop="3dp" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/descTv" android:layout_marginTop="10dp" android:text="2015-05-04" android:textColor="#898989" android:textSize="12sp" /> <TextView android:padding="2dp" android:id="@+id/phoneTv" android:gravity="center" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/descTv" android:layout_marginTop="10dp" android:background="#2ED667" android:drawableLeft="@mipmap/phone" android:drawablePadding="5dp" android:text="10086" android:textColor="#ffffff" android:textSize="12sp" android:layout_alignParentRight="true" /> </RelativeLayout>
(3)Bean.java:數據集
package com.smyhvae.baseadapter.entities; public class Bean { private String title; private String desc; private String time; private String phone; public Bean() { } public Bean(String title, String desc, String time, String phone) { this.title = title; this.desc = desc; this.time = time; this.phone = phone; } public String getTitle() { return title; } public void setTitle(String title) { this.title = title; } public String getDesc() { return desc; } public void setDesc(String desc) { this.desc = desc; } public String getTime() { return time; } public void setTime(String time) { this.time = time; } public String getPhone() { return phone; } public void setPhone(String phone) { this.phone = phone; } }
(4)【可復用的代碼】ViewHolder.java:
package com.smyhvae.baseadapter.utils; import android.content.Context; import android.util.SparseArray; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; public class ViewHolder { private SparseArray<View> mViews; private int mPosition; private View mConvertView; public ViewHolder(Context context, ViewGroup parent, int layoutId, int position) { this.mPosition = position; this.mViews = new SparseArray<View>(); mConvertView = LayoutInflater.from(context).inflate(layoutId, parent, false); mConvertView.setTag(this); } public static ViewHolder get(Context context, View convertView, ViewGroup parent, int layoutId, int position) { if (convertView == null) { return new ViewHolder(context, parent, layoutId, position); } else { ViewHolder holder = (ViewHolder) convertView.getTag(); holder.mPosition = position; //即使ViewHolder是復用的,但是position記得更新一下 return holder; } } /* 通過viewId獲取控件 */ //使用的是泛型T,返回的是View的子類 public <T extends View> T getView(int viewId) { View view = mViews.get(viewId); if (view == null) { view = mConvertView.findViewById(viewId); mViews.put(viewId, view); } return (T) view; } public View getConvertView() { return mConvertView; } }
(5)【可復用的代碼】ListViewAdapter.java:自定義的通用適配器,繼承自BaseAdapter。以后如果是自定義ListView的adapter,繼承它就行了
package com.smyhvae.baseadapter.utils; import android.content.Context; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.BaseAdapter; import java.util.List; /** * 通用的ListView的BaseAdapter,所有的ListView的自定義adapter都可以繼承這個類哦 */ public abstract class ListViewAdapter<T> extends BaseAdapter { //為了讓子類訪問,於是將屬性設置為protected protected Context mContext; protected List<T> mDatas; protected LayoutInflater mInflater; private int layoutId; //不同的ListView的item布局肯能不同,所以要把布局單獨提取出來 public ListViewAdapter(Context context, List<T> datas, int layoutId) { this.mContext = context; mInflater = LayoutInflater.from(context); this.mDatas = datas; this.layoutId = layoutId; } @Override public int getCount() { return mDatas.size(); } @Override public T getItem(int position) { return mDatas.get(position); } @Override public long getItemId(int position) { return position; } @Override public View getView(int position, View convertView, ViewGroup parent) { //初始化ViewHolder,使用通用的ViewHolder,一行代碼就搞定ViewHolder的初始化咯 ViewHolder holder = ViewHolder.get(mContext, convertView, parent, layoutId, position);//layoutId就是單個item的布局 convert(holder, getItem(position)); return holder.getConvertView(); //這一行的代碼要注意了 } //將convert方法公布出去 public abstract void convert(ViewHolder holder, T t); }
(6)ListViewAdapterWithViewHolder.java:繼承自ListViewAdapter
package com.smyhvae.baseadapter; import android.content.Context; import android.widget.TextView; import com.smyhvae.baseadapter.entities.Bean; import com.smyhvae.baseadapter.utils.ListViewAdapter; import com.smyhvae.baseadapter.utils.ViewHolder; import java.util.List; public class ListViewAdapterWithViewHolder extends ListViewAdapter<Bean> { //MyAdapter需要一個Context,通過Context獲得Layout.inflater,然后通過inflater加載item的布局 public ListViewAdapterWithViewHolder(Context context, List<Bean> datas) { super(context, datas, R.layout.item_listview); } @Override public void convert(ViewHolder holder, Bean bean) { ((TextView) holder.getView(R.id.titleTv)).setText(bean.getTitle()); ((TextView) holder.getView(R.id.descTv)).setText(bean.getDesc()); ((TextView) holder.getView(R.id.timeTv)).setText(bean.getTime()); ((TextView) holder.getView(R.id.phoneTv)).setText(bean.getPhone()); /* TextView tv = holder.getView(R.id.titleTv); tv.setText(...); ImageView view = getView(viewId); Imageloader.getInstance().loadImag(view.url); */ } }
(7)MainActivity.java:
package com.smyhvae.baseadapter; import android.app.Activity; import android.os.Bundle; import android.widget.ListView; import com.smyhvae.baseadapter.entities.Bean; import java.util.ArrayList; import java.util.List; public class MainActivity extends Activity { private ListView listView; private List<Bean> mDatas; private ListViewAdapterWithViewHolder listViewAdapterWithViewHolder; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); initView(); initData(); } //方法:初始化View private void initView() { listView = (ListView) findViewById(R.id.listView); } //方法;初始化Data private void initData() { mDatas = new ArrayList<Bean>(); //將數據裝到集合中去 Bean bean = new Bean("Android新技能1", "Android為ListView和GridView打造萬能適配器", "2015-05-04", "10086"); mDatas.add(bean); bean = new Bean("Android新技能2", "Android為ListView和GridView打造萬能適配器", "2015-05-04", "10086"); mDatas.add(bean); bean = new Bean("Android新技能3", "Android為ListView和GridView打造萬能適配器", "2015-05-04", "10086"); mDatas.add(bean); bean = new Bean("Android新技能4", "Android為ListView和GridView打造萬能適配器", "2015-05-04", "10086"); mDatas.add(bean); //為數據綁定適配器 listViewAdapterWithViewHolder = new ListViewAdapterWithViewHolder(this, mDatas); listView.setAdapter(listViewAdapterWithViewHolder); } }
好,結束。