使用ScrollView实现下拉刷新（一）

最新推荐文章于 2024-06-20 23:29:09 发布
原创 最新推荐文章于 2024-06-20 23:29:09 发布 · 3w 阅读 · 10 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文介绍如何在不使用ListView的情况下，通过ScrollView自定义实现下拉刷新功能。主要方法是在OnTouchListener中处理，虽然原理类似ListView的下拉刷新，但网上相关例子不多。

使用ListView来做下拉刷新有很多例子，而且封装的很好。

ListView有 header 但是如果不使用ListView的下拉刷新网上的例子相对来说比较少，于是自己动手写了个，原理差不多，主要都是在OnTouchListener

首先是Header的布局文件：

<?xml version="1.0" encoding="utf-8"?>
<!-- ListView的头部 -->
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/head_rootLayout"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" >

    <!-- 内容 -->

    <RelativeLayout
        android:id="@+id/head_contentLayout"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="30dp" >

        <!-- 箭头图像、进度条 -->

        <FrameLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentLeft="true"
            android:layout_centerVertical="true" >

            <!-- 箭头 -->

            <ImageView
                android:id="@+id/head_arrowImageView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:contentDescription="@string/app_name"
                android:src="@drawable/head_arrow" />
            <!-- 进度条 -->

            <ProgressBar
                android:id="@+id/head_progressBar"
                style="?android:attr/progressBarStyleSmall"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_gravity="center"
                android:visibility="gone" />
        </FrameLayout>
        <!-- 提示、最近更新 -->

        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:gravity="center_horizontal"
            android:orientation="vertical" >

            <!-- 提示 -->

            <TextView
                android:id="@+id/head_tipsTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/pulltorefresh"
                android:textSize="20sp" />
            <!-- 最近更新 -->

            <TextView
                android:id="@+id/head_lastUpdatedTextView"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:text="@string/lastupdate"
                android:textColor="#cc6600"
                android:textSize="12sp" />
        </LinearLayout>
    </RelativeLayout>

</LinearLayout>


Activity布局： 

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout  xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
    android:id="@+id/globleLayout">

    <ScrollView
        android:id="@+id/scrollView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent" >
	<!-- 这里放你想要放的布局 --!>
        <LinearLayout
            android:id="@+id/linearLayout"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >
            <ImageView
                android:layout_width="80dp"
                android:layout_height="120dp"
                android:src="@drawable/a" />

            <ImageView
                android:layout_width="80dp"
                android:layout_height="120dp"
                android:src="@drawable/b" />

            <ImageView
                android:layout_width="80dp"
                android:layout_height="120dp"
                android:src="@drawable/c" />

            <ImageView
                android:layout_width="80dp"
                android:layout_height="120dp"
                android:src="@drawable/d" />

            <ImageView
                android:layout_width="80dp"
                android:layout_height="120dp"
                android:src="@drawable/e" />

            <ImageView
                android:layout_width="80dp"
                android:layout_height="120dp"
                android:src="@drawable/f" />
           
        </LinearLayout>
    </ScrollView>

</LinearLayout>

现在是Activity 的代码： 

package com.example.scrollviewtest;

import java.util.Date;

import android.app.Activity;
import android.content.Context;
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.MotionEvent;
import android.view.View;
import android.view.View.MeasureSpec;
import android.view.View.OnTouchListener;
import android.view.ViewGroup;
import android.view.ViewGroup.LayoutParams;
import android.view.animation.LinearInterpolator;
import android.view.animation.RotateAnimation;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.ProgressBar;
import android.widget.ScrollView;
import android.widget.TextView;

