(UWP开发)更为合理的一种ListView下拉刷新(PullToRefresh)实现方法

最近在做的一个项目需要用到下拉刷新,但是参考了现在网络上比较普遍的方法,觉得都不太好,因为要在外部套上一个SrollViewer,容易出现滚动错误。于是刚开始的时候就把思路定到了ListView内部的ScrollViewer上。

最初的想法是在ScrollViewer的Manipulation相关事件上下手,确实做好了,效果也不错,如图:

当时得意满满的看着自己的作品,心里是说不出的激动啊,结果放在手机上想试试触屏设备的效果,结果发现好坑爹:在触屏设备上,手指在ListView的上下滑动默认是移动其滚动条,但是改变了ManipulationModes之后,手指在屏幕上滑动就不能够使ListView滚动了(一脸懵逼)。无奈啊,只能放弃这个方法了。

之后又在想新的途径来实现同样的效果,但是发现都没有很好的办法,于是我的思路又绕回了起点:还是像网络上的方法一样,先把刷新的Header事先隐藏起来,当ScrollViewer滚动出Header之后开始刷新。只不过这个ScrollViewer不是外部嵌套的,是在ListView内部的。实现后的效果如下:

好吧,下面言归正传,讲讲详细的实现方法:

1.首先是在Xmal中,我们改一下ListView的Template。我在ScrollViewer最外层放了一个Grid,定义了两行。第一行放的就是Header,也就是刷新的时候会一直转的那个区域。第二行是ItemPresenter,显示ListView的内容。其中值得注意的是,第一行的高度是30。

代码如下:

 1                         <ControlTemplate TargetType="ListView">
 2                             <Border BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}">
 3                                 <ScrollViewer x:Name="ScrollViewer" AutomationProperties.AccessibilityView="Raw" BringIntoViewOnFocusChange="{TemplateBinding ScrollViewer.BringIntoViewOnFocusChange}" HorizontalScrollMode="{TemplateBinding ScrollViewer.HorizontalScrollMode}" HorizontalScrollBarVisibility="{TemplateBinding ScrollViewer.HorizontalScrollBarVisibility}" IsHorizontalRailEnabled="{TemplateBinding ScrollViewer.IsHorizontalRailEnabled}" IsHorizontalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsHorizontalScrollChainingEnabled}" IsVerticalScrollChainingEnabled="{TemplateBinding ScrollViewer.IsVerticalScrollChainingEnabled}" IsVerticalRailEnabled="{TemplateBinding ScrollViewer.IsVerticalRailEnabled}" IsDeferredScrollingEnabled="{TemplateBinding ScrollViewer.IsDeferredScrollingEnabled}" TabNavigation="{TemplateBinding TabNavigation}" VerticalScrollBarVisibility="{TemplateBinding ScrollViewer.VerticalScrollBarVisibility}" VerticalScrollMode="{TemplateBinding ScrollViewer.VerticalScrollMode}" ZoomMode="{TemplateBinding ScrollViewer.ZoomMode}">
 4                                     <Grid>
 5                                         <Grid.RowDefinitions>
 6                                             <RowDefinition Height="auto"></RowDefinition>
 7                                             <RowDefinition Height="*"></RowDefinition>
 8                                         </Grid.RowDefinitions>
 9                                         <Grid x:Name="refresh_ring" Grid.Row="0" HorizontalAlignment="Center" VerticalAlignment="Center">
10                                             <Ellipse Height="30" Width="30" Fill="{Binding Source={StaticResource APPTheme},Path=APP_Color_Brush}" Opacity="0.7" StrokeThickness="0"></Ellipse>
11                                             <ProgressRing IsActive="True" Foreground="{Binding Source={StaticResource APPTheme},Path=Foreground_Color_Brush}"></ProgressRing>
12                                         </Grid>
13                                         <ItemsPresenter Grid.Row="1" FooterTransitions="{TemplateBinding FooterTransitions}" FooterTemplate="{TemplateBinding FooterTemplate}" Footer="{TemplateBinding Footer}" HeaderTemplate="{TemplateBinding HeaderTemplate}" Header="{TemplateBinding Header}" HeaderTransitions="{TemplateBinding HeaderTransitions}"/>
14                                     </Grid>
15                                 </ScrollViewer>
16                             </Border>
17                         </ControlTemplate>

