2. 程式人生 > >ListView下拉重新整理，上拉自動載入更多

ListView下拉重新整理，上拉自動載入更多

阿新 • • 發佈：2018-12-31

更新2016-2-19

程式碼下載地址已經更新。因為程式碼很久沒更新，已經很落伍了，建議大家使用RecyclerView實現。

參考專案：

https://github.com/bingoogolapple/BGARefreshLayout-Android

https://github.com/baoyongzhang/android-PullRefreshLayout

下拉重新整理，Android中非常普遍的功能。為了方便便重寫的ListView來實現下拉重新整理，同時添加了上拉自動載入更多的功能。設計最初是參考開源中國的Android客戶端原始碼。先看示例圖。

        

                                                  圖1                                                                                                             圖2

        

                                                  圖3                                                                                                            圖4

         

                                                  圖5                                                                                                       圖6

下拉重新整理的時動畫效果: 圖1 ==》 圖2 ==》 圖3 ==》 圖4 ==》 圖1。

上拉自動載入更多的效果：圖5

圖6是示例demo的截圖

重寫後的listview動畫效果來源於新增的頭部（header）和尾部（footer），listview提供了addHeaderView和addFooterView方法來新增header和footer。大家也可以通過修改頭部、尾部的xml檔案來定義自己的動畫效果。

實現原理

1.下拉重新整理

通過onTouchEvent判斷手勢，來改變listview的header。header的狀態共4種，自己定義為：

NONE（對應圖1）：初始狀態

PULL（對應圖2）：下拉狀態，此時鬆開會還原到狀態NONE，並不進行重新整理

RELEASE（對應圖3）：同樣是下拉狀態，但此刻鬆開會執行重新整理，進入狀態REFRESHING

REFRESHING（對應圖4）：正在執行重新整理，重新整理結束後進入狀態NONE。

header在四種狀態切換時不僅改變內部元件，同時改變自身的大小。改變內部元件的體現比如，箭頭的朝上或者朝下，文字提示的變化，等待圓圈的顯示與否。大小的改變其實就是高度的改變，NONE時header高度為0,RELEASE時header的高度由你下拉的程度決定。

2.載入更多

在listview滑動停止後，判斷listview的最後一個item是否已經顯示，如果顯示說明listview已經滑動到了最底部，這時便觸發載入更多的方法，方法結束根據結果改變footer。

3.回撥方法

在類中定義了兩個介面OnRefreshListener和OnLoadListener，用來定義和提供載入資料的方法，具體實現則交給它們的實現類去做。

示例程式碼

AutoListView.java

package com.example.autolistview.widget;

import com.example.autolistview.R;
import com.example.autolistview.utils.Utils;

import android.content.Context;
import android.util.AttributeSet;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.ViewGroup;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.widget.AbsListView;
import android.widget.ImageView;
import android.widget.ProgressBar;
import android.widget.TextView;
import android.widget.AbsListView.OnScrollListener;
import android.widget.ListView;

/**
 * @author SunnyCoffee
 * @create 2013-10-24
 * @version 1.0
 * @desc 自定義Listview　下拉重新整理,上拉載入更多
 */

public class AutoListView extends ListView implements OnScrollListener {

	// 區分當前操作是重新整理還是載入
	public static final int REFRESH = 0;
	public static final int LOAD = 1;

	// 區分PULL和RELEASE的距離的大小
	private static final int SPACE = 20;

	// 定義header的四種狀態和當前狀態
	private static final int NONE = 0;
	private static final int PULL = 1;
	private static final int RELEASE = 2;
	private static final int REFRESHING = 3;
	private int state;

	private LayoutInflater inflater;
	private View header;
	private View footer;
	private TextView tip;
	private TextView lastUpdate;
	private ImageView arrow;
	private ProgressBar refreshing;

	private TextView noData;
	private TextView loadFull;
	private TextView more;
	private ProgressBar loading;

	private RotateAnimation animation;
	private RotateAnimation reverseAnimation;

	private int startY;

	private int firstVisibleItem;
	private int scrollState;
	private int headerContentInitialHeight;
	private int headerContentHeight;

	// 只有在listview第一個item顯示的時候（listview滑到了頂部）才進行下拉重新整理， 否則此時的下拉只是滑動listview
	private boolean isRecorded;
	private boolean isLoading;// 判斷是否正在載入
	private boolean loadEnable = true;// 開啟或者關閉載入更多功能
	private boolean isLoadFull;
	private int pageSize = 10;

