Android自定義下拉重新整理動畫--仿百度外賣下拉重新整理

阿新 • • 發佈：2019-01-30

好久沒寫部落格了，小編之前一段時間一直在找工作，從天津來到了我們的大帝都，感覺還不錯。好了廢話不多說了，開始我們今天的主題吧。現如今的APP各式各樣，同樣也帶來了各種需求，一個下拉重新整理都能玩出花樣了，前兩天訂飯的時候不經意間看到了“百度外賣”的下拉重新整理，今天的主題就是它–自定義下拉重新整理動畫。

看一下實現效果吧：
這裡寫圖片描述

動畫

我們先來看看Android中的動畫吧：
Android中的動畫分為三種：

Tween動畫，這一類的動畫提供了旋轉、平移、縮放等效果。
- Alpha – 淡入淡出
- Scale – 縮放效果
- Roate – 旋轉效果
- Translate – 平移效果
Frame動畫（幀動畫），這一類動畫可以建立一個Drawable序列，按照指定時間間歇一個一個顯示出來。

Property動畫（屬性動畫），Android3.0之後引入出來的屬性動畫，它更改的是物件的實際屬性。

分析

這裡寫圖片描述

我們可以看到百度外賣的下拉重新整理的頭是一個騎車的快遞員在路上疾行，分析一下我們得到下面的動畫：

背景圖片的平移動畫
太陽的自旋轉動畫
兩個小輪子的自旋轉動畫

這就很簡單了，接下來我們去百度外面的圖片資原始檔裡找到這幾張圖片：（下載百度外賣的apk直接解壓即可）
這裡寫圖片描述

定義下拉重新整理標頭檔案：headview.xml

這裡注意一下：我們定義了兩張背景圖片的ImageView是為了可以實現背景的平移動畫效果。

這裡寫圖片描述

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-pi" style="color: rgb(0, 102, 102); box-sizing: border-box;"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">RelativeLayout</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:orientation</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"vertical"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span>
    <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>></span>


    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ImageView
</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/iv_back1"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/pull_back"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"100dp"</span> /></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ImageView
</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/iv_back2"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:src</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/pull_back"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"match_parent"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"100dp"</span> /></span>

    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">RelativeLayout
</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/main"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_centerHorizontal</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"true"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"wrap_content"</span>></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ImageView
</span>            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"45dp"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/iv_rider"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:background</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/pull_rider"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"50dp"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"50dp"</span> /></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ImageView
</span>            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/wheel1"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginLeft</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"10dp"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"90dp"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:background</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/pull_wheel"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"15dp"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"15dp"</span> /></span>
        <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ImageView
</span>            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/wheel2"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginLeft</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"40dp"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"90dp"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:background</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/pull_wheel"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"15dp"</span>
            <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"15dp"</span> /></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">RelativeLayout</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">ImageView
</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:id</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/ivsun"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_marginTop</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"20dp"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_toRightOf</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@+id/main"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:background</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@drawable/pull_sun"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_width</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"30dp"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:layout_height</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"30dp"</span> /></span>

<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">RelativeLayout</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li><li style="box-sizing: border-box; padding: 0px 5px;">48</li><li style="box-sizing: border-box; padding: 0px 5px;">49</li><li style="box-sizing: border-box; padding: 0px 5px;">50</li><li style="box-sizing: border-box; padding: 0px 5px;">51</li><li style="box-sizing: border-box; padding: 0px 5px;">52</li><li style="box-sizing: border-box; padding: 0px 5px;">53</li></ul>

接下來我們定義動畫效果：

背景圖片的平移效果：
實現兩個animation xml檔案，一個起始位置在100%，結束位置在0%，設定repeat屬性為迴圈往復。

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-pi" style="color: rgb(0, 102, 102); box-sizing: border-box;"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">set</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:interpolator</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@android:anim/accelerate_interpolator"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">translate</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:fromXDelta</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"100%p"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:toXDelta</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0%p"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:repeatMode</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"restart"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:interpolator</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@android:anim/linear_interpolator"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:repeatCount</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"infinite"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:duration</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"5000"</span> /></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">set</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

