Android View体系（二）实现View滑动的六种方法

http://blog.csdn.net/itachi85/article/details/50724558

相关文章：
Android View体系（一）视图座标系

1.View的滑动简介

View的滑动是Android实现自定义控件的基础，同时在开发中我们也难免会遇到View的滑动的处理。其实不管是那种滑动的方式基本思想都是类似的：当触摸事件传到View时，系统记下触摸点的座标，手指移动时系统记下移动后的触摸的座标并算出偏移量，并通过偏移量来修改View的座标。
实现View滑动有很多种方法，这篇文章主要讲解六种滑动的方法，分别是：layout()、offsetLeftAndRight()与offsetTopAndBottom()、LayoutParams、动画、scollTo与scollBy和Scroller；在下一篇文章我们会详细介绍属性动画。

2.实现View滑动的六种方法

layout()

view进行绘制的时候会调用onLayout()方法来设置显示的位置，因此我们同样也可以通过修改View的left、top、right、bottom这四种属性来控制View的座标。首先我们要自定义一个View，在onTouchEvent()方法中获取触摸点的座标：

<code class="hljs cs has-numbering">   <span class="hljs-keyword">public</span> boolean <span class="hljs-title">onTouchEvent</span>(MotionEvent <span class="hljs-keyword">event</span>) {
        <span class="hljs-comment">//获取到手指处的横座标和纵座标</span>
        <span class="hljs-keyword">int</span> x = (<span class="hljs-keyword">int</span>) <span class="hljs-keyword">event</span>.getX();
        <span class="hljs-keyword">int</span> y = (<span class="hljs-keyword">int</span>) <span class="hljs-keyword">event</span>.getY();

        <span class="hljs-keyword">switch</span> (<span class="hljs-keyword">event</span>.getAction()) {
            <span class="hljs-keyword">case</span> MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                <span class="hljs-keyword">break</span>;

...</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li></ul>

接下来我们在ACTION_MOVE事件中计算偏移量，再调用layout()方法重新放置这个自定义View的位置就好了：

<code class="hljs glsl has-numbering">            <span class="hljs-keyword">case</span> MotionEvent.ACTION_MOVE:
                <span class="hljs-comment">//计算移动的距离</span>
                <span class="hljs-keyword">int</span> offsetX = x - lastX;
                <span class="hljs-keyword">int</span> offsetY = y - lastY;
                <span class="hljs-comment">//调用layout方法来重新放置它的位置</span>
                <span class="hljs-keyword">layout</span>(getLeft()+offsetX, getTop()+offsetY,
                        getRight()+offsetX , getBottom()+offsetY);
                <span class="hljs-keyword">break</span>;</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul>

当我们每次移动时都会调用layout()方法来对自己重新布局，从而达到移动View的效果。

自定义View的全部代码(CustomView.java)：

<code class="hljs java has-numbering"><span class="hljs-keyword">package</span> com.example.liuwangshu.moonviewslide;
<span class="hljs-keyword">import</span> android.content.Context;
<span class="hljs-keyword">import</span> android.util.AttributeSet;
<span class="hljs-keyword">import</span> android.view.MotionEvent;
<span class="hljs-keyword">import</span> android.view.View;

<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">CustomView</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">View</span> {</span>
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> lastX;
    <span class="hljs-keyword">private</span> <span class="hljs-keyword">int</span> lastY;

    <span class="hljs-keyword">public</span> <span class="hljs-title">CustomView</span>(Context context, AttributeSet attrs, <span class="hljs-keyword">int</span> defStyleAttr) {
        <span class="hljs-keyword">super</span>(context, attrs, defStyleAttr);
    }
    <span class="hljs-keyword">public</span> <span class="hljs-title">CustomView</span>(Context context, AttributeSet attrs) {
        <span class="hljs-keyword">super</span>(context, attrs);
    }

    <span class="hljs-keyword">public</span> <span class="hljs-title">CustomView</span>(Context context) {
        <span class="hljs-keyword">super</span>(context);
    }

    <span class="hljs-keyword">public</span> <span class="hljs-keyword">boolean</span> <span class="hljs-title">onTouchEvent</span>(MotionEvent event) {
        <span class="hljs-comment">//获取到手指处的横座标和纵座标</span>
        <span class="hljs-keyword">int</span> x = (<span class="hljs-keyword">int</span>) event.getX();
        <span class="hljs-keyword">int</span> y = (<span class="hljs-keyword">int</span>) event.getY();

        <span class="hljs-keyword">switch</span> (event.getAction()) {
            <span class="hljs-keyword">case</span> MotionEvent.ACTION_DOWN:
                lastX = x;
                lastY = y;
                <span class="hljs-keyword">break</span>;

            <span class="hljs-keyword">case</span> MotionEvent.ACTION_MOVE:
                <span class="hljs-comment">//计算移动的距离</span>
                <span class="hljs-keyword">int</span> offsetX = x - lastX;
                <span class="hljs-keyword">int</span> offsetY = y - lastY;
                <span class="hljs-comment">//调用layout方法来重新放置它的位置</span>
                layout(getLeft()+offsetX, getTop()+offsetY,
                        getRight()+offsetX , getBottom()+offsetY);
                <span class="hljs-keyword">break</span>;
        }

        <span class="hljs-keyword">return</span> <span class="hljs-keyword">true</span>;
    }
}
</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li></ul>

布局中引用自定义View：

<code class="hljs xml has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
    <span class="hljs-attribute">xmlns:tools</span>=<span class="hljs-value">"http://schemas.android.com/tools"</span>
    <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>
    <span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span>></span>

    <span class="hljs-tag"><<span class="hljs-title">com.example.liuwangshu.moonviewslide.CustomView
</span>        <span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/customview"</span>
        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"80dp"</span>
        <span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"80dp"</span>
        <span class="hljs-attribute">android:layout_margin</span>=<span class="hljs-value">"50dp"</span>
        <span class="hljs-attribute">android:background</span>=<span class="hljs-value">"@android:color/holo_red_light"</span> /></span>
<span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span>
</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li></ul>

offsetLeftAndRight()与offsetTopAndBottom()

这两种方法和layout()方法效果方法差不多，使用也差不多，我们将ACTION_MOVE中的代码替换成如下代码：

<code class="hljs cs has-numbering">            <span class="hljs-keyword">case</span> MotionEvent.ACTION_MOVE:
                <span class="hljs-comment">//计算移动的距离</span>
                <span class="hljs-keyword">int</span> offsetX = x - lastX;
                <span class="hljs-keyword">int</span> offsetY = y - lastY;
                <span class="hljs-comment">//对left和right进行偏移</span>
                offsetLeftAndRight(offsetX);
                <span class="hljs-comment">//对top和bottom进行偏移</span>
                offsetTopAndBottom(offsetY);
                <span class="hljs-keyword">break</span>;</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>

LayoutParams（改变布局参数）

LayoutParams主要保存了一个View的布局参数，因此我们可以通过LayoutParams来改变View的布局的参数从而达到了改变View的位置的效果。同样的我们将ACTION_MOVE中的代码替换成如下代码：

<code class="hljs avrasm has-numbering">  LinearLayout<span class="hljs-preprocessor">.LayoutParams</span> layoutParams= (LinearLayout<span class="hljs-preprocessor">.LayoutParams</span>) getLayoutParams()<span class="hljs-comment">;</span>
                layoutParams<span class="hljs-preprocessor">.leftMargin</span> = getLeft() + offsetX<span class="hljs-comment">;</span>
                layoutParams<span class="hljs-preprocessor">.topMargin</span> = getTop() + offsetY<span class="hljs-comment">;</span>
                setLayoutParams(layoutParams)<span class="hljs-comment">;</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

因为父控件是LinearLayout，所以我们用了LinearLayout.LayoutParams，如果父控件是RelativeLayout则要使用RelativeLayout.LayoutParams。除了使用布局的LayoutParams外，我们还可以用ViewGroup.MarginLayoutParams来实现：

<code class="hljs avrasm has-numbering">                ViewGroup<span class="hljs-preprocessor">.MarginLayoutParams</span> layoutParams = (ViewGroup<span class="hljs-preprocessor">.MarginLayoutParams</span>) getLayoutParams()<span class="hljs-comment">;</span>
                layoutParams<span class="hljs-preprocessor">.leftMargin</span> = getLeft() + offsetX<span class="hljs-comment">;</span>
                layoutParams<span class="hljs-preprocessor">.topMargin</span> = getTop() + offsetY<span class="hljs-comment">;</span>
                setLayoutParams(layoutParams)<span class="hljs-comment">;</span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

动画

可以采用View动画来移动，在res目录新建anim文件夹并创建translate.xml：

<code class="hljs xml has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag"><<span class="hljs-title">set</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>></span>
    <span class="hljs-tag"><<span class="hljs-title">translate</span> <span class="hljs-attribute">android:fromXDelta</span>=<span class="hljs-value">"0"</span> <span class="hljs-attribute">android:toXDelta</span>=<span class="hljs-value">"300"</span> <span class="hljs-attribute">android:duration</span>=<span class="hljs-value">"1000"</span>/></span>
<span class="hljs-tag"></<span class="hljs-title">set</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

在Java代码中引用：

<code class="hljs avrasm has-numbering">  mCustomView<span class="hljs-preprocessor">.setAnimation</span>(AnimationUtils<span class="hljs-preprocessor">.loadAnimation</span>(this, R<span class="hljs-preprocessor">.anim</span><span class="hljs-preprocessor">.translate</span>))<span class="hljs-comment">;</span></code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

当然使用属性动画移动那就更简单了，我们让CustomView在1000毫秒内沿着X轴像右平移300像素：

<code class="hljs avrasm has-numbering">ObjectAnimator<span class="hljs-preprocessor">.ofFloat</span>(mCustomView,<span class="hljs-string">"translationX"</span>,<span class="hljs-number">0</span>,<span class="hljs-number">300</span>)<span class="hljs-preprocessor">.setDuration</span>(<span class="hljs-number">1000</span>)<span class="hljs-preprocessor">.start</span>()<span class="hljs-comment">;</span></code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

scollTo与scollBy

scollTo(x,y)表示移动到一个具体的座标点，而scollBy(dx,dy)则表示移动的增量为dx、dy。其中scollBy最终也是要调用scollTo的。scollTo、scollBy移动的是View的内容，如果在ViewGroup中使用则是移动他所有的子View。我们将ACTION_MOVE中的代码替换成如下代码：

<code class="hljs lasso has-numbering"> ((View)getParent())<span class="hljs-built_in">.</span>scrollBy(<span class="hljs-attribute">-offsetX</span>,<span class="hljs-attribute">-offsetY</span>);</code><ul style="display: block;" class="pre-numbering"><li>1</li></ul>

这里要实现CustomView随着我们手指移动的效果的话，我们就需要将偏移量设置为负值。

Scroller

我们用scollTo/scollBy方法来进行滑动时，这个过程是瞬间完成的，所以用户体验不大好。这里我们可以使用Scroller来实现有过度效果的滑动，这个过程不是瞬间完成的，而是在一定的时间间隔完成的。Scroller本身是不能实现View的滑动的，它需要配合View的computeScroll()方法才能弹性滑动的效果。
在这里我们实现CustomView平滑的向右移动。

• 首先我们要初始化Scroller：

<code class="hljs java has-numbering">  <span class="hljs-keyword">public</span> <span class="hljs-title">CustomView</span>(Context context, AttributeSet attrs) {
        <span class="hljs-keyword">super</span>(context, attrs);
        mScroller = <span class="hljs-keyword">new</span> Scroller(context);
    }</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li></ul>

• 接下来重写computeScroll()方法，系统会在绘制View的时候在draw()方法中调用该方法，这个方法中我们调用父类的scrollTo()方法并通过Scroller来不断获取当前的滚动值，每滑动一小段距离我们就调用invalidate()方法不断的进行重绘，重绘就会调用computeScroll()方法，这样我们就通过不断的移动一个小的距离并连贯起来就实现了平滑移动的效果：

<code class="hljs java has-numbering">    <span class="hljs-annotation">@Override</span>
    <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">computeScroll</span>() {
        <span class="hljs-keyword">super</span>.computeScroll();
        <span class="hljs-keyword">if</span>(mScroller.computeScrollOffset()){
            ((View) getParent()).scrollTo(mScroller.getCurrX(),mScroller.getCurrY());
             <span class="hljs-comment">//通过不断的重绘不断的调用computeScroll方法</span>
             invalidate();
        }  
    }</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li></ul>

• 调用Scroller.startScroll()方法。我们在CustomView中写一个smoothScrollTo()方法，调用Scroller.startScroll()方法，在2000毫秒内沿X轴平移delta像素：

<code class="hljs cs has-numbering">  <span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">smoothScrollTo</span>(<span class="hljs-keyword">int</span> destX,<span class="hljs-keyword">int</span> destY){
        <span class="hljs-keyword">int</span> scrollX=getScrollX();
        <span class="hljs-keyword">int</span> delta=destX-scrollX;
        <span class="hljs-comment">//1000秒内滑向destX</span>
        mScroller.startScroll(scrollX,<span class="hljs-number">0</span>,delta,<span class="hljs-number">0</span>,<span class="hljs-number">2000</span>);
        invalidate();
    }</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li></ul>

• 最后我们在ViewSlideActivity.java中调用CustomView的smoothScrollTo()方法：

<code class="hljs cs has-numbering">          <span class="hljs-comment">//使用Scroll来进行平滑移动</span>
          mCustomView.smoothScrollTo(-<span class="hljs-number">400</span>,<span class="hljs-number">0</span>);</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li></ul>

这里我们是设定CustomView沿着X轴向右平移400像素。

github源码下载