2.在ListView的Loaded事件中拿到其内部的SrollViewer,以及订阅相关事件。

1         private void ListView_Loaded(object sender, RoutedEventArgs e)
2         {
3             Get_Child((DependencyObject)sender);
4             lastest_listview_sc.ViewChanging += Lastest_listview_sc_ViewChanging;
5             lastest_listview_sc.ViewChanged += Lastest_listview_sc_ViewChanged;
6         }

其中这个Get_Child是一个实现遍历可视化树的方法,我们这里传递的参数sender就是ListView本身。Get_Child代码如下:

 1         private void Get_Child(DependencyObject o)
 2         {
 3             try
 4             {
 5                 int count = VisualTreeHelper.GetChildrenCount(o);
 6                 if (count > 0)
 7                 {
 8                     for (int i = 0; i < count; i++)
 9                     {
10                         var child = VisualTreeHelper.GetChild(o, count - 1);
11                         if (child is ScrollViewer)
12                         {
13                             lastest_listview_sc = child as ScrollViewer;
14                         }
15                         else
16                         {
17                             Get_Child(VisualTreeHelper.GetChild(o, count - 1), n);
18                         }
19                     }
20                 }
21             }
22             catch (Exception ex)
23             {
24                 return;
25             }
26         }

3.这里就是接下来的重点了。相信自己动手实现过下拉刷新的同学们都能够遇见过这个问题:如果用户只是普通的滚动ListView查看内容,手指往下滑的时候(内容是往下)ScrollViewer会由于惯性偏移量滑到最上部,或者其他的类似操作也会滑动到最上部,但是此时用户并不想要刷新。因此,我们就要在Lastest_listview_sc_ViewChanging方法内部实时监听ScrollViewer的滚动状态。如果此时ScrollViewer是由于惯性偏移量在滚动并且已经滚动超过了指定条件,我们就要让SrollViewer自己滚回30的位置,也就是判错。另外在触屏设备和非触屏设备上面,我们判错的指定条件最好不要一样(因为电脑用的是鼠标滚轮手机Surface之类的用的是手指,要是设定成一样的你会发现可能你怎么样都无法滑到最上面。。。)

因此上面提到的问题我们要在Lastest_listview_sc_ViewChanging方法中解决。其中的形参e的属性IsInertial可以用来获取操作是否具有惯性元素。Lastest_listview_sc_ViewChanging代码如下:

 1         private async void Lastest_listview_sc_ViewChanging(object sender, ScrollViewerViewChangingEventArgs e) //下拉刷新判错 自动加载
 2         {
 3             if (App.DeviceInfo.Device_type != Model.DeviceType.PC)
 4             {
 5                 if (lastest_listview_sc.VerticalOffset <= 10.0)
 6                 {
 7                     if (e.IsInertial)
 8                     {
 9                         lastest_listview_sc.ChangeView(null, 30.0, null);
10                     }
11                 }
12             }
13             else
14             {
15                 if (lastest_listview_sc.VerticalOffset <= 50.0 && lastest_listview_sc.VerticalOffset > 30.0)
16                 {
17                     if (e.IsInertial)
18                     {
19                         lastest_listview_sc.ChangeView(null, 30.0, null);
20                     }
21                 }
22             }
23         }

4.现在我们要用到Lastest_listview_sc_ViewChanged这个方法。其中的形参e的属性IsIntermediate可以告诉我们引发ViewChanged事件的基础操作是否完成,如果完成的话我们就可以来判断是否需要刷新了。代码如下:

1         private void Lastest_listview_sc_ViewChanged(object sender, ScrollViewerViewChangedEventArgs e)
2         {
3             if (!e.IsIntermediate)
4             {
5                 Lastest_Refresh();
6             }
7         }

5.最后一步了,就是实现我们的Lastest_Refresh方法,在这个方法中,我们需要判断ScrollViewer是否滚动到了最顶端,如果是的话,就可以开始执行刷新代码。刷新结束之后再将ScrollViewer往下滚30就OK了。代码如下:

 1         private async void Lastest_Refresh()
 2         {
 3             if (lastest_listview_sc.VerticalOffset == 0.0)
 4             {
 5                 //刷新相关代码
 6                 await Task.Delay(1000);
 7
 8                 //移动回顶部
 9                 lastest_listview_sc.ChangeView(null, 30, null);
10             }
11         }

