您现在的位置是:首页 > 文章详情

Material Design 实战 之第五弹 —— 下拉刷新(SwipeRefreshLayout)

日期:2018-10-01点击:396

本模块共有六篇文章,参考郭神的《第一行代码》,对Material Design的学习做一个详细的笔记,大家可以一起交流一下:






引子:

img_73d644c48ad6b29332c981fdf68ad03c.png



文章提要与总结


SwipeRefreshLayout 1.SwipeRefreshLayout即是实现下拉刷新功能的核心类,它由support-v4库提供的; 2.把想要实现下拉刷新功能的控件放置到SwipeRefreshLayout里边,即可迅速让这个控件支持下拉刷新了; 3.接下来在对应的java代码中处理具体的刷新逻辑: 3.1 实例化SwipeRefreshLayout; 3.2 调用setcolorSchemeResources()方法来设置下拉刷新进度条的颜色; 3.3 调用setonRefreshListener()方法设置一个下拉刷新的监听器, 传入一个SwipeRefreshLayout.OnRefreshListener()并重写onRefresh()来处理具体的刷新逻辑; 
 3.4 刷新逻辑使用中可以使用如下多线程结构: new Thread(new Runnable() { @Override public void run() { try{ }catch (InterruptedException e){ e.printStackTrace(); } runOnUiThread(new Runnable() { @Override public void run() { } }); } }).start(); 
 其中try中书写耗时操作,然后在 runOnUiThread() 中的 run() 中获取到数据, 并adapter.notifyDataSetChanged()调用刷新数据; 最后调用swipeRefreshLayout的setRefreshing()并传入false,表示刷新事件结束同时隐藏刷新进度条; 




正文


SwipeRefreshLayout

 (英 [swaɪp]) 

SwipeRefreshLayout即是实现下拉刷新功能的核心类,它由support-v4库提供的。

把想要实现下拉刷新功能的控件放置到SwipeRefreshLayout里边,即可迅速让这个控件支持下拉刷新了。
而在这里的实战项目(MaterialTest)中,应该支持下拉刷新功能的控件是RecyclerView。

下面直接开始使用它。修改activity-main.xml:

img_dcf1cde4fe42b08f166cffd0da60dc1d.png

<?xml version="1.0" encoding="utf-8"?> <android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:id="@+id/drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" app:popupTheme="@style/ThemeOverlay.AppCompat.Light" app:layout_scrollFlags="scroll|enterAlways|snap"/> </android.support.design.widget.AppBarLayout> <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/swipe_refresh" android:layout_width="match_parent" android:layout_height="match_parent" app:layout_behavior = "@string/appbar_scrolling_view_behavior"> <android.support.v7.widget.RecyclerView android:id="@+id/recycler_view" android:layout_width="match_parent" android:layout_height="match_parent" /> </android.support.v4.widget.SwipeRefreshLayout> <android.support.design.widget.FloatingActionButton android:id="@+id/fab" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_gravity="bottom|end" android:layout_margin="16dp" android:src="@drawable/ic_done" app:elevation="8dp"/> </android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView android:id="@+id/nav_view" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_gravity="start" app:menu="@menu/nav_menu" app:headerLayout="@layout/nav_header"> </android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout> 

这里在RecyclerView的外面再嵌套一层SwipeRefreshLayout,让RecyclerView实现下拉刷新功能。

另注意,
由于RecyclerView现在变成了Swipe-RefreshLayout的子控件,
因此之前使用app:layout_behavxor声明的布局行为现在也要移到SwipeRefreshLayout中才行。

当然,虽RecyclerView已经支持下拉刷新功能,但还要在代码中处理具体的刷新逻辑才行。
下面修改MainActivity:

img_80928b6aa3666a4dbb2fdcbefb50decc.png

img_dd6ddc614cbdf8c79e9d143b532609b3.png
img_87c1f06aee54adff6fc416f2f7946584.png
//下拉刷新 private SwipeRefreshLayout swipeRefresh; ------------------------------------ //下拉刷新逻辑处理 swipeRefresh = (SwipeRefreshLayout) findViewById(R.id.swipe_refresh); swipeRefresh.setColorSchemeResources(R.color.colorPrimary); swipeRefresh.setOnRefreshListener(new SwipeRefreshLayout. OnRefreshListener(){ @Override public void onRefresh() { refreshFruits(); } }); ------------------------------------ private void refreshFruits(){ new Thread(new Runnable() { @Override public void run() { try{ Thread.sleep(2000); }catch (InterruptedException e){ e.printStackTrace(); } runOnUiThread(new Runnable() { @Override public void run() { initFruits(); adapter.notifyDataSetChanged(); swipeRefresh.setRefreshing(false); } }); } }).start(); } 

这里,
首先实例化SwipeRefreshLayout,
然后调用setcolorSchemeResources()方法来设置下拉刷新进度条的颜色,这里使用主题中的colorPrimary作为进度条的颜色。
接着调用setonRefreshListener()方法设置一个下拉刷新的监听器,当触发了下拉刷新操作的时候就会回调这个监听器的onRefresh()方法,在这个方法中处理具体的刷新逻辑。(这里可以类比setOnClickListener理解)

通常onRefresh()方法中应该是去网络上请求最新的数据,然后再将这些数据展示出来。
这里就不和网络交互了,简单地写一个refreshFruits()方法并调用它进行本地刷新操作。

refreshFruits()方法中先是开启了一个线程,然后将线程沉睡两秒钟,模拟刷新的等待过程。
因为本地刷新操作速度非常快,如果不将线程沉睡的话,刷新会即刻结束而看不到刷新的过程。
沉睡结束后使用run0nUiThread()方法将线程切换回主线程,
调用initFruits()方法重新生成数据,
接着调用FruitAdapter的notifyDataSetChanged()通知数据发生了变化并刷新adapter里面的数据,
最后调用swipeRefreshLayout的setRefreshing()并传入false,表示刷新事件结束同时隐藏刷新进度条。

重新运行一下程序,在屏幕的主界面向下拖动,会出现下拉刷新的进度条,松手后就会自动进行刷新了,效果如图:

img_599b3d75c347ad22482de6f1cbac36bd.png
刷新中

img_5872814e686e434a1c2ea2ef21da4f08.png
刷新后

下拉刷新进度条会停留两秒钟,随后自动消失,水果列表也会更新了。

原文链接:https://yq.aliyun.com/articles/686560
关注公众号

低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。

持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。

转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。

文章评论

共有0条评论来说两句吧...

文章二维码

扫描即可查看该文章

点击排行

推荐阅读

最新文章