View之View树View坐标系View滑动

1. View树

View树.png

• View是所有控件的基类，比如TextView和ImageView都继承自View。
• ViewGroup继承自View，同时也是View的组合，可以包含多个View以及ViewGroup，而它包含的ViewGroup又可以包含多个View和ViewGroup。

2. 坐标系

Android系统有两种坐标系：Android坐标系和View坐标系。

2.1 Android坐标系

Android坐标系.png

• 在Android中，屏幕左上角的顶点作为Android坐标系的原点，这个原点向右是X轴正方向，向下是Y轴正方向。
• 使用getRawX()和getRawY()方法获得的坐标也是Android坐标系的坐标。

2.2 View坐标系

View坐标系.png

• View获取自身的宽和高

width = getRight（）- getLeft（）;
height = getBottom() - getTop();

说明：系统为我们提供了获取View的宽和高的方法。

public final int getWidth() {
        return mRight - mLeft;
    }

public final int getHeight() {
        return mBottom - mTop;
    }

• View自身的坐标

通过如下方法可以获得View到父控件（ViewGroup）的距离。

1. getTop（）:获取View自身顶边到父布局顶边的距离。
2. getLeft（）:获取View自身左边到其父布局左边的距离。
3. getRight（）:获取View自身右边到其父布局左边的距离。
4. getBottom（）:获取View自身底边到其父布局顶边的距离。

• MotionEvent提供的方法

View坐标系中的圆点就是我们假设就是我们触摸的点。

不管是View还是ViewGroup，最终的点击事件都会由onTouchEvent（MotionEvent event）方法来处理。

MotionEvent在用户交互中作用巨大。其内部提供了许多常量，比如ACTION_DOWN ACTION_UP ACTION_MOVE .此外，MotionEvent也提供了获取焦点坐标的各种方法。

1. getX:获取点击事件距离控件左边的距离，即视图坐标。
2. getY:获取点击事件距离控件顶边的距离，即视图坐标。
3. getRawX:获取点击事件距离整个屏幕左边的距离，即绝对坐标。
4. getRawY:获取点击事件距离整个屏幕顶边的距离，即绝对坐标。

3. View的滑动

• View滑动的基本思想：当点击事件传到View时，系统记下触摸点的坐标，手指移动时系统记下移动后触摸的坐标并算出偏移量，并通过偏移量来修改View的坐标。
• 实现View的滑动有6种基本方法：layout() offsetLeftAndRight()和offsetTopAndBottom() LayoutParams 动画 scrollTo和srcollBy Scroller

3.1 layout()方法

• View绘制的时候会调用onLayout方法来设置显示的位置，因此我们也可以修改View的left、top、right、bottom这4种属性来控制View的坐标。

/**
 * Created by FuKaiqiang on 2017-11-13.
 */

public class CustomView extends View {

    private int lastX;
    private int lastY;

    public CustomView(Context context) {
        super(context);
    }

    public CustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        //获取手机触摸点的横坐标和纵坐标
        int x = (int) event.getX();
        int y = (int) event.getY();
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                //记录手机按下的坐标
                lastX = x;
                lastY = y;
                break;
            case MotionEvent.ACTION_MOVE:
                //计算移动的距离
                int offsetX = x - lastX;
                int offsetY = y - lastY;
                //调用layout方法来重新放置它的位置
                layout(getLeft() + offsetX, getTop() + offsetY, getRight() + offsetX, getBottom() + offsetY);
                break;
        }
        //处理点击事件返回true
        return true;
    }
}

   <com.best.testview.CustomView
        android:layout_width="80dp"
        android:layout_height="80dp"
        android:layout_margin="50dp"
        android:background="@android:color/holo_red_light"/>

说明：

1. 首先自定义CustomView继承自View，在onTouchEvent方法中获取触摸点的坐标。
2. 然后在ACTION_MOVE事件中计算偏移量，再调用layout方法重新设置这个自定义View的位置即可。
3. 每次移动时都会调用layout方法对屏幕重新布局，从而达到移动View的效果。
4. 把自定义View引用到布局中即可。

3.2 offsetLeftAndRight与offsetTopAndBottom

• 这两种方法和layout方法的效果差不多，将ACTION_MOVE中的代码可替换成以下代码：

    //计算移动的距离
    int offsetX = x - lastX;
    int offsetY = y - lastY;
    //对left和right进行偏移
    offsetLeftAndRight(offsetX);
    //对top和bottom进行偏移
    offsetTopAndBottom(offsetY);
    break;

