ListView實現分頁加載（一）制作Demo

 

一、什么是分頁加載

 

 

      在下面的文章中，我們來講解LitView分頁加載的實現。什么是分頁加載呢？我們先看幾張效果圖吧，如下：

 

                                       

                                     

 

      效果說明：我們向上滑動ListView的時候，當滑動的最底部， 便會出現正在加載的進度條，當加載完成后，會出現加載后的數據。如此反復，這其實就是ListView的分頁加載功能。像這樣的工能，實在是太常見了。那么它是怎么實現的呢？

 

      實現原理很簡單，本質上，其實就是一個自定義的ListView，加上了底布局（即有進度條的那個布局），然后實現了ListView的OnScrollListener監聽而已（即拖動監聽）。下面我們就開始一步一步手把手使用模擬的數據來實現這個功能。

 

二、准備簡單的ListView

      為了准備模擬的數據，我們先搭建一個簡單的普通的ListView出來，因為我們需要這樣一個Demo。搭建完成后，我們再將ListView改成我們自定義的ListView，這樣子你就能看清楚到底是怎么實現的了。

 

    搭建ListView很簡單。首先實現主布局和子項布局。分別如下：

    主布局，activity_main.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="#ccffff">
     
    <ListView
        android:id= "@+id/list_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:dividerHeight="5dp"
        android:divider="#00cc00"></ListView>
</LinearLayout>

    子項布局 item.xml，需要用到一張圖片（就是那個刀刀狗），這里讀者自行替換為你自己的圖片即可。代碼如下：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    
    <ImageView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/me"/>
    
    <TextView 
        android:id="@+id/text_view"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="你好，分頁加載"
        android:layout_gravity="center_vertical"
        android:textSize="20sp"/>
</LinearLayout>

    好了，布局我們搞定了。下面就開始寫MainActivity中的代碼吧。代碼如下：

package com.fuly.load;

import java.util.ArrayList;
import java.util.List;

import android.os.Bundle;
import android.app.Activity;
import android.widget.ListView;

public class MainActivity extends Activity {
    
    private ListView lv;
    private List<MyData>  mDatas = new ArrayList<MyData>();
    private MyAdapter mAdapter;


    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
        initData();//該方法初始化數據
        lv = (ListView) findViewById(R.id.list_view);
        mAdapter = new MyAdapter(this, mDatas);
        lv.setAdapter(mAdapter);
        
        
    }


    /**
     * 該方法初始化數據，即提供初始的素材
     */
    private void initData() {
        for(int i = 0;i<12;i++){
            MyData md = new MyData("你好，我是提前設定的");
            mDatas.add(md);
        }
        
    }
}

    當然了，少不了我們的實體類（即封裝數據的類），MyData.代碼如下：

package com.fuly.load;

public class MyData {
    
    private String txt;

    public MyData(String txt) {

        this.txt = txt;
    }

    public String getTxt() {
        return txt;
    }

    public void setTxt(String txt) {
        this.txt = txt;
    }
}

    然后就是適配器，代碼如下：

package com.fuly.load;

import java.util.List;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.TextView;

public class MyAdapter extends ArrayAdapter {
    
    private List<MyData>  Datas;
    private LayoutInflater inflater;

    public MyAdapter(Context context, List data) {
        super(context, -1, data);
        inflater = LayoutInflater.from(context);
        Datas = data;
    }
    

    public View getView(int position, View convertView, ViewGroup parent) {
        
        ViewHolder vh = null;
        
        if(convertView == null){
            
            convertView = inflater.inflate(R.layout.item, parent, false);
            vh = new ViewHolder();
            vh.tv = (TextView) convertView.findViewById(R.id.text_view);
            
            convertView.setTag(vh);
        }else{
            vh = (ViewHolder) convertView.getTag();
        }
        
        vh.tv.setText(Datas.get(position).getTxt());
        
        return convertView;
    }
    
    class ViewHolder{
        
        TextView tv;
    }
}

    好了，ListView的Demo我們已經准備好了。下面是運行效果：

                                                 

    我們看此時是沒有分頁加載的。那么我們還等什么，趕緊進入下一節，實現分頁功能。