仿美团下拉刷新效果（大众点评下拉刷新吃包子的效果也可以这么实现）

仿美团下拉刷新效果（大众点评下拉刷新吃包子的效果也可以这么实现）

标签： android美团大众点评

        

       虽然现在有很多的下拉刷新的开源框架可以使用，并且使用起来也都是很方便。但是如果想要修改下拉刷新的显示效果，可能用那些开源框架实现起来就不是那么方便。

       

        并且在出去面试的时候，如果被人问道下拉刷新你是怎么做的，如果你告诉别人你是用的第三方的框架，那么对你的面试并没有什么好处，而且不利于你找到高薪的 工作，但是如果，你说是自己写的，那你找工作成功的几率就会大很多，而且找到高薪的工作的可能性也会更大。


       所以本文就采用自己实现的方式，实现ListView的下拉刷新，并且添加仿美团的刷新展示效果，先上效果图：


              

实现原理：

    布局

    整体的容器时使用相对布局，下层是放置了一个ImageView用于显示美团的小人，上层是放置了一个ListView(其实也可以放置别的View，看你的需要了)。下面看一下布局文件内容：


   

[html] view plaincopy
  1. <?xml version="1.0" encoding="utf-8"?>  
  2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
  3.     android:id="@+id/con"  
  4.     android:layout_width="match_parent"  
  5.     android:layout_height="match_parent">  
  6.   
  7.     <!--顶部拉出来的视图-->  
  8.     <ImageView  
  9.         android:id="@+id/refresh_img"  
  10.         android:src="@mipmap/pull_image"  
  11.         android:layout_marginTop="10dp"  
  12.         android:layout_centerHorizontal="true"  
  13.         android:layout_width="wrap_content"  
  14.         android:layout_height="wrap_content" />  
  15.   
  16.     <ListView  
  17.         android:id="@+id/list"  
  18.         android:background="@android:color/white"  
  19.         android:layout_width="match_parent"  
  20.         android:layout_height="match_parent"  
  21.         android:entries="@array/content" />  
  22.   
  23. </RelativeLayout>  

 

然后是代码，代码里注释比较详细，这里就不在用文字进行描述了，直接看代码吧，如果看不懂可以留言。代码：

 

