ListView实现分页加载（一）制作Demo

一、什么是分页加载

在下面的文章中，我们来讲解LitView分页加载的实现。什么是分页加载呢？我们先看几张效果图吧，如下：

效果说明：我们向上滑动ListView的时候，当滑动的最底部， 便会出现正在加载的进度条，当加载完成后，会出现加载后的数据。如此反复，这其实就是ListView的分页加载功能。像这样的工能，实在是太常见了。那么它是怎么实现的呢？

实现原理很简单，本质上，其实就是一个自定义的ListView，加上了底布局（即有进度条的那个布局），然后实现了ListView的OnScrollListener监听而已（即拖动监听）。下面我们就开始一步一步手把手使用模拟的数据来实现这个功能。

二、准备简单的ListView

为了准备模拟的数据，我们先搭建一个简单的普通的ListView出来，因为我们需要这样一个Demo。搭建完成后，我们再将ListView改成我们自定义的ListView，这样子你就能看清楚到底是怎么实现的了。

搭建ListView很简单。首先实现主布局和子项布局。分别如下：

主布局，activity_main.xml，代码如下：

 1 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 2     xmlns:tools="http://schemas.android.com/tools"
 3     android:layout_width="match_parent"
 4     android:layout_height="match_parent"
 5      android:background="#ccffff">
 6
 7     <ListView
 8         android:id= "@+id/list_view"
 9         android:layout_width="match_parent"
10         android:layout_height="match_parent"
11         android:dividerHeight="5dp"
12         android:divider="#00cc00"></ListView>
13 </LinearLayout>

子项布局 item.xml，需要用到一张图片（就是那个刀刀狗），这里读者自行替换为你自己的图片即可。代码如下：

 1 <?xml version="1.0" encoding="utf-8"?>
 2 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
 3     android:layout_width="wrap_content"
 4     android:layout_height="wrap_content"
 5     android:orientation="horizontal" >
 6
 7     <ImageView
 8         android:layout_width="wrap_content"
 9         android:layout_height="wrap_content"
10         android:src="@drawable/me"/>
11
12     <TextView
13         android:id="@+id/text_view"
14         android:layout_width="wrap_content"
15         android:layout_height="wrap_content"
16         android:text="你好，分页加载"
17         android:layout_gravity="center_vertical"
18         android:textSize="20sp"/>
19 </LinearLayout>

好了，布局我们搞定了。下面就开始写MainActivity中的代码吧。代码如下：

 1 package com.fuly.load;
 2
 3 import java.util.ArrayList;
 4 import java.util.List;
 5
 6 import android.os.Bundle;
 7 import android.app.Activity;
 8 import android.widget.ListView;
 9
10 public class MainActivity extends Activity {
11
12     private ListView lv;
13     private List<MyData>  mDatas = new ArrayList<MyData>();
14     private MyAdapter mAdapter;
15
16
17     protected void onCreate(Bundle savedInstanceState) {
18         super.onCreate(savedInstanceState);
19         setContentView(R.layout.activity_main);
20
21         initData();//该方法初始化数据
22         lv = (ListView) findViewById(R.id.list_view);
23         mAdapter = new MyAdapter(this, mDatas);
24         lv.setAdapter(mAdapter);
25
26
27     }
28
29
30     /**
31      * 该方法初始化数据，即提供初始的素材
32      */
33     private void initData() {
34         for(int i = 0;i<12;i++){
35             MyData md = new MyData("你好，我是提前设定的");
36             mDatas.add(md);
37         }
38
39     }
40 }

当然了，少不了我们的实体类（即封装数据的类），MyData.代码如下：

 1 package com.fuly.load;
 2
 3 public class MyData {
 4
 5     private String txt;
 6
 7     public MyData(String txt) {
 8
 9         this.txt = txt;
10     }
11
12     public String getTxt() {
13         return txt;
14     }
15
16     public void setTxt(String txt) {
17         this.txt = txt;
18     }
19 }

然后就是适配器，代码如下：

 1 package com.fuly.load;
 2
 3 import java.util.List;
 4
 5 import android.content.Context;
 6 import android.view.LayoutInflater;
 7 import android.view.View;
 8 import android.view.ViewGroup;
 9 import android.widget.ArrayAdapter;
10 import android.widget.TextView;
11
12 public class MyAdapter extends ArrayAdapter {
13
14     private List<MyData>  Datas;
15     private LayoutInflater inflater;
16
17     public MyAdapter(Context context, List data) {
18         super(context, -1, data);
19         inflater = LayoutInflater.from(context);
20         Datas = data;
21     }
22
23
24     public View getView(int position, View convertView, ViewGroup parent) {
25
26         ViewHolder vh = null;
27
28         if(convertView == null){
29
30             convertView = inflater.inflate(R.layout.item, parent, false);
31             vh = new ViewHolder();
32             vh.tv = (TextView) convertView.findViewById(R.id.text_view);
33
34             convertView.setTag(vh);
35         }else{
36             vh = (ViewHolder) convertView.getTag();
37         }
38
39         vh.tv.setText(Datas.get(position).getTxt());
40
41         return convertView;
42     }
43
44     class ViewHolder{
45
46         TextView tv;
47     }
48 }

好了，ListView的Demo我们已经准备好了。下面是运行效果：

我们看此时是没有分页加载的。那么我们还等什么，赶紧进入下一节，实现分页功能。