	private OnRefreshListener onRefreshListener;
	private OnLoadListener onLoadListener;

	public AutoListView(Context context) {
		super(context);
		initView(context);
	}

	public AutoListView(Context context, AttributeSet attrs) {
		super(context, attrs);
		initView(context);
	}

	public AutoListView(Context context, AttributeSet attrs, int defStyle) {
		super(context, attrs, defStyle);
		initView(context);
	}

	// 下拉重新整理監聽
	public void setOnRefreshListener(OnRefreshListener onRefreshListener) {
		this.onRefreshListener = onRefreshListener;
	}

	// 載入更多監聽
	public void setOnLoadListener(OnLoadListener onLoadListener) {
		this.loadEnable = true;
		this.onLoadListener = onLoadListener;
	}

	public boolean isLoadEnable() {
		return loadEnable;
	}

	// 這裡的開啟或者關閉載入更多，並不支援動態調整
	public void setLoadEnable(boolean loadEnable) {
		this.loadEnable = loadEnable;
		this.removeFooterView(footer);
	}

	public int getPageSize() {
		return pageSize;
	}

	public void setPageSize(int pageSize) {
		this.pageSize = pageSize;
	}

	// 初始化元件
	private void initView(Context context) {

		// 設定箭頭特效
		animation = new RotateAnimation(0, -180,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f);
		animation.setInterpolator(new LinearInterpolator());
		animation.setDuration(100);
		animation.setFillAfter(true);

		reverseAnimation = new RotateAnimation(-180, 0,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f);
		reverseAnimation.setInterpolator(new LinearInterpolator());
		reverseAnimation.setDuration(100);
		reverseAnimation.setFillAfter(true);

		inflater = LayoutInflater.from(context);
		footer = inflater.inflate(R.layout.listview_footer, null);
		loadFull = (TextView) footer.findViewById(R.id.loadFull);
		noData = (TextView) footer.findViewById(R.id.noData);
		more = (TextView) footer.findViewById(R.id.more);
		loading = (ProgressBar) footer.findViewById(R.id.loading);

		header = inflater.inflate(R.layout.pull_to_refresh_header, null);
		arrow = (ImageView) header.findViewById(R.id.arrow);
		tip = (TextView) header.findViewById(R.id.tip);
		lastUpdate = (TextView) header.findViewById(R.id.lastUpdate);
		refreshing = (ProgressBar) header.findViewById(R.id.refreshing);

		// 為listview新增頭部和尾部，並進行初始化
		headerContentInitialHeight = header.getPaddingTop();
		measureView(header);
		headerContentHeight = header.getMeasuredHeight();
		topPadding(-headerContentHeight);
		this.addHeaderView(header);
		this.addFooterView(footer);
		this.setOnScrollListener(this);
	}

	public void onRefresh() {
		if (onRefreshListener != null) {
			onRefreshListener.onRefresh();
		}
	}

	public void onLoad() {
		if (onLoadListener != null) {
			onLoadListener.onLoad();
		}
	}

	public void onRefreshComplete(String updateTime) {
		lastUpdate.setText(this.getContext().getString(R.string.lastUpdateTime,
				lastUpdate));
		state = NONE;
		refreshHeaderViewByState();
	}

	// 用於下拉重新整理結束後的回撥
	public void onRefreshComplete() {
		String currentTime = Utils.getCurrentTime();
		onRefreshComplete(currentTime);
	}

	// 用於載入更多結束後的回撥
	public void onLoadComplete() {
		isLoading = false;
	}

	@Override
	public void onScroll(AbsListView view, int firstVisibleItem,
			int visibleItemCount, int totalItemCount) {
		this.firstVisibleItem = firstVisibleItem;
	}

	@Override
	public void onScrollStateChanged(AbsListView view, int scrollState) {
		this.scrollState = scrollState;
		ifNeedLoad(view, scrollState);
	}

	// 根據listview滑動的狀態判斷是否需要載入更多
	private void ifNeedLoad(AbsListView view, int scrollState) {
		if (!loadEnable) {
			return;
		}
		try {
			if (scrollState == OnScrollListener.SCROLL_STATE_IDLE
					&& !isLoading
					&& view.getLastVisiblePosition() == view
							.getPositionForView(footer) && !isLoadFull) {
				onLoad();
				isLoading = true;
			}
		} catch (Exception e) {
		}
	}