另一個起始位置在0%，結束位置在-100%

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-pi" style="color: rgb(0, 102, 102); box-sizing: border-box;"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">set</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:interpolator</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@android:anim/accelerate_interpolator"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">translate</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:fromXDelta</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0%p"</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:toXDelta</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"-100%p"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:repeatMode</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"restart"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:interpolator</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"@android:anim/linear_interpolator"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:repeatCount</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"infinite"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:duration</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"5000"</span> /></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">set</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li></ul>

太陽圍繞中心旋轉動畫：
從0-360度開始迴圈旋轉，旋轉所用時間為1s，旋轉中心距離view的左定點上邊緣為50%的距離，也就是正中心。

下面是具體屬性：

android:fromDegrees 起始的角度度數

android:toDegrees 結束的角度度數，負數表示逆時針，正數表示順時針。如10圈則比android:fromDegrees大3600即可

android:pivotX 旋轉中心的X座標

浮點數或是百分比。浮點數表示相對於Object的左邊緣，如5; 百分比表示相對於Object的左邊緣，如5%; 另一種百分比表示相對於父容器的左邊緣，如5%p; 一般設定為50%表示在Object中心

android:pivotY 旋轉中心的Y座標

浮點數或是百分比。浮點數表示相對於Object的上邊緣，如5; 百分比表示相對於Object的上邊緣，如5%; 另一種百分比表示相對於父容器的上邊緣，如5%p; 一般設定為50%表示在Object中心

android:duration 表示從android:fromDegrees轉動到android:toDegrees所花費的時間，單位為毫秒。可以用來計算速度。

android:interpolator表示變化率，但不是執行速度。一個插補屬性，可以將動畫效果設定為加速，減速，反覆，反彈等。預設為開始和結束慢中間快，

android:startOffset 在呼叫start函式之後等待開始執行的時間，單位為毫秒，若為10，表示10ms後開始執行

android:repeatCount 重複的次數，預設為0，必須是int，可以為-1表示不停止

android:repeatMode 重複的模式，預設為restart，即重頭開始重新執行，可以為reverse即從結束開始向前重新執行。在android:repeatCount大於0或為infinite時生效

android:detachWallpaper 表示是否在桌布上執行

android:zAdjustment 表示被animated的內容在執行時在z軸上的位置，預設為normal。

normal保持內容當前的z軸順序

top執行時在最頂層顯示

bottom執行時在最底層顯示

<code class="hljs xml has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-pi" style="color: rgb(0, 102, 102); box-sizing: border-box;"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">set</span> <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">xmlns:android</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"http://schemas.android.com/apk/res/android"</span>></span>
    <span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"><<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">rotate
</span>        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:fromDegrees</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"0"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:toDegrees</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"360"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:duration</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"1000"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:repeatCount</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"-1"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:pivotX</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"50%"</span>
        <span class="hljs-attribute" style="box-sizing: border-box; color: rgb(102, 0, 102);">android:pivotY</span>=<span class="hljs-value" style="box-sizing: border-box; color: rgb(0, 136, 0);">"50%"</span> /></span>
