Android 應用開發中,採用ListView組件來展現數據是很經常使用的功能,當一個應用要展示不少的數據時,通常狀況下都不會把全部的數據一次就展現出來,而是經過 分頁的形式來展現數據,我的以爲這樣會有更好的用戶體驗。所以,不少應用都是採用分批次加載的形式來獲取用戶所需的數據。例如:微博客戶端可能會在用戶滑 動至列表底端時自動加載下一頁數據,也可能在底部放置一個"查看更多"按鈕,用戶點擊後,加載下一頁數據。java
下面經過一個Demo來展現ListView功能如何實現:該Demo經過在ListView列表的底部添加一個「查看更多...」按鈕來加載新聞(模擬 新聞客戶端)分頁數據。同時限定每次加載10條記錄,但徹底加載完數據後,就把ListView列表底部視圖「查看更多...」刪除。假設加載的數據總數 爲 38 條記錄。先看下該Demo工程的程序結構圖:android
其中包 com.andyidea.bean中News.java類是新聞實體類,包com.andyidea.listview中 paginationListViewActivity.java類是用來展現ListView列表。佈局layout中包含三個佈局文件,分別 爲:list_item.xml , loadmore.xml , main.xml 。下面分別貼下源碼:app
layout中的 list_item.xml源碼:異步
01 |
< span style = "font-size:13px;" ><? xml version = "1.0" encoding = "utf-8" ?> |
02 |
< LinearLayout |
03 |
xmlns:android = "http://schemas.android.com/apk/res/android" |
04 |
android:layout_width = "fill_parent" |
05 |
android:layout_height = "fill_parent" |
06 |
android:orientation = "vertical" > |
07 |
< TextView |
08 |
android:id = "@+id/newstitle" |
09 |
android:layout_width = "fill_parent" |
10 |
android:layout_height = "wrap_content" /> |
11 |
< TextView |
12 |
android:id = "@+id/newscontent" |
13 |
android:layout_width = "fill_parent" |
14 |
android:layout_height = "wrap_content" /> |
15 |
</ LinearLayout ></ span > |
01 |
<? xml version = "1.0" encoding = "utf-8" ?> |
02 |
< LinearLayout |
03 |
xmlns:android = "http://schemas.android.com/apk/res/android" |
04 |
android:layout_width = "fill_parent" |
05 |
android:layout_height = "fill_parent" > |
06 |
< Button |
07 |
android:id = "@+id/loadMoreButton" |
08 |
android:layout_width = "fill_parent" |
09 |
android:layout_height = "wrap_content" |
10 |
android:text = "查看更多..." /> |
11 |
</ LinearLayout > |
01 |
<? xml version = "1.0" encoding = "utf-8" ?> |
02 |
< LinearLayout xmlns:android = "http://schemas.android.com/apk/res/android" |
03 |
android:orientation = "vertical" |
04 |
android:layout_width = "fill_parent" |
05 |
android:layout_height = "fill_parent" > |
06 |
< ListView |
07 |
android:id = "@+id/lvNews" |
08 |
android:layout_width = "fill_parent" |
09 |
android:layout_height = "wrap_content" /> |
10 |
</LinearLayou |
01 |
package com.andyidea.bean; |
02 |
03 |
/** |
04 |
* 新聞實體類 |
05 |
* @author Andy.Chen |
06 |
* @mail Chenjunjun.ZJ@gmail.com |
07 |
* |
08 |
*/ |
09 |
public class News { |
10 |
|
11 |
private String title; //標題 |
12 |
private String content; //內容 |
13 |
|
14 |
public String getTitle() { |
15 |
return title; |
16 |
} |
17 |
public void setTitle(String title) { |
18 |
this .title = title; |
19 |
} |
20 |
public String getContent() { |
21 |
return content; |
22 |
} |
23 |
public void setContent(String content) { |
24 |
this .content = content; |
25 |
} |
26 |
27 |
} |
001 |
package com.andyidea.listview; |
002 |
003 |
import java.util.ArrayList; |
004 |
import java.util.List; |
005 |
006 |
import com.andyidea.bean.News; |
007 |
008 |
import android.app.Activity; |
009 |
import android.os.Bundle; |
010 |
import android.os.Handler; |
011 |
import android.util.Log; |
012 |
import android.view.View; |
013 |
import android.view.ViewGroup; |
014 |
import android.widget.AbsListView; |
015 |
import android.widget.AbsListView.OnScrollListener; |
016 |
import android.widget.BaseAdapter; |
017 |
import android.widget.Button; |
018 |
import android.widget.ListView; |
019 |
import android.widget.TextView; |
020 |
import android.widget.Toast; |
021 |
022 |
public class PaginationListViewActivity extends Activity implements OnScrollListener { |
023 |
|
024 |
private ListView listView; |
025 |
private int visibleLastIndex = 0 ; //最後的可視項索引 |
026 |
private int visibleItemCount; // 當前窗口可見項總數 |
027 |
private int datasize = 38 ; //模擬數據集的條數 |
028 |
private PaginationAdapter adapter; |
029 |
private View loadMoreView; |
030 |
private Button loadMoreButton; |
031 |
private Handler handler = new Handler(); |
032 |
|
033 |
/** Called when the activity is first created. */ |
034 |
@Override |
035 |
public void onCreate(Bundle savedInstanceState) { |
036 |
super .onCreate(savedInstanceState); |
037 |
setContentView(R.layout.main); |
038 |
|
039 |
loadMoreView = getLayoutInflater().inflate(R.layout.loadmore, null ); |
040 |
loadMoreButton = (Button)loadMoreView.findViewById(R.id.loadMoreButton); |
041 |
loadMoreButton.setOnClickListener( new View.OnClickListener() { |
042 |
|
043 |
@Override |
044 |
public void onClick(View v) { |
045 |
loadMoreButton.setText( "正在加載中..." ); //設置按鈕文字 |
046 |
handler.postDelayed( new Runnable() { |
047 |
|
048 |
@Override |
049 |
public void run() { |
050 |
loadMoreData(); |
051 |
adapter.notifyDataSetChanged(); |
052 |
loadMoreButton.setText( "查看更多..." ); //恢復按鈕文字 |
053 |
} |
054 |
}, 2000 ); |
055 |
|
056 |
} |
057 |
}); |
058 |
|
059 |
listView = (ListView)findViewById(R.id.lvNews); |
060 |
listView.addFooterView(loadMoreView); //設置列表底部視圖 |
061 |
initializeAdapter(); |
062 |
listView.setAdapter(adapter); |
063 |
listView.setOnScrollListener( this ); |
064 |
} |
065 |
|
066 |
@Override |
067 |
public void onScrollStateChanged(AbsListView view, int scrollState) { |
068 |
int itemsLastIndex = adapter.getCount()- 1 ; //數據集最後一項的索引 |
069 |
int lastIndex = itemsLastIndex + 1 ; |
070 |
if (scrollState == OnScrollListener.SCROLL_STATE_IDLE |
071 |
&& visibleLastIndex == lastIndex) { |
072 |
// 若是是自動加載,能夠在這裏放置異步加載數據的代碼 |
073 |
} |
074 |
} |
075 |
076 |
077 |
@Override |
078 |
public void onScroll(AbsListView view, int firstVisibleItem, |
079 |
int visibleItemCount, int totalItemCount) { |
080 |
this .visibleItemCount = visibleItemCount; |
081 |
visibleLastIndex = firstVisibleItem + visibleItemCount - 1 ; |
082 |
|
083 |
Log.e( "========================= " , "========================" ); |
084 |
Log.e( "firstVisibleItem = " ,firstVisibleItem+ "" ); |
085 |
Log.e( "visibleItemCount = " ,visibleItemCount+ "" ); |
086 |
Log.e( "totalItemCount = " ,totalItemCount+ "" ); |
087 |
Log.e( "========================= " , "========================" ); |
088 |
|
089 |
//若是全部的記錄選項等於數據集的條數,則移除列表底部視圖 |
090 |
if (totalItemCount == datasize+ 1 ){ |
091 |
listView.removeFooterView(loadMoreView); |
092 |
Toast.makeText( this , "數據所有加載完!" , Toast.LENGTH_LONG).show(); |
093 |
} |
094 |
} |
095 |
|
096 |
/** |
097 |
* 初始化ListView的適配器 |
098 |
*/ |
099 |
private void initializeAdapter(){ |
100 |
List<News> news = new ArrayList<News>(); |
101 |
for ( int i= 1 ;i<= 10 ;i++){ |
102 |
News items = new News(); |
103 |
items.setTitle( "Title" +i); |
104 |
items.setContent( "This is News Content" +i); |
105 |
news.add(items); |
106 |
} |
107 |
adapter = new PaginationAdapter(news); |
108 |
} |
109 |
|
110 |
/** |
111 |
* 加載更多數據 |
112 |
*/ |
113 |
private void loadMoreData(){ |
114 |
int count = adapter.getCount(); |
115 |
|
116 |
if (count+ 10 <= datasize){ |
117 |
for ( int i=count+ 1 ; i<=count+ 10 ; i++){ |
118 |
News item = new News(); |
119 |
item.setTitle( "Title" +i); |
120 |
item.setContent( "This is News Content" +i); |
121 |
adapter.addNewsItem(item); |
122 |
} |
123 |
} else { |
124 |
for ( int i=count+ 1 ; i<=datasize; i++){ |
125 |
News item = new News(); |
126 |
item.setTitle( "Title" +i); |
127 |
item.setContent( "This is News Content" +i); |
128 |
adapter.addNewsItem(item); |
129 |
} |
130 |
} |
131 |
|
132 |
} |
133 |
|
134 |
|
135 |
class PaginationAdapter extends BaseAdapter{ |
136 |
|
137 |
List<News> newsItems; |
138 |
|
139 |
public PaginationAdapter(List<News> newsitems){ |
140 |
this .newsItems = newsitems; |
141 |
} |
142 |
143 |
@Override |
144 |
public int getCount() { |
145 |
return newsItems.size(); |
146 |
} |
147 |
148 |
@Override |
149 |
public Object getItem( int position) { |
150 |
return newsItems.get(position); |
151 |
} |
152 |
153 |
@Override |
154 |
public long getItemId( int position) { |
155 |
return position; |
156 |
} |
157 |
158 |
@Override |
159 |
public View getView( int position, View view, ViewGroup parent) { |
160 |
if (view == null ){ |
161 |
view = getLayoutInflater().inflate(R.layout.list_item, null ); |
162 |
} |
163 |
|
164 |
//新聞標題 |
165 |
TextView tvTitle = (TextView)view.findViewById(R.id.newstitle); |
166 |
tvTitle.setText(newsItems.get(position).getTitle()); |
167 |
//新聞內容 |
168 |
TextView tvContent = (TextView)view.findViewById(R.id.newscontent); |
169 |
tvContent.setText(newsItems.get(position).getContent()); |
170 |
|
171 |
return view; |
172 |
} |
173 |
|
174 |
/** |
175 |
* 添加數據列表項 |
176 |
* @param newsitem |
177 |
*/ |
178 |
public void addNewsItem(News newsitem){ |
179 |
newsItems.add(newsitem); |
180 |
} |
181 |
|
182 |
} |
183 |
184 |
} |