	/**
	 * 監聽觸控事件，解讀手勢
	 */
	@Override
	public boolean onTouchEvent(MotionEvent ev) {
		switch (ev.getAction()) {
		case MotionEvent.ACTION_DOWN:
			if (firstVisibleItem == 0) {
				isRecorded = true;
				startY = (int) ev.getY();
			}
			break;
		case MotionEvent.ACTION_CANCEL:
		case MotionEvent.ACTION_UP:
			if (state == PULL) {
				state = NONE;
				refreshHeaderViewByState();
			} else if (state == RELEASE) {
				state = REFRESHING;
				refreshHeaderViewByState();
				onRefresh();
			}
			isRecorded = false;
			break;
		case MotionEvent.ACTION_MOVE:
			whenMove(ev);
			break;
		}
		return super.onTouchEvent(ev);
	}

	// 解讀手勢，重新整理header狀態
	private void whenMove(MotionEvent ev) {
		if (!isRecorded) {
			return;
		}
		int tmpY = (int) ev.getY();
		int space = tmpY - startY;
		int topPadding = space - headerContentHeight;
		switch (state) {
		case NONE:
			if (space > 0) {
				state = PULL;
				refreshHeaderViewByState();
			}
			break;
		case PULL:
			topPadding(topPadding);
			if (scrollState == SCROLL_STATE_TOUCH_SCROLL
					&& space > headerContentHeight + SPACE) {
				state = RELEASE;
				refreshHeaderViewByState();
			}
			break;
		case RELEASE:
			topPadding(topPadding);
			if (space > 0 && space < headerContentHeight + SPACE) {
				state = PULL;
				refreshHeaderViewByState();
			} else if (space <= 0) {
				state = NONE;
				refreshHeaderViewByState();
			}
			break;
		}

	}

	// 調整header的大小。其實調整的只是距離頂部的高度。
	private void topPadding(int topPadding) {
		header.setPadding(header.getPaddingLeft(), topPadding,
				header.getPaddingRight(), header.getPaddingBottom());
		header.invalidate();
	}

	/**
	 * 這個方法是根據結果的大小來決定footer顯示的。
	 * <p>
	 * 這裡假定每次請求的條數為10。如果請求到了10條。則認為還有資料。如過結果不足10條，則認為資料已經全部載入，這時footer顯示已經全部載入
	 * </p>
	 * 
	 * @param resultSize
	 */
	public void setResultSize(int resultSize) {
		if (resultSize == 0) {
			isLoadFull = true;
			loadFull.setVisibility(View.GONE);
			loading.setVisibility(View.GONE);
			more.setVisibility(View.GONE);
			noData.setVisibility(View.VISIBLE);
		} else if (resultSize > 0 && resultSize < pageSize) {
			isLoadFull = true;
			loadFull.setVisibility(View.VISIBLE);
			loading.setVisibility(View.GONE);
			more.setVisibility(View.GONE);
			noData.setVisibility(View.GONE);
		} else if (resultSize == pageSize) {
			isLoadFull = false;
			loadFull.setVisibility(View.GONE);
			loading.setVisibility(View.VISIBLE);
			more.setVisibility(View.VISIBLE);
			noData.setVisibility(View.GONE);
		}

	}

	// 根據當前狀態，調整header
	private void refreshHeaderViewByState() {
		switch (state) {
		case NONE:
			topPadding(-headerContentHeight);
			tip.setText(R.string.pull_to_refresh);
			refreshing.setVisibility(View.GONE);
			arrow.clearAnimation();
			arrow.setImageResource(R.drawable.pull_to_refresh_arrow);
			break;
		case PULL:
			arrow.setVisibility(View.VISIBLE);
			tip.setVisibility(View.VISIBLE);
			lastUpdate.setVisibility(View.VISIBLE);
			refreshing.setVisibility(View.GONE);
			tip.setText(R.string.pull_to_refresh);
			arrow.clearAnimation();
			arrow.setAnimation(reverseAnimation);
			break;
		case RELEASE:
			arrow.setVisibility(View.VISIBLE);
			tip.setVisibility(View.VISIBLE);
			lastUpdate.setVisibility(View.VISIBLE);
			refreshing.setVisibility(View.GONE);
			tip.setText(R.string.pull_to_refresh);
			tip.setText(R.string.release_to_refresh);
			arrow.clearAnimation();
			arrow.setAnimation(animation);
			break;
		case REFRESHING:
			topPadding(headerContentInitialHeight);
			refreshing.setVisibility(View.VISIBLE);
			arrow.clearAnimation();
			arrow.setVisibility(View.GONE);
			tip.setVisibility(View.GONE);
			lastUpdate.setVisibility(View.GONE);
			break;
		}
	}