[java] view plaincopy
    1. package com.libin.lbrefresh;  
    2.   
    3. import android.graphics.drawable.AnimationDrawable;  
    4. import android.os.Build;  
    5. import android.os.Handler;  
    6. import android.os.Message;  
    7. import android.support.v7.app.AppCompatActivity;  
    8. import android.os.Bundle;  
    9. import android.view.MotionEvent;  
    10. import android.view.View;  
    11. import android.widget.ImageView;  
    12. import android.widget.ListView;  
    13. import android.widget.RelativeLayout;  
    14. import android.widget.Toast;  
    15.   
    16.   
    17. /** 
    18.  * MotionEvent 
    19.  *   1、getY()  换算过后基于View的Y坐标 
    20.  *   2、getRawY()  不经处理基于屏幕的Y坐标 
    21.  */  
    22.   
    23. public class MainActivity extends AppCompatActivity {  
    24.   
    25.     private ListView listView;  
    26.     private float startPX;//触摸的开始点坐标  
    27.     private int startTopMargin;//ListView的原始上边距  
    28.     private RelativeLayout.LayoutParams params;  
    29.     private ImageView refreshImg;  
    30.     private int topMargin;//随手指滑动计算的上边距(即下拉的距离)  
    31.     private AnimationDrawable drawable;  
    32.     private static final int PULL_DISTANCE = 400;//下拉刷新的触发距离  
    33.     private Handler handler = new Handler(){  
    34.         @Override  
    35.         public void handleMessage(Message msg) {  
    36.             super.handleMessage(msg);  
    37.             int what = msg.what;  
    38.             //刷新结束后，复原ListView  
    39.             if(what == 100){  
    40.                 drawable.stop();  
    41.                 params.topMargin = startTopMargin;  
    42.                 listView.setLayoutParams(params);  
    43.                 refreshImg.setImageResource(R.mipmap.pull_image);  
    44.                 Toast.makeText(MainActivity.this,"刷新成功",Toast.LENGTH_SHORT).show();  
    45.                 /* 
    46.                 这里有一段更新ListView数据的代码，就是notifyDatasetChanged()等等 
    47.                  */  
    48.             }  
    49.         }  
    50.     };  
    51.   
    52.   
    53.     @Override  
    54.     protected void onCreate(Bundle savedInstanceState) {  
    55.         super.onCreate(savedInstanceState);  
    56.         setContentView(R.layout.activity_main);  
    57.         listView = (ListView) findViewById(R.id.list);  
    58.         refreshImg = (ImageView) findViewById(R.id.refresh_img);  
    59.         listView.setOnTouchListener(new View.OnTouchListener() {  
    60.             @Override  
    61.             public boolean onTouch(View v, MotionEvent event) {  
    62.                 int action = event.getAction();  
    63.                 switch (action){  
    64.                     case MotionEvent.ACTION_DOWN:  
    65.                         //记录手指初始触摸点的坐标  
    66.                         startPX = event.getRawY();  
    67.                         //记录ListView初始的上边距  
    68.                         params = (RelativeLayout.LayoutParams) listView.getLayoutParams();  
    69.                         startTopMargin = params.topMargin;  
    70.                         break;  
    71.                     case MotionEvent.ACTION_MOVE:  
    72.                         //计算手指在屏幕上滑动过的距离  
    73.                         topMargin = (int) (event.getRawY() - startPX);  
    74.                         //判断是否达到触发刷新的距离  
    75.                         if(topMargin < PULL_DISTANCE && topMargin > 0){  
    76.                             params.topMargin = topMargin;  
    77.                             listView.setLayoutParams(params);  
    78.                         }  
    79.   
    80.                         if(Build.VERSION.SDK_INT >= 11){  
    81.                             float fraction = topMargin * 1.0f / PULL_DISTANCE;  
    82.                             //缩放下拉提示小人  
    83.                             if(fraction <= 1){  
    84.                                 refreshImg.setScaleX(fraction);  
    85.                                 refreshImg.setScaleY(fraction);  
    86.                             }  
    87.                             //放出小人  
    88.                             else if(fraction > 1 && fraction <=1.1){  
    89.                                 refreshImg.setImageResource(R.mipmap.pull_end_image_frame_01);  
    90.                             }else if(fraction > 1.1 && fraction <=1.2){  
    91.                                 refreshImg.setImageResource(R.mipmap.pull_end_image_frame_02);  
    92.                             }else if(fraction > 1.2 && fraction <= 1.3){  
    93.                                 refreshImg.setImageResource(R.mipmap.pull_end_image_frame_03);  
    94.                             }else if(fraction > 1.3 && fraction <= 1.4){  
    95.                                 refreshImg.setImageResource(R.mipmap.pull_end_image_frame_04);  
    96.                             }else{  
    97.                                 refreshImg.setImageResource(R.mipmap.pull_end_image_frame_05);  
    98.                             }  
    99.                         }  
    100.                         break;  
    101.                     case MotionEvent.ACTION_UP:  
    102.                         //未触发刷新  
    103.                         if(topMargin < PULL_DISTANCE){  
    104.                             refreshImg.setImageResource(R.mipmap.pull_image);  
    105.                             params.topMargin = startTopMargin;  
    106.                             listView.setLayoutParams(params);  
    107.                         }  
    108.                         //触发刷新(这是关键点)  
    109.                         else{  
    110.                             refreshImg.setImageResource(R.drawable.refresh);  
    111.                             drawable = (AnimationDrawable) refreshImg.getDrawable();  
    112.                             drawable.start();  
    113.                             //执行刷新功能，一般是网络请求  
    114.                             new Thread(  
    115.                                     new Runnable() {  
    116.                                         @Override  
    117.                                         public void run() {  
    118.                                             //这里添加网络请求的代码，不过因为这不是刷新的关键，故用阻塞线程模拟网络请求用了3秒  
    119.                                             try {  
    120.                                                 Thread.sleep(3 * 1000);  
    121.                                             } catch (InterruptedException e) {  
    122.                                                 e.printStackTrace();  
    123.                                             }  
    124.                                             //请求完毕，处理小人  
    125.                                             handler.sendEmptyMessage(100);  
    126.                                         }  
    127.                                     }  
    128.                             ).start();  
    129.                         }  
    130.                         //提示刷新  
    131.                         float deltaY = event.getRawY() - startPX;  
    132.                         if (deltaY > PULL_DISTANCE){  
    133.                             Toast.makeText(MainActivity.this,"正在刷新...",Toast.LENGTH_SHORT).show();  
    134.                         }  
    135.                         break;  
    136.                     default:  
    137.                         break;  
    138.                 }  
    139.                 return false;  
    140.             }  
    141.         });  
    142.     }  
    143. }
posted @ 2015-12-04 19:13  清猿啸夜  阅读(611)  评论(0)  编辑  收藏  举报