3.3 LayoutParams（改变布局参数）

• LayoutParams保存了一个View的布局参数，我们可以通过LayoutParams来改变View的布局参数从而改变View位置的效果，，将ACTION_MOVE中的代码可替换成以下代码：

    //计算移动的距离
    int offsetX = x - lastX;
    int offsetY = y - lastY;
    LinearLayout.LayoutParams layoutParams = (LinearLayout.LayoutParams) getLayoutParams();
    layoutParams.leftMargin = getLeft() + offsetX;
    layoutParams.topMargin = getTop()+offsetY;
    setLayoutParams(layoutParams);

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

    //计算移动的距离
    int offsetX = x - lastX;
    int offsetY = y - lastY;
    ViewGroup.MarginLayoutParams layoutParams = (ViewGroup.MarginLayoutParams) getLayoutParams();
    layoutParams.leftMargin = getLeft() + offsetX;
    layoutParams.topMargin = getTop() + offsetY;
    setLayoutParams(layoutParams);

注意：如果父布局是ConstraintLayout，测试结果是ConstraintLayout.LayoutParams无效， ViewGroup.MarginLayoutParams无效。

3.4 动画

• 采用View动画来移动，在res目录新建anim文件夹并创建translate.xml,然后用java代码调用即可。

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android">
        <translate
            android:duration="1000"
            android:fromXDelta="0"
            android:toXDelta="300">
        </translate>
    </set>

    mCustomView.setAnimation(AnimationUtils.loadAnimation(this, R.anim.translate));

说明：我们会发现方块向右平移了300像素，然后又回到原来的位置，为了解决这个问题，我们在translate.xml中加上fillAfter = "true",方块平移后就停留在当前位置了。

    <?xml version="1.0" encoding="utf-8"?>
    <set xmlns:android="http://schemas.android.com/apk/res/android"
         android:fillAfter="true">
        <translate
            android:duration="1000"
            android:fromXDelta="0"
            android:toXDelta="300">
        </translate>
    </set>

注意：当然View动画并不会改变View的位置参数，也就是说点击事件的响应还在原始位置，对系统来说，方块位置并没有改变。Android 3.0出现的属性动画就解决了上述问题，代码如下：

    ObjectAnimator.ofFloat(mCustomView, "translationX", 0, 300).setDuration(1000).start();

3.5 scrollTo与scrollBy

• scrollTo（x,y）表示移动到了一个具体的坐标点，而scrollBy（dx,dy）则表示移动的增量为dx、dy。其中scrollBy最终也是要调用scrollTo的。看下源码：

    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();
            }
        }
    }
    public void scrollBy(int x, int y) {
        scrollTo(mScrollX + x, mScrollY + y);
    }

注意：scrollTo、scrollBy移动的是View的内容，如果再ViewGroup中使用，则是移动其所有的子View，我们将ACTION_MOVE代码替换为以下代码：

((View) getParent()).scrollBy(-offsetX, -offsetY);

说明：可能你会问为何设置为负值，是因为scrollBy这个方法移动的是手机的屏幕而不是View。而上面的其他方法移动的都是View。

3.6 Scroller

• scrollTo/scrollBy方法进行滑动时，这个过程是瞬间完成的。我们可以使用Scroller实现有过渡效果的滑动，不是瞬间完成的，而是在一定的时间间隔内完成的。
• Scroller本身是不能实现View的滑动的，它需要与View的computeScroll方法配合才能实现弹性滑动的效果。
• 在这里我们实现CustomView平滑地向右移动，首先我们需要初始化Scroller：

    public CustomView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        mScroller = new Scroller(context);
    }

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

    @Override
    public void computeScroll() {
        super.computeScroll();
        if (mScroller.computeScrollOffset()) {
            ((View) getParent()).scrollTo(mScroller.getCurrX(), mScroller.getCurrY());
            invalidate();
        }
    }

• 我们在CustomView中写一个smoothScrollTo方法，调用Scroller的startScroll方法，2000ms内沿X轴平移delta像素，代码如下：

    public void smoothScrollTo(int destX,int destY){
        int scrollX = getScrollX();
        int delta = destX - scrollX;
        mScroller.startScroll(scrollX,0,delta,0,2000);
        invalidate();
    }

• 调用代码，设定CustomView沿着X轴向右平移400像素。为了看到效果，我们延迟3秒。向右移动就是负数，向左移动就是正数。

        new Handler().postDelayed(new Runnable() {
            @Override
            public void run() {
                mCustomView.smoothScrollTo(-300, 0);
            }
        }, 3000);