至此,下拉刷新的过程到结束。当然,大家看到我的代码还是比较复杂,也不够简洁,毕竟我还是个大一学生。拿出来是跟大家交流的嘛,如果有什么更好的方法或者建议欢迎评论,谢谢。感激不尽!

时间: 2024-10-05 05:23:46

(UWP开发)更为合理的一种ListView下拉刷新(PullToRefresh)实现方法的相关文章

十分钟实现ListView下拉刷新上滑加载更多

说到ListView下拉刷新几乎每个APP都会用到,所以ListView下拉刷新是很重要的,就像ListView优化一样是你必会的东西. ListView实现下拉刷新如果我们开发人员自己编写相对来说比较费事的,当我们使用第三方库之后我们再来开发这个功能就会省事很多.相比与自己实现可以少编写不少代码,Android-PullToRefresh库可以轻松实现ListView的下拉刷新功能. 要使用Android—PullToRefesh库对ListView实现下拉刷新要经过以下几个步骤: 1.下载A

Android—自定义控件实现ListView下拉刷新

这篇博客为大家介绍一个android常见的功能——ListView下拉刷新(参考自他人博客,网址忘记了,阅读他的代码自己理解注释的,希望能帮助到大家): 首先下拉未松手时候手机显示这样的界面: 下面的代码是自定的扎样的控件: package com.dhsr.smartID.view; import android.content.Context; import android.util.AttributeSet; import android.view.Gravity; import andr

Android ListView 下拉刷新 点击加载更多

最近项目中用到了ListView的下拉刷新的功能,总结了一下前辈们的代码,单独抽取出来写了一个demo作为示例. 效果图 下拉刷新: 加载更多: CustomListView.java [java] view plaincopy package com.example.uitest.view; import java.util.Date; import com.example.uitest.R; import android.content.Context; import android.uti

基于Android的计步器(Pedometer)的讲解(六)——ListView下拉刷新页面

计步器(Pedometer)整个项目的源代码,最近做了比较大的修改,可能以前下载的不能运行,感兴趣的朋友可以下载来看看(记得帮小弟在github打个星~) https://github.com/296777513/pedometer 今天实现实现的下拉刷新的功能,先上几张效果图: 如图所示,今天就是要实现的这个效果 首先,分析ListView下拉刷新实现方式 1.需要添加顶部下拉加载页面 2.需要监听onScrollListener来判断当前是否显示在listview的最顶部 3.因为顶部下拉加

ListView下拉刷新、上拉载入更多之封装改进

在Android中ListView下拉刷新.上拉载入更多示例一文中,Maxwin兄给出的控件比较强大,前面有详细介绍,但是有个不足就是,里面使用了一些资源文件,包括图片,String,layout,这样不利于封装打包,下面我将源码进行改进,所有布局全部用代码实现,这样直接将src和assets打包成jar就成了一个非常方便以后使用的扩展ListView控件,代码如下: XListView: /** * @file XListView.java * @package me.maxwin.view

Qt qml listview 下拉刷新上拉分页控件

Qt qml listview下拉刷新和上拉分页主要根据contentY来判断.但要加上顶部下拉指示器.滚动条,并封装成可简单调用的组件,着实花了我不少精力:) [先看效果]    [功能] 1 下拉刷新和上拉分页逻辑 2 /下拉刷新 3 /上拉更多 4 /滚动栏 5 /工具栏半拉显隐 6 Author: surfsky.cnblogs.com 7 Lisence: MIT 请保留此文档声明 8 History: 9 init. surfsky.cnblogs.com, 2015-01 10 a

Android自定义ListView下拉刷新

实现的目标是本地有数据并没有刷新.下拉数据及时刷新数据. 我在网上找了某位写的MyListView,这个东西的下拉核心部分还是没有弄明白.非常感谢这位作者. XML布局文件源代码: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layou

ListView下拉刷新模仿微信眼睛

ListView下拉刷新模仿微信眼睛 下载地址:http://www.devstore.cn/code/info/747.html 运行截图:

ListView下拉刷新,上拉自动加载更多

下拉刷新,Android中非常普遍的功能.为了方便便重写的ListView来实现下拉刷新,同时添加了上拉自动加载更多的功能.设计最初是参考开源中国的Android客户端源码.先看示例图.          图1                                                                                                             图2          图3