文档章节

实现Material风格的滑动刷新Swipe to Refresh

g
 gaoyangsimida
发布于 2016/04/18 17:38
字数 1096
阅读 48
收藏 0

Material Design用户界面指南中非常棒的一个设计是Swipe to Refresh UI pattern。实际上你可能已经看到或者用过这种效果了。在很多热门的app中都有这种效果,比facebok、 Google Newsstand, Trello, Gmail等等。

类似于如下效果:

cat names gif

Swipe to Refresh UI非常适合于基于adapter的控件(如RecyclerView and ListView),一般它们都需要支持用户的刷新请求。关于Swipe to Refresh的 实现,在KitKat版本中就有了SwipeRefreshLayout,Lollipop中对SwipeRefreshLayout做了改进,v4包含 了SwipeRefreshLayout控件,我们只需做一些设置就可以了。为了方便读者,我把demo放在了github 上 下载地址

我们是在一个包含最新版本Support库的Android Studio项目中实现Swipe to Refresh,我们要做的第一件事就是将support library添加进build.gradle

1
compile 'com.android.support:support-v4:21.0.+'

在新建工程向导的时候自动创建了res/layouts/activity_main.xml文件,我们将一个ListView添加进SwipeRefreshLayout控件

1
2
3
4
5
6
7
8
9
10
11
<android.support.v4.widget.SwipeRefreshLayout
         android:id= "@+id/activity_main_swipe_refresh_layout"
         android:layout_width= "match_parent"
         android:layout_height= "wrap_content" >
         <ListView
             android:id= "@+id/activity_main_listview"
             android:layout_width= "match_parent"
             android:layout_height= "match_parent"
             >
         </ListView>
     </android.support.v4.widget.SwipeRefreshLayout>

注 意ListView被包含在了SwipeRefreshLayout的里面。每次我们滑动ListView到SwipeRefreshLayout边缘的 时候,SwipeRefreshLayout都会显示一个正在加载的图标,同时触发一个onRefresh事件。onRefresh是我们为自己list 刷新数据添加的一个回调方法。


设置adapter

布局我们已经搞定,现在为列表添加数据,我们用一个简单的adapter来显示数据,数据来自于res/strings.xml文件:

1
2
3
4
5
6
7
8
9
10
11
<string-array name= "cat_names" >
     <item>George</item>
     <item>Zubin</item>
     <item>Carlos</item>
     <item>Frank</item>
     <item>Charles</item>
     <item>Simon</item>
     <item>Fezra</item>
     <item>Henry</item>
     <item>Schuster</item>
</string-array>

设置adapter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
class MainActivity extends Activity {
   ListView mListView;
   SwipeRefreshLayout mSwipeRefreshLayout;
   Adapter mAdapter;
   @Override
   public void onCreate(Bundle savedInstanceState) {
     super .onCreate(savedInstanceState);
     setContentView(R.layout.acivity_main);
     SwipeRefreshLayout mSwipeRefreshLayout = (SwipeRefreshLayout) findViewById(R.id.activity_main_swipe_refresh_layout);
     mListView = findViewById(R.id.activity_main_list_view);
  mListView.setAdapter( new ArrayAdapter<String>(){
     String[] fakeTweets = getResources().getStringArray(R.array.fake_tweets);
     mAdapter = new ArrayAdapter<String>( this , android.R.layout.simple_list_item_1, fakeTweets)
     listView.setAdapter(mAdapter);
   });
   }
}



处理数据刷新