public class MainActivity extends Activity {
	private ScrollView sc;
	private LinearLayout header;
	private ImageView arrowImg;
	private ProgressBar headProgress;
	private TextView lastUpdateTxt;
	private TextView tipsTxt;
	private RotateAnimation tipsAnimation;
	private RotateAnimation reverseAnimation;
	private LayoutInflater inflater;
	private LinearLayout globleLayout;
	private int headerHeight;	//头高度
	private int lastHeaderPadding; //最后一次调用Move Header的Padding
	private boolean isBack; //从Release 转到 pull
	private int headerState = DONE;
	static final private int RELEASE_To_REFRESH = 0;
	static final private int PULL_To_REFRESH = 1;
	static final private int REFRESHING = 2;
	static final private int DONE = 3;
	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_main);
		init(this);
	}
	
	private void init(Context context) {
		globleLayout = (LinearLayout) findViewById(R.id.globleLayout);
		sc = (ScrollView) globleLayout.findViewById(R.id.scrollView);
		inflater = (LayoutInflater) this
				.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
		
		header = (LinearLayout) inflater.inflate(R.layout.drag_drop_header, null);
		measureView(header);
		headerHeight = header.getMeasuredHeight();
		lastHeaderPadding = (-1*headerHeight); //最后一次调用Move Header的Padding
		header.setPadding(0, lastHeaderPadding, 0, 0);
		header.invalidate();
		globleLayout.addView(header,0);
		
		headProgress = (ProgressBar) findViewById(R.id.head_progressBar);
		arrowImg = (ImageView) findViewById(R.id.head_arrowImageView);
		arrowImg.setMinimumHeight(50);
		arrowImg.setMinimumWidth(50);
		tipsTxt = (TextView) findViewById(R.id.head_tipsTextView);
		lastUpdateTxt = (TextView) findViewById(R.id.head_lastUpdatedTextView);
		//箭头转动动画
		tipsAnimation = new RotateAnimation(0, -180,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f,
				RotateAnimation.RELATIVE_TO_SELF, 0.5f);
		tipsAnimation.setInterpolator(new LinearInterpolator());
		tipsAnimation.setDuration(200);		//动画持续时间
		tipsAnimation.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);
		//为scrollview绑定事件
		sc.setOnTouchListener(new OnTouchListener() {
			private int beginY;
			
			@Override
			public boolean onTouch(View v, MotionEvent event) {

				switch (event.getAction()) {
				case MotionEvent.ACTION_MOVE:
					//sc.getScrollY == 0  scrollview 滑动到头了 
					//lastHeaderPadding > (-1*headerHeight) 表示header还没完全隐藏起来时
					//headerState != REFRESHING 当正在刷新时
					if((sc.getScrollY() == 0 || lastHeaderPadding > (-1*headerHeight)) && headerState != REFRESHING) {
						//拿到滑动的Y轴距离
						int interval = (int) (event.getY() - beginY);
						//是向下滑动而不是向上滑动
						if (interval > 0) {
							interval = interval/2;//下滑阻力
							lastHeaderPadding = interval + (-1*headerHeight);
							header.setPadding(0, lastHeaderPadding, 0, 0);
							if(lastHeaderPadding > 0) {
								//txView.setText("我要刷新咯");
								headerState = RELEASE_To_REFRESH;
								//是否已经更新了UI
								if(! isBack) {
									isBack = true;  //到了Release状态，如果往回滑动到了pull则启动动画
									changeHeaderViewByState();
								}
							} else {
								headerState = PULL_To_REFRESH;
								changeHeaderViewByState();
								//txView.setText("看到我了哦");
								//sc.scrollTo(0, headerPadding);
							}
						}
					}
					break;
				case MotionEvent.ACTION_DOWN:
					//加上下滑阻力与实际滑动距离的差（大概值）
					beginY = (int) ((int) event.getY() + sc.getScrollY()*1.5);
					break;
				case MotionEvent.ACTION_UP:
					if (headerState != REFRESHING) {
						switch (headerState) {
						case DONE:
							//什么也不干
							break;
						case PULL_To_REFRESH:
							headerState = DONE;
							lastHeaderPadding = -1*headerHeight;
							header.setPadding(0, lastHeaderPadding, 0, 0);
							changeHeaderViewByState();
							break;
						case RELEASE_To_REFRESH:
							isBack = false; //准备开始刷新，此时将不会往回滑动
							headerState = REFRESHING;
							changeHeaderViewByState();
							onRefresh();
							break;
						default:
							break;
						}
					}
					break;
				}
				//如果Header是完全被隐藏的则让ScrollView正常滑动，让事件继续否则的话就阻断事件
				if(lastHeaderPadding > (-1*headerHeight) && headerState != REFRESHING) {
					return true;
				} else {
					return false;
				}
			}
		});
	}

	private void changeHeaderViewByState() {
		switch (headerState) {
		case PULL_To_REFRESH:
			// 是由RELEASE_To_REFRESH状态转变来的
			if (isBack) {
				isBack = false;
				arrowImg.startAnimation(reverseAnimation);
				tipsTxt.setText("下拉刷新");
			}
			tipsTxt.setText("下拉刷新");
			break;
		case RELEASE_To_REFRESH:
			arrowImg.setVisibility(View.VISIBLE);
			headProgress.setVisibility(View.GONE);
			tipsTxt.setVisibility(View.VISIBLE);
			lastUpdateTxt.setVisibility(View.VISIBLE);
			arrowImg.clearAnimation();
			arrowImg.startAnimation(tipsAnimation);
			tipsTxt.setText("松开刷新");
			break;
		case REFRESHING:
			lastHeaderPadding = 0;
			header.setPadding(0, lastHeaderPadding, 0, 0);
			header.invalidate();
			headProgress.setVisibility(View.VISIBLE);
			arrowImg.clearAnimation();
			arrowImg.setVisibility(View.INVISIBLE);
			tipsTxt.setText("正在刷新...");
			lastUpdateTxt.setVisibility(View.VISIBLE);
			break;
		case DONE:
			lastHeaderPadding = -1 * headerHeight;
			header.setPadding(0, lastHeaderPadding, 0, 0);
			header.invalidate();
			headProgress.setVisibility(View.GONE);
			arrowImg.clearAnimation();
			arrowImg.setVisibility(View.VISIBLE);
			tipsTxt.setText("下拉刷新");
			lastUpdateTxt.setVisibility(View.VISIBLE);
			break;
		default:
			break;
		}
	}
	private void onRefresh() {
		new AsyncTask<Void, Void, Void>() {
			protected Void doInBackground(Void... params) {
				try {
					Thread.sleep(2000);
				} catch (Exception e) {
					e.printStackTrace();
				}
				return null;
			}

			@Override
			protected void onPostExecute(Void result) {
				onRefreshComplete();
			}

		}.execute(null);
	}
	public void onRefreshComplete() {
		headerState = DONE;
		lastUpdateTxt.setText("最近更新:" + new Date().toLocaleString());
		changeHeaderViewByState();
	}
	//由于OnCreate里面拿不到header的高度所以需要手动计算
	private void measureView(View childView) {
		LayoutParams p = childView.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 height = p.height;
		int childHeightSpec;
		if (height > 0) {
			childHeightSpec = MeasureSpec.makeMeasureSpec(height,
					MeasureSpec.EXACTLY);
		} else {
			childHeightSpec = MeasureSpec.makeMeasureSpec(0,
					MeasureSpec.UNSPECIFIED);
		}
		childView.measure(childWidthSpec, childHeightSpec);
	}
}



