效果图如下
1.原理
其实就是继承了Listview控件,为其默认加一个header,这个header就是带箭头的那些东西。然后overrideonTouchEvent函数,根据滑动过程中y坐标的变化来动态修改header的状态(包括箭头的方向和文字提示),其他用法和普通的Listview一样。
public class PullToRefreshListView extends ListView implements OnScrollListener
{
private static final String TAG = "PullToRefreshListView";
private final static int RELEASE_TO_REFRESH = 0;
private final static int PULL_TO_REFRESH = 1;
private final static int REFRESHING = 2;
private final static int DONE = 3;
private final static int LOADING = 4;
// 实际的padding的距离与界面上偏移距离的比例
private final static int RATIO = 3;
private LayoutInflater inflater;
//listview的头部 用于显示刷新的箭头等
private LinearLayout headView;
private TextView tipsTextview;
private TextView lastUpdatedTextView;
private ImageView arrowImageView;
private ProgressBar progressBar;
//箭头旋转的动画
private RotateAnimation animation;
private RotateAnimation reverseAnimation;
// 用于保证startY的值在一个完整的touch事件中只被记录一次
private boolean isRecored;
private int headContentWidth;
private int headContentHeight;
private int startY;
private int firstItemIndex;
private int state;
private boolean isBack;
private OnRefreshListener refreshListener;
private boolean isRefreshable;
public PullToRefreshListView(Context context)
{
super(context);
init(context);
}
public PullToRefreshListView(Context context, AttributeSet attrs)
{
super(context, attrs);
init(context);
}
private void init(Context context)
{
setCacheColorHint(context.getResources().getColor(R.color.transparent));
inflater = LayoutInflater.from(context);
headView = (LinearLayout) inflater.inflate(R.layout.head, null);
arrowImageView = (ImageView) headView
.findViewById(R.id.head_arrowImageView);
arrowImageView.setMinimumWidth(70);
arrowImageView.setMinimumHeight(50);
progressBar = (ProgressBar) headView
.findViewById(R.id.head_progressBar);
tipsTextview = (TextView) headView.findViewById(R.id.head_tipsTextView);
lastUpdatedTextView = (TextView) headView
.findViewById(R.id.head_lastUpdatedTextView);
measureView(headView);
headContentHeight = headView.getMeasuredHeight();
headContentWidth = headView.getMeasuredWidth();
headView.setPadding(0, -1 * headContentHeight, 0, 0);
headView.invalidate();
Log.v("size", "width:" + headContentWidth + " height:"
+ headContentHeight);
addHeaderView(headView, null, false);
setOnScrollListener(this);
animation = new RotateAnimation(0, -180,
RotateAnimation.RELATIVE_TO_SELF, 0.5f,
RotateAnimation.RELATIVE_TO_SELF, 0.5f);
animation.setInterpolator(new LinearInterpolator());
animation.setDuration(250);
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(200);
reverseAnimation.setFillAfter(true);
state = DONE;
isRefreshable = false;
}
@Override
public void onScroll(AbsListView arg0, int firstVisiableItem, int arg2, int arg3)
{
firstItemIndex = firstVisiableItem;
}
@Override
public void onScrollStateChanged(AbsListView arg0, int arg1)
{
}
@Override
public boolean onTouchEvent(MotionEvent event)
{
if (isRefreshable)
{
switch (event.getAction())
{
case MotionEvent.ACTION_DOWN:
if (firstItemIndex == 0 && !isRecored)
{
isRecored = true;
startY = (int) event.getY();
Log.v(TAG, "在down时候记录当前位置");
}
break;
case MotionEvent.ACTION_UP:
if (state != REFRESHING && state != LOADING) {
if (state == DONE) {
// 什么都不做
}
if (state == PULL_TO_REFRESH) {
state = DONE;
changeHeaderViewByState();
Log.v(TAG, "由下拉刷新状态,到done状态");
}
if (state == RELEASE_TO_REFRESH) {
state = REFRESHING;
changeHeaderViewByState();
onRefresh();
Log.v(TAG, "由松开刷新状态,到done状态");
}
}
isRecored = false;
isBack = false;
break;
case MotionEvent.ACTION_MOVE:
int tempY = (int) event.getY();
if (!isRecored && firstItemIndex == 0) {
Log.v(TAG, "在move时候记录下位置");
isRecored = true;
startY = tempY;
}
if (state != REFRESHING && isRecored && state != LOADING) {
// 保证在设置padding的过程中,当前的位置一直是在head,否则如果当列表超出屏幕的话,当在上推的时候,列表会同时进行滚动
// 可以松手去刷新了
if (state == RELEASE_TO_REFRESH) {
setSelection(0);
// 往上推了,推到了屏幕足够掩盖head的程度,但是还没有推到全部掩盖的地步
if (((tempY - startY) / RATIO < headContentHeight)
&& (tempY - startY) > 0) {
state = PULL_TO_REFRESH;
changeHeaderViewByState();
Log.v(TAG, "由松开刷新状态转变到下拉刷新状态");
}
// 一下子推到顶了
else if (tempY - startY <= 0) {
state = DONE;
changeHeaderViewByState();
Log.v(TAG, "由松开刷新状态转变到done状态");
}
// 往下拉了,或者还没有上推到屏幕顶部掩盖head的地步
else {
// 不用进行特别的操作,只用更新paddingTop的值就行了
}
}
// 还没有到达显示松开刷新的时候,DONE或者是PULL_To_REFRESH状态
if (state == PULL_TO_REFRESH) {
setSelection(0);
// 下拉到可以进入RELEASE_TO_REFRESH的状态
if ((tempY - startY) / RATIO >= headContentHeight) {
state = RELEASE_TO_REFRESH;
isBack = true;
changeHeaderViewByState();
Log.v(TAG, "由done或者下拉刷新状态转变到松开刷新");
}
// 上推到顶了
else if (tempY - startY <= 0) {
state = DONE;
changeHeaderViewByState();
Log.v(TAG, "由DOne或者下拉刷新状态转变到done状态");
}
}
// done状态下
if (state == DONE) {
if (tempY - startY > 0) {
state = PULL_TO_REFRESH;
changeHeaderViewByState();
}
}
// 更新headView的size
if (state == PULL_TO_REFRESH) {
headView.setPadding(0, -1 * headContentHeight + (tempY - startY) / RATIO, 0, 0);
}
// 更新headView的paddingTop
if (state == RELEASE_TO_REFRESH) {
headView.setPadding(0, (tempY - startY) / RATIO
- headContentHeight, 0, 0);
}
}
break;
}
}
return super.onTouchEvent(event);
}
// 当状态改变时候,调用该方法,以更新界面
private void changeHeaderViewByState()
{
switch (state)
{
case RELEASE_TO_REFRESH:
arrowImageView.setVisibility(View.VISIBLE);
progressBar.setVisibility(View.GONE);
tipsTextview.setVisibility(View.VISIBLE);
lastUpdatedTextView.setVisibility(View.VISIBLE);
arrowImageView.clearAnimation();
arrowImageView.startAnimation(animation);
tipsTextview.setText("放开以刷新");
Log.v(TAG, "当前状态,松开刷新");
break;
case PULL_TO_REFRESH:
progressBar.setVisibility(View.GONE);
tipsTextview.setVisibility(View.VISIBLE);
lastUpdatedTextView.setVisibility(View.VISIBLE);
arrowImageView.clearAnimation();
arrowImageView.setVisibility(View.VISIBLE);
// 是由RELEASE_To_REFRESH状态转变来的
if (isBack) {
isBack = false;
arrowImageView.clearAnimation();
arrowImageView.startAnimation(reverseAnimation);
tipsTextview.setText("下拉刷新");
} else {
tipsTextview.setText("下拉刷新");
}
Log.v(TAG, "当前状态,下拉刷新");
break;
case REFRESHING:
headView.setPadding(0, 0, 0, 0);
progressBar.setVisibility(View.VISIBLE);
arrowImageView.clearAnimation();
arrowImageView.setVisibility(View.GONE);
tipsTextview.setText("正在刷新...");
lastUpdatedTextView.setVisibility(View.VISIBLE);
Log.v(TAG, "当前状态,正在刷新...");
break;
case DONE:
headView.setPadding(0, -1 * headContentHeight, 0, 0);
progressBar.setVisibility(View.GONE);
arrowImageView.clearAnimation();
arrowImageView.setImageResource(R.drawable.arrow);
tipsTextview.setText("下拉刷新");
lastUpdatedTextView.setVisibility(View.VISIBLE);
Log.v(TAG, "当前状态,done");
break;
}
}
public void setonRefreshListener(OnRefreshListener refreshListener)
{
this.refreshListener = refreshListener;
isRefreshable = true;
}
public interface OnRefreshListener
{
public void onRefresh();
}
public void onRefreshComplete()
{
state = DONE;
lastUpdatedTextView.setText("最近更新:" + new Date().toLocaleString());
changeHeaderViewByState();
}
private void onRefresh()
{
if (refreshListener != null)
{
refreshListener.onRefresh();
}
}
// 此方法直接照搬自网络上的一个下拉刷新的demo,此处是“估计”headView的width以及height
private void measureView(View child) {
ViewGroup.LayoutParams p = child.getLayoutParams();
if (p == null) {
p = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.FILL_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 void setAdapter(BaseAdapter adapter)
{
lastUpdatedTextView.setText("最近更新:" + new Date().toLocaleString());
super.setAdapter(adapter);
}
}
header的layout xml
<?xml version="1.0" encoding="utf-8"?>
<!-- ListView的头部 -->
<LinearLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
>
<!-- 内容 -->
<RelativeLayout
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:id="@+id/head_contentLayout"
android:paddingLeft="30dp"
>
<!-- 箭头图像、进度条 -->
<FrameLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_centerVertical="true"
>
<!-- 箭头 -->
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:src="@drawable/arrow"
android:id="@+id/head_arrowImageView"
/>
<!-- 进度条 -->
<ProgressBar
android:layout_width="wrap_content"
android:layout_height="wrap_content"
style="?android:attr/progressBarStyleSmall"
android:layout_gravity="center"
android:id="@+id/head_progressBar"
android:visibility="gone"
/>
</FrameLayout>
<!-- 提示、最近更新 -->
<LinearLayout
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:orientation="vertical"
android:gravity="center_horizontal"
>
<!-- 提示 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="下拉刷新"
android:textColor="#33CCFF"
android:textSize="20sp"
android:id="@+id/head_tipsTextView"
/>
<!-- 最近更新 -->
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/head_lastUpdatedTextView"
android:text="上次更新"
android:textColor="@color/gold"
android:textSize="10sp"
/>
</LinearLayout>
</RelativeLayout>
</LinearLayout>
2.如何使用
使用起来很简单,只有一点不同,要实现OnRefreshListener接口,标志当下拉刷新的时候你所要做的事情。
listView.setonRefreshListener(new OnRefreshListener() {
@Override
public void onRefresh()
{
new AsyncTask<Void, Void, Void>() {
//刷新过程中需要做的操作在这里
protected Void doInBackground(Void... params)
{
try
{
Thread.sleep(1000);
}
catch (Exception e)
{
e.printStackTrace();
}
data.add("new item");
return null;
}
//刷新完成后要通知listview进行界面调整
@Override
protected void onPostExecute(Void result)
{
adapter.notifyDataSetChanged();
listView.onRefreshComplete();
}
}.execute(null);
}
});
分享到:
相关推荐
而下拉刷新功能则是现代移动应用的常见特性,允许用户通过下拉列表顶部来更新内容。在ListView中,我们经常会遇到需要处理多种交互元素,如CheckBox、Button等,这涉及到事件分发和回调机制。以下是对这个主题的详细...
在Android开发中,ListView是一种常用的控件,用于展示大量数据列表。然而,为了提供更好的用户体验,许多应用都引入了下拉...通过实践,你可以创建出具有独特视觉效果和交互体验的下拉刷新功能,提升应用的用户体验。
1. 自定义ScrollView:由于SwipeRefreshLayout不直接支持ScrollView,我们需要自定义一个带有下拉刷新功能的ScrollView。这通常涉及到对滚动事件的监听和处理,以及自定义刷新动画的实现。 2. 滚动监听:重写...
这个主题主要关注如何实现一个带有下拉刷新功能的ListView,同时也支持分页加载更多的内容。这种控件允许用户在顶部拉动ListView时触发刷新操作,以便获取最新的数据。以下将详细讲解这个知识点。 1. **下拉刷新...
在给定的文件中,"效果图.gif"可能展示了这个功能实现后的动画效果,而"MyFreshListView"可能是自定义的ListView类,包含了下拉刷新和上拉加载的逻辑。通过分析这个类的代码,我们可以学习到如何处理触摸事件,如何...
添加SwipeRefreshLayout到布局文件中,然后设置其内部的ListView,就可以启用下拉刷新功能。例如: ```xml android:id="@+id/swipe_refresh_layout" android:layout_width="match_parent" android:layout_...
在Android开发中,ListView是常用的数据展示控件,但为了提供更好的用户体验,通常需要实现下拉刷新和上拉加载更多的功能。本主题将深入探讨如何自定义ListView实现这些特性,并介绍Google官方提供的...
下拉刷新功能通常通过添加一个Header View来实现,这个Header View在默认状态下隐藏在ListView的顶部,只有当用户执行下拉手势时才会出现。在Android中,我们可以使用诸如SwipeRefreshLayout或PullToRefreshLayout...
Android系统自带有下拉刷新的组件,可以帮助开发者轻松地实现这一特性。本篇文章将深入探讨如何使用Android官方自带的下拉刷新控件——SwipeRefreshLayout,以及它的工作原理和常见应用场景。 首先,...
本项目以"listview的下拉刷新,动画+带时间;;底部刷新加载数据"为主题,详细介绍了如何在Android Studio中为ListView实现这些功能。 1. **下拉刷新(Pull-to-Refresh)**: 下拉刷新是用户通过手势向下拉动...
在这个非完整的项目中,我们看到开发者尝试实现一个带有删除功能的ListView,同时每个单元格内还绑定有下拉列表控件以及文本框控件,这涉及到自定义Adapter、事件监听以及UI组件的嵌套使用。 1. **自定义ListView**...
"Android应用源码之listView下拉刷新上拉刷新带阻尼效果_上拉.zip"这个压缩包文件提供了一个实现这一功能的源码示例,主要涉及到以下几个关键知识点: 1. **下拉刷新(Pull-to-Refresh)**:这是一种常见的用户交互...
- **兼容性**:确保下拉刷新功能在不同版本的Android系统上都能正常工作。 - **性能优化**:避免在刷新动画执行时阻塞主线程,保证UI的流畅性。 - **用户体验**:提供清晰的反馈,让用户知道何时可以松开手指,何时...
- 在布局XML文件中,首先添加SwipeRefreshLayout作为根视图,然后在其内部嵌套要添加下拉刷新功能的ScrollView或其他滚动视图。 ```xml android:id="@+id/swipe_refresh_layout" android:layout_width="match_...
"listview 仿qq空间 图片缩放 标题渐变透明 下拉刷新"这个主题涉及到几个关键点,包括ListView的自定义、图片的动态缩放效果、标题的渐变透明动画以及下拉刷新功能的实现。 1. **ListView的自定义**: ListView的...
综上所述,将下拉刷新和上拉加载功能整合进一个带有ViewPager的ListView需要对Android的UI组件有深入的理解,以及良好的编程技巧。实现过程中需要考虑性能、用户体验以及事件处理等多个方面,确保最终的交互效果流畅...
首先,下拉刷新功能的实现涉及到两个主要部分:UI组件和数据更新机制。UI组件通常是一个自定义的ListView头部视图,当用户下拉时,这个头部会显示刷新动画,并在完成数据更新后恢复原状。数据更新机制则负责在用户...
当ListView带有Header时,实现下拉刷新和上拉加载更多的功能,是一项常见的需求。本文将深入探讨如何在ListView中实现这一特性。 首先,我们需要了解ListView的基本用法。ListView通过Adapter来填充数据,Adapter是...
在现代移动应用中,用户期望有更丰富的交互体验,比如下拉刷新、上拉加载更多以及滑动删除等功能。ZListVIew-master是一个针对ListView进行功能扩展的开源项目,它为开发者提供了实现这些高级特性的便利。 下拉刷新...
- 下拉刷新功能通常与异步数据加载结合使用,因此需要处理好线程同步问题,确保在主线程中更新UI。 通过以上步骤,我们便可以在Android原生环境中实现一个基本的下拉刷新功能。这个例子对于Android新手来说是一个...