仿美團下拉刷新效果(大衆點評下拉刷新吃包子的效果也能夠這麼實現)

仿美團下拉刷新效果(大衆點評下拉刷新吃包子的效果也能夠這麼實現)

標籤: android美團大衆點評

        

       雖然如今有不少的下拉刷新的開源框架可使用,而且使用起來也都是很方便。可是若是想要修改下拉刷新的顯示效果,可能用那些開源框架實現起來就不是那麼方便。html

       

        而且在出去面試的時候,若是被人問道下拉刷新你是怎麼作的,若是你告訴別人你是用的第三方的框架,那麼對你的面試並無什麼好處,並且不利於你找到高薪的 工做,可是若是,你說是本身寫的,那你找工做成功的概率就會大不少,並且找到高薪的工做的可能性也會更大。java


       因此本文就採用本身實現的方式,實現ListView的下拉刷新,而且添加仿美團的刷新展現效果,先上效果圖:android


              

實現原理:面試

    佈局網絡

    總體的容器時使用相對佈局,下層是放置了一個ImageView用於顯示美團的小人,上層是放置了一個ListView(其實也能夠放置別的View,看你的須要了)。下面看一下佈局文件內容:app


   

[html] view plain copy
  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 plain copy
    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.  *   一、getY()  換算事後基於View的Y座標 
    20.  *   二、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. }
相關文章
相關標籤/搜索