<span class="hljs-tag" style="color: rgb(0, 102, 102); box-sizing: border-box;"></<span class="hljs-title" style="box-sizing: border-box; color: rgb(0, 0, 136);">set</span>></span></code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221, 221, 221); list-style: none; text-align: right; background-color: rgb(238, 238, 238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>

同理輪子的動畫也一樣，不佔程式碼了。

動畫定義完了我們開始定義下拉重新整理列表，下拉重新整理網上有很多，不詳細的說了，簡單的改造一下，根據重新整理狀態開啟關閉動畫即可。
註釋寫的很詳細，看一下程式碼吧：

<code class="hljs java has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro', monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">package</span> com.hankkin.baidugoingrefreshlayout;

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.AbsListView;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.ListView;

<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.content.Context;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.util.AttributeSet;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.LayoutInflater;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.MotionEvent;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.View;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.ViewGroup;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.animation.Animation;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.view.animation.AnimationUtils;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.ImageView;
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">import</span> android.widget.RelativeLayout;

<span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
 * Created by Hankkin on 16/4/10.
 */</span>
<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">class</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">BaiDuRefreshListView</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">extends</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">ListView</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">implements</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">AbsListView</span>.<span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">OnScrollListener</span>{</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> DONE = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>;      <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//重新整理完畢狀態</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> PULL_TO_REFRESH = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//下拉重新整理狀態</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> RELEASE_TO_REFRESH = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">2</span>;    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//釋放狀態</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> REFRESHING = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>;    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//正在重新整理狀態</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">static</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">final</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> RATIO = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>;
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> RelativeLayout headView;    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//下拉重新整理頭</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> headViewHeight; <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//頭高度</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> startY;   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//開始Y座標</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> offsetY;  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//Y軸偏移量</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> OnBaiduRefreshListener mOnRefreshListener;  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//重新整理介面</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> state;  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//狀態值</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> mFirstVisibleItem;  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//第一項可見item索引</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> isRecord;   <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//是否記錄</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> isEnd;  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//是否結束</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> isRefreable;    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//是否重新整理</span>

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> ImageView ivWheel1,ivWheel2;    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//輪組圖片元件</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> ImageView ivRider;  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//騎手圖片元件</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> ImageView ivSun,ivBack1,ivBack2;    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//太陽、背景圖片1、背景圖片2</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Animation wheelAnimation,sunAnimation;  <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//輪子、太陽動畫</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> Animation backAnimation1,backAnimation2;    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//兩張背景圖動畫</span>

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">BaiDuRefreshListView</span>(Context context) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(context);
        init(context);
    }

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">BaiDuRefreshListView</span>(Context context, AttributeSet attrs) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(context, attrs);
        init(context);
    }

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-title" style="box-sizing: border-box;">BaiDuRefreshListView</span>(Context context, AttributeSet attrs, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> defStyleAttr) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">super</span>(context, attrs, defStyleAttr);
        init(context);
    }

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-class" style="box-sizing: border-box;"><span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">interface</span> <span class="hljs-title" style="box-sizing: border-box; color: rgb(102, 0, 102);">OnBaiduRefreshListener</span>{</span>
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> onRefresh();
    }

    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
     * 回撥介面，想實現下拉重新整理的listview實現此介面
     *<span class="hljs-javadoctag" style="color: rgb(102, 0, 102); box-sizing: border-box;"> @param</span> onRefreshListener
     */</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">setOnBaiduRefreshListener</span>(OnBaiduRefreshListener onRefreshListener){
        mOnRefreshListener = onRefreshListener;
        isRefreable = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;
    }

    <span class="hljs-javadoc" style="color: rgb(136, 0, 0); box-sizing: border-box;">/**
     * 重新整理完畢，從主執行緒傳送過來，並且改變headerView的狀態和文字動畫資訊
     */</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">setOnRefreshComplete</span>(){
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//一定要將isEnd設定為true，以便於下次的下拉重新整理</span>
        isEnd = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;
        state = DONE;

        changeHeaderByState(state);
    }

    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">init</span>(Context context) {
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//關閉view的OverScroll</span>
        setOverScrollMode(OVER_SCROLL_NEVER);
        setOnScrollListener(<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//載入頭佈局</span>
        headView = (RelativeLayout) LayoutInflater.from(context).inflate(R.layout.headview,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">this</span>,<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//測量頭佈局</span>
        measureView(headView);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//給ListView新增頭佈局</span>
        addHeaderView(headView);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//設定標頭檔案隱藏在ListView的第一項</span>
        headViewHeight = headView.getMeasuredHeight();
        headView.setPadding(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, -headViewHeight, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>, <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);

        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//獲取頭佈局圖片元件</span>
        ivRider = (ImageView) headView.findViewById(R.id.iv_rider);
        ivSun = (ImageView) headView.findViewById(R.id.ivsun);
        ivWheel1 = (ImageView) headView.findViewById(R.id.wheel1);
        ivWheel2 = (ImageView) headView.findViewById(R.id.wheel2);
        ivBack1 = (ImageView) headView.findViewById(R.id.iv_back1);
        ivBack2 = (ImageView) headView.findViewById(R.id.iv_back2);
        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//獲取動畫</span>
        wheelAnimation = AnimationUtils.loadAnimation(context, R.anim.tip);
        sunAnimation = AnimationUtils.loadAnimation(context, R.anim.tip1);

        backAnimation1 = AnimationUtils.loadAnimation(context, R.anim.a);
        backAnimation2 = AnimationUtils.loadAnimation(context, R.anim.b);

        state = DONE;
        isEnd = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;
        isRefreable = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">false</span>;


    }

    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onScrollStateChanged</span>(AbsListView absListView, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> i) {
    }
    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">void</span> <span class="hljs-title" style="box-sizing: border-box;">onScroll</span>(AbsListView absListView, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> firstVisibleItem, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> visibleItemCount, <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">int</span> totalItemCount) {
        mFirstVisibleItem = firstVisibleItem;
    }

    <span class="hljs-annotation" style="color: rgb(155, 133, 157); box-sizing: border-box;">@Override</span>
    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">public</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">boolean</span> <span class="hljs-title" style="box-sizing: border-box;">onTouchEvent</span>(MotionEvent ev) {
        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (isEnd) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果現在時結束的狀態，即重新整理完畢了，可以再次重新整理了，在onRefreshComplete中設定</span>
            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (isRefreable) {<span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果現在是可重新整理狀態   在setOnMeiTuanListener中設定為true</span>
                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">switch</span> (ev.getAction()){
                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//使用者按下</span>
                    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> MotionEvent.ACTION_DOWN:
                        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果當前是在listview頂部並且沒有記錄y座標</span>
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (mFirstVisibleItem == <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> && !isRecord) {
                            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//將isRecord置為true，說明現在已記錄y座標</span>
                            isRecord = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;
                            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//將當前y座標賦值給startY起始y座標</span>
                            startY = ev.getY();
                        }
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">break</span>;
                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//使用者滑動</span>
                    <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">case</span> MotionEvent.ACTION_MOVE:
                        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//再次得到y座標，用來和startY相減來計算offsetY位移值</span>
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> tempY = ev.getY();
                        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//再起判斷一下是否為listview頂部並且沒有記錄y座標</span>
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (mFirstVisibleItem == <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span> && !isRecord) {
                            isRecord = <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">true</span>;
                            startY = tempY;
                        }
                        <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果當前狀態不是正在重新整理的狀態，並且已經記錄了y座標</span>
                        <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (state!=REFRESHING && isRecord ) {
                            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//計算y的偏移量</span>
                            offsetY = tempY - startY;
                            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//計算當前滑動的高度</span>
                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> currentHeight = (-headViewHeight+offsetY/<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">3</span>);
                            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//用當前滑動的高度和頭部headerView的總高度進行比 計算出當前滑動的百分比 0到1</span>
                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">float</span> currentProgress = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>+currentHeight/headViewHeight;
                            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果當前百分比大於1了，將其設定為1，目的是讓第一個狀態的橢圓不再繼續變大</span>
                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (currentProgress>=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>) {
                                currentProgress = <span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">1</span>;
                            }
                            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果當前的狀態是放開重新整理，並且已經記錄y座標</span>
                            <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (state == RELEASE_TO_REFRESH && isRecord) {

                                setSelection(<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>);
                                <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果當前滑動的距離小於headerView的總高度</span>
                                <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (-headViewHeight+offsetY/RATIO<<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) {
                                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//將狀態置為下拉重新整理狀態</span>
                                    state = PULL_TO_REFRESH;
                                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//根據狀態改變headerView，主要是更新動畫和文字等資訊</span>
                                    changeHeaderByState(state);
                                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果當前y的位移值小於0，即為headerView隱藏了</span>
                                }<span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">else</span> <span class="hljs-keyword" style="color: rgb(0, 0, 136); box-sizing: border-box;">if</span> (offsetY<=<span class="hljs-number" style="color: rgb(0, 102, 102); box-sizing: border-box;">0</span>) {
                                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//將狀態變為done</span>
                                    state = DONE;
                                    stopAnim();
                                    <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//根據狀態改變headerView，主要是更新動畫和文字等資訊</span>
                                    changeHeaderByState(state);
                                }
                            }
                            <span class="hljs-comment" style="color: rgb(136, 0, 0); box-sizing: border-box;">//如果當前狀態為下拉重新整理並且已經記錄y座標</span>
                            <span class="hljs-keyword" styl

Android自定義下拉重新整理動畫--仿百度外賣下拉重新整理

好久沒寫部落格了，小編之前一段時間一直在找工作，從天津來到了我們的大帝都，感覺還不錯。好了廢話不多說了，開始我們今天的主題吧。現如今的APP各式各樣，同樣也帶來了各種需求，一個下拉重新整理都能玩出花樣了，前兩天訂飯的時候不經意間看到了“百度外賣”的下拉重新整理，今天

CoordinateLayout 自定義Behavior 仿百度外賣效果實踐

高仿百度外賣效果程式碼地址：https://github.com/yaodiwei/CoordinatorLayoutTester 真百度外賣效果自定義Behavior一半分為兩種型別一種是重寫layoutDependsOn和onDepend

Android自定義控制元件實戰——實現仿IOS下拉重新整理上拉載入 PullToRefreshLayout

下拉重新整理控制元件，網上有很多版本，有自定義Layout佈局的，也有封裝控制元件的，各種實現方式的都有。但是很少有人告訴你具體如何實現的，今天我們就來一步步實現自己封裝的 PullToRefreshLayout 完美的解決下拉重新整理，上拉載入問題。

Android 自定義View之咖啡動畫

文章目錄效果畫杯子畫杯墊畫煙霧效果大概思路自定義view，直接繼承view 複寫onSizeChanged()方法，在此計算杯墊，杯子，煙霧效果的path 在onDraw()方法中，描繪杯墊，杯子處理煙霧動畫效果畫杯子這裡需要畫兩部分內容，第

Android 自定義View之下雨動畫

文章目錄效果思路畫雲畫雨滴優化效果開始前先做個熱身( ˘•灬•˘ ) 自己實現比較容易，但是到了要出部落格整理思路，總結要點的時候就撓頭，不知雲所以，所以最簡單的還是如果對安卓UI有興趣的朋友可以加我好友互相探討，思路思路比較簡單，整個view無

【Android自定義控制元件】之仿網易星球浮動小球

仿網易星球浮動小球讀唄開發過程中遇到新需求，類似於網易星球收集黑鑽的介面，考慮到可能也有人會使用，索性封裝成庫，後面好移植使用先看看需要實現的效果：需求分析：資料集合可能是int、double、float等型別小球位置隨機沒有資料時

Android 自定義兩球旋轉動畫效果

自定義一個兩球旋轉動畫效果，可以用於載入時的動畫展示先定義attrs屬性 <resources> <declare-styleable name="BallRotationAnim"> <!--球最大半徑

Android自定義控制元件：動畫類---逐幀動畫AnimationDrawable

1：概述 Android動畫包括View Animation(檢視動畫)和Property Animator(屬性動畫)，而View Animation包括Tween An

Android自定義控制元件：動畫類----alpha、scale、translate、rotate、set的xml屬性及用法

二、下面我們逐個講講每個標籤的屬性及用法 1、scale標籤——調節尺寸 1> 自有屬性 scale標籤是縮放動畫，可以實現動態調控制元件尺寸的效果，有下面幾個屬性： android:fromXScale 起始的X方向上相對自身的縮放比例，浮點值，比如1.0代表自身無變化，

Android自定義view之屬性動畫一

Android 裡動畫是有一些分類的：動畫可以分為兩類：Animation 和 Transition；其中 Animation 又可以再分為 View Animation 和 Property Animation 兩類： View Animation 是純粹基於 framew

Android自定義Toast檢視和動畫

在Android Toast基礎與原理中，我們對Toast的原始碼進行了分析。我們也對Toast的實現原理有了一定的瞭解。接下來我們將編寫一個工具類，來完成Toast的自定義檢視和動畫。一、實現原理分析通過上篇文章，我們知道Toast是通過內部類TN（一個ITra

Android 自定義View實現波浪動畫

效果演示程式碼呼叫與實現效果 xml中呼叫 <developer.shivam.waveview.Wave android:layout_width="match_parent" android:la

android自定義帶入場出場動畫dialog

先上效果圖 res資料夾下建一個anim資料夾，然後anim資料夾下建這倆xml：dialog_in.xml和dialog_out.xml dialog_in.xml <?xml version="1.0" encoding="utf-8"?> <se

Android自定義View（LimitScrollerView－仿天貓廣告欄上下滾動效果）

最近專案中需要在首頁做一個跑馬燈型別的廣告欄，最後上面決定仿照天貓的廣告欄效果做(中間部位)，效果圖如下（右邊是我們的效果）：天貓上搶購那一欄的廣告條可以向上滾動，每次展示一條廣告，展示一定時間後，第二條廣告從下往上頂起。但

自定義點選彈出設定百度商橋

我們在使用百度商橋時，有時想通過點選自己的按鈕開啟商橋聊天溝通，此時就可以使用以下方法。 <a class="open_shangqiao" href="javascript:void(0);">彈出百度商橋</a> <script type="text/jav

ios 一步一步學會自定義地圖吹出框(CalloutView)-->(百度地圖，高德地圖,google地圖)

前言在ios上邊使用地相簿的同學肯定遇到過這樣的問題：吹出框只能設定title和subtitle和左右的view，不管是百度地圖還是高德地圖還是自帶的google地圖，只提供了這四個屬性，如果想新增更多的view，只能自定義。可是，類庫只能看到.h檔案，.m都看不

ios 一步一步學會自定義地圖吹出框(CalloutView)-->(百度地圖，高德地圖,google地圖)...

前言在ios上邊使用地相簿的同學肯定遇到過這樣的問題：吹出框只能設定title和subtitle和左右的view，不管是百度地圖還是高德地圖還是自帶的google地圖，只提供了這四個屬性，如果想新增更多的view，只能自定義。可是，類庫只能看到.h檔案，.m都看不到

建立你的輸入法高階自定義短語（以PC版百度拼音輸入法為例）

由於我在Markdown寫作以及java程式碼中經常用到某些固定的短語，為此製作了自己的短語庫。比如通過輸入“sjx”就可以輸出“▲”、輸入“itable”就可以建立一個HTML語法的表格： PC版百度拼音輸入法的自定義短語功能的位置：

仿餓了麼，百度外賣這些App的雙ListView列表聯動效果

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="wrap_content

Android自定義控制元件之仿汽車之家下拉重新整理

關於下拉重新整理的實現原理我在上篇文章Android自定義控制元件之仿美團下拉重新整理中已經詳細介紹過了，這篇文章主要介紹錶盤的動畫實現原理汽車之家的下拉重新整理分為三個狀態：第一個狀態為下拉重新整理狀態(pull to refresh)，在這個狀

Android自定義下拉重新整理動畫--仿百度外賣下拉重新整理

動畫

分析

相關推薦