adapter 已经设置,现在我们添加下拉刷新事件。我们会免费获得一个动画效果的加载图标,我们只需要决定ListView该做什么,这取决于 SwipeRefreshLayout的OnRefreshListener 接口是如何实现的。我们用getNewCatNames模拟从webservice 中得到新数据。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
@Override
   public void onCreate(Bundle savedInstanceState) {
   ...
     listView.setAdapter();
     mSwipeRefreshLayout.setOnRefreshListener( new SwipeRefreshLayout.OnRefreshListener() {
       @Override
       public void onRefresh() {
             refreshContent();
           ...
   }
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
   // fake a network operation's delayed response
   // this is just for demonstration, not real code!
   private void refreshContent(){
   new Handler().postDelayed( new Runnable() {
           @Override
           public void run() {
     mAdapter = new ArrayAdapter<String>(MainActivity. this , android.R.layout.simple_list_item_1, getNewCatNames());
     mListView.setAdapter(mAdapter);
     mSwipeRefreshLayout.setRefreshing( false );
   });
   }
   // get new cat names.
   // Normally this would be a call to a webservice using async task,
   // or a database operation
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            
  private List<String> getNewCatNames() {
         List<String> newCatNames = new ArrayList<String>();
         for (int i = 0; i < mCatNames.size(); i++) {
           int randomCatNameIndex = new Random().nextInt(mCatNames.size() - 1);
           newCatNames.add(mCatNames.get(randomCatNameIndex));
         }
         return newCatNames;
     }


注意上面的代码中refreshContent()方法最后一行代码setRefreshing(false);setRefreshing的作用是设置刷新加载效果的icon是否继续显示,这里使用handler做了个延时,模拟实际加载数据需要的时间,当handler的post开始执行的时候setRefreshing(false)表示加载结束,停止播放加载动画。


自定义

你可以自定义SwipeRefreshLayout的外观。setColorSchemeResources()可以改变加载图标的颜色。

先在资源文件中定义几个颜色值:

1
2
3
4
5
<resources>
     <color name= "orange" > #FF9900</color>
   <color name= "green" > #009900</color>
     <color name= "blue" > #000099</color>
</resources>


然后调用setColorSchemeResources(R.color.orange, R.color.green, R.color.blue);

cat names color

SwipeRefreshLayout旋转的时候将会在这三种颜色间切换。

就如你所看到的Swipe to Refresh简化了用户请求更新数据的操作,关于SwipeRefreshLayout的更多api请查看官方文档


注:本篇文章提供的demo编译的时候虽然用的是21版本的appcompat,但是运行还是需要在5.0的设备上,因为demo的Material主题和颜色appcompat无能为力。当然你可以如下更改一下主题,这样在4.x版本上也能运行:

demo本来的主题:

styles.xml

1
2
3
4
5
6
7
<resources>
     <!-- Base application theme. -->
     <style name= "AppTheme" parent= "android:ThemeOverlay.Material.Light" >
         <!-- Customize your theme here. -->
         <item name= "android:colorPrimary" >@android:color/holo_blue_dark</item>
     </style>
</resources>

改成:

1
2
3
4
5
6
7
<resources>
     <!-- Base application theme. -->
     <style name= "AppTheme" parent= "Theme.AppCompat.Light" >
         <!-- Customize your theme here. -->
                                                  
     </style>
</resources>



http://design.1sters.com/

© 著作权归作者所有

上一篇: Gson 工具类
下一篇: Handler
g
粉丝 0
博文 10
码字总数 2268
作品 0
朝阳
私信 提问
Flutter 案例学习之:下拉刷新

GitHub:https://github.com/happy-python/flutterdemos/tree/master/swipetorefresh_demo 在 Flutter 中使用 RefreshIndicator 来实现下拉刷新的功能。 A widget that supports the Materia......

与蟒唯舞
2018/10/31
0
0
使用SwipeRefreshLayout和RecyclerView实现仿“简书”下拉刷新和上拉加载

一、概述 我们公司目前开发的所有Android APP都是遵循iOS风格设计的,这并不是一个好现象。我决定将Android 5.x控件引入最近开发的项目中,使用RecyclerView取代以往使用的ListView、GridV...

you缘么
2016/04/29
723
0
2016年最流行的Android组件、工具、框架大全

首发链接:2016年最流行的Android组件、工具、框架大全 Android 是目前最流行的移动操作系统之一。 随着新版本的不断发布, Android的功能也日益强大, 涌现了很多流行的应用程序, 也催生了...

xhmj12
2016/12/12
0
0
UltimateRecyclerview 0.3.4 发布,增加新特性

UltimateRecyclerview 0.3.4 今天发布,在在原有基础上,增加了如下特性: ###Changes in 0.3.4: - [x] support different layout in adapter - [x] support easy way to use admob - [x] l......

MarshalChen
2015/05/26
2.2K
8
Android UI框架(中)

唯美清新的switch按钮 优雅的switch状态按钮 通用的引导页和轮播器 仿微信图片选择器 快捷设置沉浸式状态栏 复杂表格布局 最全的开源集合 阻尼效果的界面 炫酷的纸飞机下拉刷新控件 仿ios水滴...

Moosphon
2017/12/31
0
0

没有更多内容

加载失败,请刷新页面

加载更多

64.监控平台介绍 安装zabbix 忘记admin密码

19.1 Linux监控平台介绍 19.2 zabbix监控介绍 19.3/19.4/19.6 安装zabbix 19.5 忘记Admin密码如何做 19.1 Linux监控平台介绍: 常见开源监控软件 ~1.cacti、nagios、zabbix、smokeping、ope...

oschina130111
昨天
64
0
当餐饮遇上大数据,嗯真香!

之前去开了一场会,主题是「餐饮领袖新零售峰会」。认真听完了餐饮前辈和新秀们的分享,觉得获益匪浅,把脑子里的核心纪要整理了一下,今天和大家做一个简单的分享,欢迎感兴趣的小伙伴一起交...

数澜科技
昨天
26
0
DNS-over-HTTPS 的下一代是 DNS ON BLOCKCHAIN

本文作者:PETER LAI ,是 Diode 的区块链工程师。在进入软件开发领域之前,他主要是在做工商管理相关工作。Peter Lai 也是一位活跃的开源贡献者。目前,他正在与 Diode 团队一起开发基于区块...

红薯
昨天
43
0
CC攻击带来的危害我们该如何防御?

随着网络的发展带给我们很多的便利,但是同时也带给我们一些网站安全问题,网络攻击就是常见的网站安全问题。其中作为站长最常见的就是CC攻击,CC攻击是网络攻击方式的一种,是一种比较常见的...

云漫网络Ruan
昨天
27
0
实验分析性专业硕士提纲撰写要点

为什么您需要研究论文的提纲? 首先当您进行研究时,您需要聚集许多信息和想法,研究论文提纲可以较好地组织你的想法, 了解您研究资料的流畅度和程度。确保你写作时不会错过任何重要资料以此...

论文辅导员
昨天
44
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部