	// 用來計算header大小的。比較隱晦。
	private void measureView(View child) {
		ViewGroup.LayoutParams p = child.getLayoutParams();
		if (p == null) {
			p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.MATCH_PARENT,
					ViewGroup.LayoutParams.WRAP_CONTENT);
		}
		int childWidthSpec = ViewGroup.getChildMeasureSpec(0, 0 + 0, p.width);
		int lpHeight = p.height;
		int childHeightSpec;
		if (lpHeight > 0) {
			childHeightSpec = MeasureSpec.makeMeasureSpec(lpHeight,
					MeasureSpec.EXACTLY);
		} else {
			childHeightSpec = MeasureSpec.makeMeasureSpec(0,
					MeasureSpec.UNSPECIFIED);
		}
		child.measure(childWidthSpec, childHeightSpec);
	}

	/*
	 * 定義下拉重新整理介面
	 */
	public interface OnRefreshListener {
		public void onRefresh();
	}

	/*
	 * 定義載入更多介面
	 */
	public interface OnLoadListener {
		public void onLoad();
	}

}

這個類的邏輯複雜的地方就是header四種狀態的判斷和切換。

以下是幾種狀態的切換情況

NONE   ==》 PULL

NONE 《==   PULL   ==》 RELEASE

PULL 《==   RELEASE   ==》 REFRESHING

REFRESHING   ==》 NONE

程式碼中對於 RELEASE  ==》PULL 狀態的切換處理的不太理想，好像是縱座標的記錄方式有問題，如果有誰解決，希望能夠留言告知。

為了減少篇幅，其他程式碼就不在貼了。

注意：定義header的xml最外層必須使用線性佈局，不然的話會出錯。

測試程式碼：點選下載（eclipse工程專案，編碼UTF-8）。由於程式碼涉及公司專案，所以提供的demo是自己新寫的。如圖6所示。

本篇會持續更新。

相關推薦

ListView下拉重新整理，上拉自動載入更多

更新2016-2-19 程式碼下載地址已經更新。因為程式碼很久沒更新，已經很落伍了，建議大家使用RecyclerView實現。 參考專案： https://github.com/bingoogolapple/BGARefreshLayout-Android https://

Android ListView 下拉重新整理，上拉載入更多，帶動畫 自定義控制元件

之前每次 專案中用到ListView 的 下拉重新整理 以及上拉分頁載入 都是 用的 網上 下載 的 類庫， 使用起來 諸多不便 ，於是 趁著有空 ，自己封裝了ListView 讓其 實現 下拉重新整理，以及分頁載入功能。 以下是 效果圖： 當 滑動到 ListView 頂

再也不用擔心下拉重新整理，上拉載入啦！-自定義ListView對上拉重新整理，上拉載入的詳解

前言：       看過許多下拉重新整理的例子，好多大牛們的程式碼寫的很完美，讓人羨慕嫉妒恨~~~，可是，對於下拉重新整理時的手勢操作卻沒有給出詳細的解釋，當一堆堆邏輯程式碼出來的時候，對於我們這些菜鳥來說，理解起來真是讓人腦子都大了。為了解放大腦（懶得自己進行全面分析），

LIstView多條目展示+XListView下拉重新整理，上拉載入

簡單的一個listView展示網路上的資原始檔，並使用XListView第三方控制元件。下面進行簡單的程式碼展示。 使用XListView要先把原始碼匯入,包括XListView，XListViewFooter，XListViewHeader 還有三個佈局檔

Android自定義控制元件（一） 下拉重新整理，上拉分頁載入更多(支援ListView, GridView, ScrollView)

        首先說明，這幾篇文章是對一些前輩的成果進行學習後的心得總結。也借這種方式對他們表示謝意。         最近專案中好幾個模組都用到listview和gridview的下拉重新整理，上拉載入更多等功能，而且涉及到圖片的批量下載。水平有限，首先是想到找一些比較

十月專案小結（Recycler下拉重新整理，上拉分頁載入）

Recycler上拉分頁載入、下拉重新整理 該需求採用RecyclerView、SwipeRefreshLayout以及第三方外掛BRVAH結合使用方式完成，SwipeRefreshLayout完成下拉重新整理、BRVAH完成上拉分頁載入 build.gradle 配置說明