微信小程序scroll-view组件之上拉加载下拉刷新（解决上拉加载不触发）
学如逆水行舟，不进则退！
07-12 9344
最近在学习微信小程序，有一个功能就是做一个商品列表分页限流然后实现上拉加载下拉刷新功能，遇到了一个使用scroll-viwe组件下拉刷新事件始终不触发问题，网上很多说给scroll-view设置一个高度啥的就可以解决，有些人设置了高度也不触发，所以在下就研究了一波这个scroll-view的触发机制。
微信小程序使用scroll-view，实现分页加载和下拉刷新
weixin_53582738的博客
10-17 3494
【代码】微信小程序使用scroll-view，实现分页加载和下拉刷新。
微信小程序开发系列（三十三）·如何通过scroll-view实现上拉加载和下拉刷新
时光の尘的博客
03-17 7037
当用户下拉刷新时，会触发名为 refreshHandler 的处理函数来执行相应的逻辑，比如加载最新数据或者其他操作。当 refresher-triggered 的值为 true 时，表示下拉刷新已经被触发，可以执行相应的刷新操作。当滚动视图滚动到设定的阈值（由 lower-threshold 决定）时，触发触底事件，然后会调用名为 getMore 的处理函数来执行相应的逻辑。在滚动视图中，当距离底部的距离小于或等于 lower-threshold 设置的值时，会触发触底事件。
uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载
热门推荐
weixin_43973909的博客
02-17 2万+
uniapp使用自带【刷新方法】与使用【scroll-view】实现下拉刷新上拉加载
基于ScrollView的下拉刷新
在无知中学习，在学习中成长，在成长中学习
08-15 389
基于ScrollView的下拉刷新
Android 下拉刷新控件之ScrollView版本实现
emowuyi
01-15 177
这还是一个下拉刷新的控件 其实也是对于下拉控件类似与ListView的一个扩展。 对于ListView下拉刷新详情见： http://blog.csdn.net/nono_love_lilith/article/details/7100845 然后下面一哥们索要demo，顺便写了下，也顺便也说明下ScrollView版本的下拉和资源下载地址。 效果图1： 效果图2： ...
ScrollView模拟上拉刷新
forestsenlin的博客
02-27 2870
本篇介绍ScrollView实现上拉刷新的功能，也可以实现下拉刷新。数据来自Data.json文件 首先显示3条数据，在ScrollView滚动到底部回弹时再显示新数据。local MainScene = class("MainScene", cc.load("mvc").ViewBase)function MainScene:ctor() self:enableNodeEvents()
下拉ScrollView伸缩头布局，实现ScrollView回弹效果
u010723811的专栏
12-22 3727
项目中用到了商品详情展示效果，所以立马想到借鉴天猫商品详情界面，看了天猫的详情页面想到了两套解决方案。1，使用LitView 添加header监听listView 的滑动然后根据listView 的滑动距离计算 header应该滑动的距离 和改变header的高度。2，使用ScrollView 代替1中的ListView 监听onTouch事件，动态改变header的高度，按照这个思路也可以实现
uniapp：scroll-view触底加载、下拉刷新、返回顶部
FIRE
05-18 3616
选择uniapp自带的下拉刷新还是scroll-view看场景。场景：从首页跳转到别的页面再返回来的时候，直接返回首页顶部。顺便解决了ios下拉，顶部和底部有白屏的问题。
微信小程序 - - - - scroll-view 自定义 下拉刷新
Dark_programmer的博客
10-14 2550
scroll-view 自定义下拉刷新
[SwiftUI]ScrollView下拉刷新与上拉加载
Gamin
03-18 5105
自己写有点费时间，要自定的话可以参考一下@心猿意码 老兄封装的。虽然刷新时机还有待优化，但确实很简洁，比较适合我的开发习惯。用现成的工具就很香了。
uniapp使用scroll-view组件实现下拉刷新跟上拉加载
weixin_39531049的博客
07-11 8601
以上就是uniapp 使用scroll-view上拉加载跟下拉刷新功能的实现方法。
微信小程序-scroll-view实现上拉加载和下拉刷新
weixin_42284031的博客
06-20 2416
scroll-view组件通过自身一些属性实现上拉加载的功能。lower-threshold=“100"属性表示距离底部多少px就会实现触发下拉加载的事件。类似于在.json文件里面配置"onReachBottomDistance”: 100bindscrolltolower="getMore"属性是监听下拉加载的所绑定的方法。enable-back-to-top属性设置为ture表示点击状态栏或者标题栏回到顶部位置。
小程序实现下拉刷新
weixin_59525879的博客
09-09 1580
事件，当用户下拉页面后，该事件会被触发。在事件处理函数中，调用相应的数据刷新方法，例如重新请求数据，在数据请求成功后调用。方法，停止当前页面的下拉刷新状态。事件的使用，就可以在小程序中实现下拉刷新功能了。小程序实现下拉刷新可以通过使用组件。，表示允许竖向滚动。组件包裹需要滚动的内容，设置。在需要下拉刷新的页面的。
uniapp微信小程序scroll-view头部固定在页面上，不会随着页面滚动而移动
weixin_38905666的博客
03-21 4014
scroll-view，顶部定位
微信小程序 - 基于scroll view 实现下拉刷新
qq_37011724的博客
03-16 1785
本文会基于scroll view 实现下拉刷新效果，在下拉的时候会进入loading状态。
小程序scroll-view实现三级分类左右联动，上拉加载以及下拉刷新
qq_44828153的博客
12-05 3447
lower-threshold = ‘-50’,这里很坑，模拟器和安卓不行，ios可以，在滚动条触底的时候，ios可以继续往上拉一段距离，此时会来到下一页，无法兼容安卓， 2. 滑动三级分类，二级分类跟着滚动有两种方式,scroll-into-view锚点和scroll-left scroll-into-view锚点,前提得给商品列表每个子选项 一个唯一class，三级分类上下滑动，监听高度变化，拿到当前索引，动态改变二级分类的class名 注意：设置横向滚动需要确定scroll-x的宽度，如果发现不
微信小程序scroll-view下拉刷新与上拉加载更多
shi450561200的博客
12-09 2451
或者 overflow-y: scroll 否则scroll-view上的方法不起作用。
小程序-uni-app：scroll-view/区域滚动、下拉刷新、上拉加载更多
snow的博客
07-24 7309
开发环境：小程序、uniapp + vue3 + ts实现功能：列表页面实现，区域滚动、下拉刷新、上拉加载更多，效果如图：正常：下拉刷新：
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值