移動開發----改造PullToRefresh下拉刷新和上拉加載


改造PullToRefresh下拉刷新和上拉加載


前言:

本篇文章主要分為兩部分,一是PullToRefresh下拉刷新和上拉加載的使用,二是PullToRefresh的改造,用自定義一個動畫替換掉Loading的動畫,如果動畫很厲害的您,就可以自己添加喜歡的動畫,做出自己想要的下拉刷新和上拉加載了。


默認效果圖:

     


改造效果圖:



第一部分:PullToRefresh的使用


步驟一:下載我們所需要的PullToRefresh,在Github上搜索PullToRefresh,下載這個zip包並解壓




步驟二:使用ImportModule導入到我們的項目中






步驟三:在我們的項目中添加依賴剛導入的PullToRefresh




步驟四:在布局中寫好使用的View,並且在代碼中使用下拉刷新


[java] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <com.handmark.pulltorefresh.library.PullToRefreshScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:layout_width="match_parent"  
  4.     android:id="@+id/pull_to_refresh_view"  
  5.     android:layout_height="match_parent">  
[java] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. public class MainActivity extends AppCompatActivity implements PullToRefreshBase.OnRefreshListener {  
  2.   
  3.     PullToRefreshScrollView scrollView;  
  4.   
  5.     Handler mHandler = new Handler(){  
  6.         @Override  
  7.         public void handleMessage(Message msg) {  
  8.             super.handleMessage(msg);  
  9.             switch (msg.what){  
  10.                 case 0:  
  11.                     scrollView.onRefreshComplete();  
  12.                     break;  
  13.             }  
  14.         }  
  15.     };  
  16.   
  17.     @Override  
  18.     protected void onCreate(Bundle savedInstanceState) {  
  19.         super.onCreate(savedInstanceState);  
  20.         setContentView(R.layout.activity_main);  
  21.   
  22.         scrollView = (PullToRefreshScrollView) findViewById(R.id.pull_to_refresh_view);  
  23.         scrollView.setOnRefreshListener(this);  
  24.     }  
  25.   
  26.     @Override  
  27.     public void onRefresh(PullToRefreshBase refreshView) {  
  28.         mHandler.sendEmptyMessageDelayed(0,2000);  
  29.     }  
  30. }  

步驟五:在布局中寫好使用的View,並且在代碼中使用下拉刷新和上拉加載


和僅僅使用下拉刷新的不同點在於:實現onRefreshListener2這個接口,在xml文件中聲明appNS(即xmlns:app="http://schemas.Android.com/apk/res-auto"),使用app:ptrMode="both"屬性,即可

[java] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <com.handmark.pulltorefresh.library.PullToRefreshScrollView xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     xmlns:app="http://schemas.android.com/apk/res-auto"  
  4.     android:id="@+id/pull_to_refresh_view"  
  5.     android:layout_width="match_parent"  
  6.     android:layout_height="match_parent"  
  7.     app:ptrMode="both">  
[java] view plain copy 在CODE上查看代碼片派生到我的代碼片
  1. public class MainActivity extends AppCompatActivity implements PullToRefreshBase.OnRefreshListener2 {  
  2.   
  3.     PullToRefreshScrollView scrollView;  
  4.   
  5.     Handler mHandler = new Handler(){  
  6.         @Override  
  7.         public void handleMessage(Message msg) {  
  8.             super.handleMessage(msg);  
  9.             switch (msg.what){  
  10.                 case 0:  
  11.                     scrollView.onRefreshComplete();  
  12.                     break;  
  13.             }  
  14.         }  
  15.     };  
  16.   
  17.     @Override  
  18.     protected void onCreate(Bundle savedInstanceState) {  
  19.         super.onCreate(savedInstanceState);  
  20.         setContentView(R.layout.activity_main);  
  21.   
  22.         scrollView = (PullToRefreshScrollView) findViewById(R.id.pull_to_refresh_view);  
  23.         scrollView.setOnRefreshListener(this);  
  24.     }  
  25.   
  26.     @Override  
  27.     public void onPullDownToRefresh(PullToRefreshBase refreshView) {  
  28.         mHandler.sendEmptyMessageDelayed(0,2000);  
  29.     }  
  30.   
  31.     @Override  
  32.     public void onPullUpToRefresh(PullToRefreshBase refreshView) {  
  33.         mHandler.sendEmptyMessageDelayed(0,2000);  
  34.     }  
  35. }  


第二部分:PullToRefresh的改造


步驟一:下拉刷新和上拉加載文字的修改,修改LoadingLayout這個類的源碼,文字放在構造函數中




步驟二:Loading動畫的修改,首先,添加三張圖片和一個xml的animation-list




步驟三:在下拉刷新中xml中,我們添加一個View來放置我們的Loading動畫




步驟四:通過代碼的追蹤,隱藏我們默認的Loading動畫,在RotateLoadingLayout這個類中


                                          



步驟五:在代碼中添加我們的自定義Loading動畫,在LoadingLayout這個類中










源碼下載:模仿京東下拉刷新,修改后完整版的效果,方便大家做商城app時使用


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
粤ICP备14056181号  © 2014-2020 ITdaan.com