Android簡單的下拉重新整理，上拉載入

先匯入第三方的東西 下載地址 匯入後，就和你的專案聯絡起來 佈局程式碼（activity_pull_to_refresh_action.xml） <?xml version="1.0" encoding="utf-8"?> <Lin

TwinklingRefreshLayout 簡單實現實現下拉重新整理，上拉載入

支援下拉重新整理和上拉載入的RefreshLayout,自帶越界回彈效果，支援RecyclerView,AbsListView,ScrollView,WebView 本文以ListView為例，實現上拉重新整理和下拉載入，其他的就不在舉例，原理是一樣的。 先看一下效果（效

實現下拉重新整理，上拉載入可自定義各種動畫

一、使用說明 1、UltimateRefreshView 支援ListView,GridView,ScrollView，WebVIew，RecyclerView（只支援LinearLayoutManager）. 2、佈局使用： 1 2 3 4 5 6 7 8 9 1

下拉重新整理，上拉載入更多的SwipeRefreshLayout（可自定義動畫）

為啥重複搞，搞得還沒人家好，因為除了需求，還有理解。我是這麼認為的。 因為懶所以寫出來留作自用，以後就是修修改改了。 打造自己的“下拉重新整理，上拉載入更多，自定義動畫及佈局”控制元件 （拷貝SwipeRefreshLayout原始碼進行修改） 不鬥圖的碼農你見過

微信小程式—Tab 切換，下拉重新整理，上拉載入（適用1221）

點評：展示方面，可以學習一下；比較簡單；12月1日更新，已經適用最新112301Features 頂部 Tab 切換 下拉重新整理 上拉載入更多 登入註冊PS 下拉重新整理需要在全域性的 app.json 裡配置 [AppleScript] 純文字檢視 複製程式碼

對mui下拉重新整理，上拉重新整理樣式自定義

mui.init({ pullRefresh:{ container:'#pullrefresh', down:

VUE2 配合mint-ui實現 自定義 loadmore(下拉重新整理，上拉更多)

<template> <div class="page-loadmore"> <h1 class="page-title">Pull up</h1> <p class="page-loadmore-de

兩款 非常不錯的Android 下拉重新整理，上拉載入的框架

https://github.com/chrisbanes/Android-PullToRefresh https://github.com/liaohuqiu/android-Ultra-Pull-To-Refresh

小程式元件-swipe多頁切換，並支援下拉重新整理，上拉載入，menu動態聯動切換

  前言 　　最近一個小程式專案中遇到一個需求，就是實現類似資訊類app的多頁面切換的那種效果, 如下圖: 　　 　　最終效果： 　　   1.功能分析 　　首先實現這個功能分為三步： 實現頂部menu選單 實現多頁面滑動切換 支援自定義下拉重新整理和上拉載入

Android分組列表懸停顯示，分組listView懸停效果，帶下拉重新整理和上拉載入更多

分組列表，帶下拉重新整理和上拉載入更多【專案地址在文章最後！！】 效果圖： 實現過程，借鑑PinnedHeadListView，但是該demo沒有下拉重新整理功能，故將該控制元件整合到PullToRefresh 庫中，【PullToRefresh 庫為第

自定義ListView重新整理，上拉載入

XListView public class XListView extends ListView implements OnScrollListener { private float mLastY = -1; // save event y private Scroller

Android LRecyclerView實現下拉重新整理，滑動到底部自動載入更多

                     隨著功能的不斷優化，框架中的類或者介面名字會有變動，為了獲取準確的使用方法，請參考最新的說明文件：點此檢視。簡介LRecyclerView是支援addHeaderView、 addFooterView、下拉重新整理、分頁載入資料的RecyclerView。它對 Rec

自定義ListView實現下拉重新整理和上拉載入

實現ListView的下拉重新整理和上拉載入，需要先新增headerView和footerView,通過在拖動的過程中，控制頭尾佈局的paddingTop實現。先把paddingTop設為負值，來隱藏header，在下拉的過程中，不斷改變headerView的p

Android自定義控制元件——ListView的下拉重新整理與上拉載入

1.簡介        無疑，在Android開發中，ListView是使用非常頻繁的控制元件之一，ListView提供一個列表的容易，允許我們以列表的形式將資料展示到介面上，但是Google給我們提供的原生ListView的控制元件，雖然在功能上很強大，但是在使用者體