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我们已经准备好了。下面是运行效果:
我们看此时是没有分页加载的。那么我们还等什么,赶紧进入下一节,实现分页功能。