【android】View的事件体系2-滑动方式

2、View 的滑动

通过三种方式可以实现 View 的滑动：

1. 通过 View 本身提供的 scrollTo/scrollBy 方法来实现滑动;
2. 通过动画给 View 施加平移效果来实现滑动;
3. 通过改变 View 的 LayoutParams 使得 View 重新布局从而实现滑动。

2.1、使用 scrollTo/scrollBy

scrollTo 和 scrollBy 只能改变 View 内容的位置而不能改变 View 在布局中的位置

/**
     * Set the scrolled position of your view. This will cause a call to
     * {@link #onScrollChanged(int, int, int, int)} and the view will be
     * invalidated.
     * @param x the x position to scroll to
     * @param y the y position to scroll to
     */
    public void scrollTo(int x, int y) {
        if (mScrollX != x || mScrollY != y) {
            int oldX = mScrollX;
            int oldY = mScrollY;
            mScrollX = x;
            mScrollY = y;
            invalidateParentCaches();
            onScrollChanged(mScrollX, mScrollY, oldX, oldY);
            if (!awakenScrollBars()) {
                postInvalidateOnAnimation();
            }
        }
    }

    /**
     * Move the scrolled position of your view. This will cause a call to
     * {@link #onScrollChanged(int, int, int, int)} and the view will be
     * invalidated.
     * @param x the amount of pixels to scroll by horizontally
     * @param y the amount of pixels to scroll by vertically
     */
    public void scrollBy(int x, int y) {
        scrollTo(mScrollX + x, mScrollY + y);
    }

从源码可以看出，scrollBy 也是调用 scrollTo 方法，它实现了基于当前位置的相对滑动，而 scrollTo 则实现了基于所传递参数的绝对滑动。

方法内部有两个属性：

• mScrollX :可以通过 getScrollX方法得到。在滑动过程中 mScrollX 的值总是等于 View 左边缘和 View 内容左边缘在水平方向的距离。
• mScrollY :可以通过 getScrollY方法得到。在滑动过程中 mScrollX 的值总是等于 View上边缘 和 View 内容上边缘在竖直方向的距离。
• 这两个属性的单位是像素。

2.2、使用动画

让 View 进行平移，主要是操作 View 的 translationX 和 translationY 属性，既可以采用传统的 View 动画，也可以采用属性动画。

采用 View 动画，是动画可以在100ms内将一个 View 从原始位置向右下角移动100个像素。

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android"
     android:fillAfter="true"
     android:zAdjustment="normal">
  <translate
             android:duration="100"
             android:fromXDelta="0"
             android:fromYDelta="0"
             android:interpolator="@android:anim/linear_interpolator"
             android:toXDelta="100"
             android:toYDelta="100"/>
</set>

采用属性动画，在100ms内将一个 View 从原始位置向右平移100个像素。

ObjectAnimator.ofFloat(targetView, "translationX", 0, 100).setDuration(100).start();

View 动画是对 View 的影像做操作，它并不能真正的改变 View 的位置参数，包括宽/高，并且如果希望动画后的状态得以保留还必须将 fillAfter 的数字那个设置为true，否则动画完成后其动画结果将自动消失。使用属性动画不会存在上述问题。

不能改变位置会带来一个严重的问题，比如说，一个 button，它经过View动画移动之后会无法出发点击事件，因为它的点击事件会在原来的位置触发。

从 Android 3.0开始，使用属性动画可以解决上面的问题。

2.3、改变布局参数

看代码,享有平移100px：

MarginLayoutParams params = (MarginLayoutParams)btn.getLayoutParams();
params.width += 100;
params.leftMargin += 100;
btn.requestLayout();
//或者btn.setLayoutParams(params);

2.4、总结和对比

• scrollTo/scrollBy：操作简单，适合对View内容的滑动；
• 动画：操作简单，主要适用于没有交互的View 和 实现复杂的动画效果；
• 改变布局参数：操作稍微复杂，适用于有交互的 View。

2.5、实现跟手滑动的效果

选择动画的方式

新建一个java文件,继承ImageView，重写 onTouchEvent()方法。

注意，这里用到ViewHelper，需要导入 nineoldandroids.jar,官网下载，放到libs下，add as library就可以用了。

package com.chandelier.personalview_slide;

import android.content.Context;
import android.util.AttributeSet;
import android.view.MotionEvent;
import android.widget.ImageView;

import com.nineoldandroids.view.ViewHelper;

public class MyView extends ImageView {
    private int lastX;
    private int lastY;
    public MyView(Context context){
        this(context,null);
    }
    public MyView(Context context, AttributeSet attrs){
        super(context,attrs);
    }
    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //获取手指坐标
        int x = (int)event.getRawX();
        int y = (int)event.getRawY();
        switch (event.getAction()){
            case MotionEvent.ACTION_MOVE:{
                int deltaX = x - lastX;
                int deltaY = y - lastY;
                //计算移动距离
                int translationX = (int)(ViewHelper.getTranslationX(this) + deltaX);
                int translationY = (int)(ViewHelper.getTranslationY(this) + deltaY);
                //设置使View移动
                ViewHelper.setTranslationX(this,translationX);
                ViewHelper.setTranslationY(this,translationY);
                break;
            }
            default:
                break;
        }
        lastX = x;
        lastY = y;
        return true;
    }
}

然后写进布局里：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.chandelier.personalview_slide.MainActivity">

    <com.chandelier.personalview_slide.MyView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:background="@mipmap/ic_launcher"/>
</RelativeLayout>

运行就可以看到效果了。