@linux1s1s 2015-06-14T22:28:15.000000Z 字数 9135 阅读 2986

Android 坐标常识

AndroidView

大部分Android开发人员都对View的坐标感到有点迷茫，尤其是初学自定义View的同学，这里博主和同学们一起来学习一下自定义View开发中用到的必不可少的Android坐标问题：

View 坐标

废话少说，先上图：

此处输入图片的描述

上面这个图就是Android的系统坐标，它和笛卡尔坐标Y轴方向正好是反的，而X轴方向相同，当屏幕内容显示不下的时候，会超出一屏，于是就出现了ScrollView，在该类的父类View中有个重要方法：

/**
 * Return the scrolled left position of this view. This is the left edge of
 * the displayed part of your view. You do not need to draw any pixels
 * farther left, since those are outside of the frame of your view on
 * screen.
 *
 * @return The left edge of the displayed part of your view, in pixels.
 */
public final int getScrollX() {
    return mScrollX;
}
/**
 * Return the scrolled top position of this view. This is the top edge of
 * the displayed part of your view. You do not need to draw any pixels above
 * it, since those are outside of the frame of your view on screen.
 *
 * @return The top edge of the displayed part of your view, in pixels.
 */
public final int getScrollY() {
    return mScrollY;
}

关于这两个方法的大概意思如下：
就是这个view相对于“坐标系统原点”(见上图右侧)在Y轴或者X轴上的偏移量。

另外还有两个相当让人迷惑的方法：scrollTo(int x, int y)和scrollBy(int x, int y)

/**
 * 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);
}

从上面的解释你肯定会这么理解：scrollTo方法会回调onScrollChanged(int, int, int, int)并且引发重绘，其中两个int参数分别是你希望滚动的位置。

针对上面的理解我们来做个测试：scrollTo(100,0)会向哪里移动？scrollTo(0,100)又会如何呢？

如果没有经过调试和深刻理解，肯定会出错，所以我们先来结合坐标图理解一下上面的问题：

如下图所示。注意，图中黄色矩形区域表示的是一个parent View，绿色虚线矩形为parent view中的内容。一般情况下两者的大小一致，本文为了显示方便，将虚线框画小了一点。图中的黄色区域的位置始终不变，发生位置变化的是显示的内容。注意图中scrollX(...)应该更换为scrollTo(...)

此处输入图片的描述

上面的配图是不是颠覆了你的原始理解，简直毁三观，那么为啥参数中正数向坐标原点靠拢，而负数却远离坐标原点？我们来看一下源代码，揭开它神秘面纱：
我们知道scrollTo(...)方法最后会引发重绘，我们直接看一下draw()方法即可：

public void draw(Canvas canvas) {
    final int privateFlags = mPrivateFlags;
    final boolean dirtyOpaque = (privateFlags & PFLAG_DIRTY_MASK) == PFLAG_DIRTY_OPAQUE &&
            (mAttachInfo == null || !mAttachInfo.mIgnoreDirtyState);
    mPrivateFlags = (privateFlags & ~PFLAG_DIRTY_MASK) | PFLAG_DRAWN;
    /*
     * Draw traversal performs several drawing steps which must be executed
     * in the appropriate order:
     *
     *      1. Draw the background
     *      2. If necessary, save the canvas' layers to prepare for fading
     *      3. Draw view's content
     *      4. Draw children
     *      5. If necessary, draw the fading edges and restore layers
     *      6. Draw decorations (scrollbars for instance)
     */
    // Step 1, draw the background, if needed
    ...
    // Step 6, draw decorations (scrollbars)
    onDrawScrollBars(canvas);
    if (mOverlay != null && !mOverlay.isEmpty()) {
        mOverlay.getOverlayView().dispatchDraw(canvas);
    }
}

为了看起来方便，上面绘制方法省略大部分无关代码，重点看一下L22 onDrawScrollBars(canvas);,接续跟下去

protected final void onDrawScrollBars(Canvas canvas) {
    // scrollbars are drawn only when the animation is running
    final ScrollabilityCache cache = mScrollCache;
    ...
    if (invalidate) {
        invalidate(left, top, right, bottom);
    }
}

这里同样省略了无关代码，重点看一下L6 invalidate(left, top, right, bottom);
继续跟进下去

public void invalidate(int l, int t, int r, int b) {
    final int scrollX = mScrollX;
    final int scrollY = mScrollY;
    invalidateInternal(l - scrollX, t - scrollY, r - scrollX, b - scrollY, true, false);
}

继续跟进下去，

void invalidateInternal(int l, int t, int r, int b, boolean invalidateCache,
            boolean fullInvalidate) {
    ...
    if (p != null && ai != null && l < r && t < b) {
        final Rect damage = ai.mTmpInvalRect;
        damage.set(l, t, r, b);
        p.invalidateChild(this, damage);
    }
    ...
}

看到真相了，L4-L8主要是绘制脏矩形，这个矩形的参数就是上面invalidateInternal方法传递过去的，而这个参数的计算是l - scrollX, t - scrollY, r - scrollX, b - scrollY，居然使用减法，而不是加法，所以当scrollX是负数的时候，反而是往X正方向移动。

然后看一下scrollBy这个方法，理解了scrollTo方法一切就好解决了，scrollTo是计算相对位置，而scrollBy是绝对位置。

最后看一下左右方向的移动坐标如何计算，先上一张图：
此处输入图片的描述

整个坐标系是以手机屏幕左上角为原点（0,0），如果在屏幕没有滑动之前，这一理解肯定是ok的，但在滑屏之后，就会产生很多歧义和混淆，原因在于使用过程当中，很多方法的参数并非是参照屏幕，而是相对于父视图，对这整个过程和后面自定义控件的坐标变化带来的各个参数变化来说理解起来就并不那么适合了，最开始给人的感觉是越来越不清楚这个坐标该怎么设置，好像坐标系总在发生变化，后来才慢慢在思维当中构建起视图与视图容器以及屏幕之间的关系。

我们知道在View类中有个layout方法

public void layout(int l, int t, int r, int b) {
    if ((mPrivateFlags3 & PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT) != 0) {
        onMeasure(mOldWidthMeasureSpec, mOldHeightMeasureSpec);
        mPrivateFlags3 &= ~PFLAG3_MEASURE_NEEDED_BEFORE_LAYOUT;
    }
    int oldL = mLeft;
    int oldT = mTop;
    int oldB = mBottom;
    int oldR = mRight;
    boolean changed = isLayoutModeOptical(mParent) ?
            setOpticalFrame(l, t, r, b) : setFrame(l, t, r, b);
    if (changed || (mPrivateFlags & PFLAG_LAYOUT_REQUIRED) == PFLAG_LAYOUT_REQUIRED) {
        onLayout(changed, l, t, r, b);
        mPrivateFlags &= ~PFLAG_LAYOUT_REQUIRED;
        ListenerInfo li = mListenerInfo;
        if (li != null && li.mOnLayoutChangeListeners != null) {
            ArrayList<OnLayoutChangeListener> listenersCopy =
                    (ArrayList<OnLayoutChangeListener>)li.mOnLayoutChangeListeners.clone();
            int numListeners = listenersCopy.size();
            for (int i = 0; i < numListeners; ++i) {
                listenersCopy.get(i).onLayoutChange(this, l, t, r, b, oldL, oldT, oldR, oldB);
            }
        }
    }
    mPrivateFlags &= ~PFLAG_FORCE_LAYOUT;
    mPrivateFlags3 |= PFLAG3_IS_LAID_OUT;
}

layout的过程就是确定View在屏幕上显示的具体位置，在代码中就是设置其成员变量mLeft，mTop，mRight，mBottom的值，这几个值构成的矩形区域就是该View显示的位置，不过这里的具体位置都是相对与父视图的位置。mLeft代表当前view.layout的这个view的左边缘离它的父视图左边缘的距离，拿上面“子视图2.layout(int l, int t, int r, int b) ”来说，它的父视图便是子视图1,2,3合起来形成的整个大矩形，那么这里将父视图的左上角定为(0,0)，那么可以确定mLeft为一个子视图宽度320，以此类推，mTop指当前view的上边缘离父视图上边缘的距离。而以此为界，mRight所指的是当前view的右边缘离父视图左边缘的距离，一眼可以看出值为640（mLeft+自己的宽度），mBottom也是指当前view的下边缘离父视图的上边缘的距离。至于为何如此，大概是因为坐标系的缘故，坐标中的任何点都必须以(0,0)为起点，XY轴为衡量。

视图左侧位置 view.getLeft()
视图右侧位置 view.getRight()
视图顶部位置 view.getTop();
视图底部位置 view.getBottom();

这四个方法所获取到的各个左上右下的值与layout的四个参数代表的是一样的，都是相对父视图的左边缘与上边缘。

视图宽度 view.getWidth();
视图高度 view.getHeight() ;

这两个方法获取的是该view的高和宽，仅仅在滑动的情况下，或者说该view的大小如果不发生变化，它的值是不会变的。

getMeasuredWidth();
getMeasuredHeight();

说到这里就不得不提getWidth()、getHeight()和getMeasuredWidth()、getMeasuredHeight()这两对函数之间的区别，getMeasuredWidth()、getMeasuredHeight()返回的是measure过程得到的mMeasuredWidth和mMeasuredHeight的值，而getWidth()和getHeight()返回的是mRight - mLeft和mBottom - mTop的值。一般情况下layout过程会参考measure过程中计算得到的mMeasuredWidth和mMeasuredHeight来安排子视图在父视图中显示的位置，但这不是必须的，measure过程得到的结果可能完全没有实际用处，特别是对于一些自定义的ViewGroup，其子视图的个数、位置和大小都是固定的，这时候我们可以忽略整个measure过程，只在layout函数中传入的4个参数来安排每个子视图的具体位置。

MotionEvent 坐标

这个类中有两组关于坐标的方法

/**
 * {@link #getX(int)} for the first pointer index (may be an
 * arbitrary pointer identifier).
 *
 * @see #AXIS_X
 */
public final float getX() {
    return nativeGetAxisValue(mNativePtr, AXIS_X, 0, HISTORY_CURRENT);
}
/**
 * {@link #getY(int)} for the first pointer index (may be an
 * arbitrary pointer identifier).
 *
 * @see #AXIS_Y
 */
public final float getY() {
    return nativeGetAxisValue(mNativePtr, AXIS_Y, 0, HISTORY_CURRENT);
}
/**
 * Returns the original raw X coordinate of this event.  For touch
 * events on the screen, this is the original location of the event
 * on the screen, before it had been adjusted for the containing window
 * and views.
 *
 * @see #getX(int)
 * @see #AXIS_X
 */
public final float getRawX() {
    return nativeGetRawAxisValue(mNativePtr, AXIS_X, 0, HISTORY_CURRENT);
}
/**
 * Returns the original raw Y coordinate of this event.  For touch
 * events on the screen, this is the original location of the event
 * on the screen, before it had been adjusted for the containing window
 * and views.
 *
 * @see #getY(int)
 * @see #AXIS_Y
 */
public final float getRawY() {
    return nativeGetRawAxisValue(mNativePtr, AXIS_Y, 0, HISTORY_CURRENT);
}

对于getRawY()以及getRawX()这两个方法返回值表示：触摸点相对于屏幕原点的x坐标。
对于getX()以及getY()这两个方法返回值表示：触摸点相对于其所在组件原点的x坐标。

于是乎： getRawY() + getY() 就得到了view中的触摸点在Y轴上的偏移量。

TextView 坐标

这个类关于坐标的方法: getLayout(),其返回类型是Layout，也就是返回textView的布局。然后通过这个布局可以得到在垂直方向上的Line。

/**
 * @return the Layout that is currently being used to display the text.
 * This can be null if the text or width has recently changes.
 */
public final Layout getLayout() {
    return mLayout;
}

注意上面的这个Layout返回值有可能为空。然后通过这个布局可以进一步得到在垂直方向上的行数。

 /**
 * Get the line number corresponding to the specified vertical position.
 * If you ask for a position above 0, you get 0; if you ask for a position
 * below the bottom of the text, you get the last line.
 */
// FIXME: It may be faster to do a linear search for layouts without many lines.
public int getLineForVertical(int vertical) {
    int high = getLineCount(), low = -1, guess;
    while (high - low > 1) {
        guess = (high + low) / 2;
        if (getLineTop(guess) > vertical)
            high = guess;
        else
            low = guess;
    }
    if (low < 0)
        return 0;
    else
        return low;
}

组件开发的一般步骤

如果需要自定义组件，一方面需要了解layout和measure的基本流程，更重要一方面，当你想要实现某一个效果的时候，比如slidingmenu那样的控件，查看源码我们可以知道它是继承的ViewGroup，该怎样入手去做呢。

首先，需要了解它的父视图是什么，slidingmenu为例，打开程序，第一眼，是一个很普通的视图页面，当向右滑动手指，这个视图页面开始向右边移动，而从左边会慢慢移出来另一部分视图，看上去像是抽出来的或者是隐藏的，事实上抛开阴影效果来讲，想象手机屏幕的左边有一部分我们看不到的视图，它就是这个被抽出来的menu视图了。概括来说，一个主view，一个menu其实是并排于一个大视图上面的。
找到了父视图，接下来就好办了，认定这个父视图的宽度就是主view的宽度和menu的宽度之和(暂不考虑padding之类)，高度就是屏幕的高度，那么在思维当中这个二维平面就产生了，将它想成一张纸，然后对准主view将这张纸贴到手机屏幕上，左右滑动，会看到其实slidingmenu也就是这么个效果。
然后，实现的思路会清晰很多。定义这个父视图为myview继承viewgroup，原因在于尽管主view和menu并排在一个大view下，但毕竟两者的内容不同，后面需要放进不同的控件处理不同的事件，这个父视图内包含着两个view，到时候处理起来会方便很多，setcontentview为这个父视图，那么打开程序的第一眼就会看到它。再定义这两个view设置好两个内容布局，并将它们addview添加到myview当中。外部工作基本就完成了，可以呈现父视图，并且父视图内有两个子view。
接下来，需要去完善一些细节，父视图内的子view该如何放置，这是关乎成败的一环，也就是如何将这张纸贴到我们希望的位置，这时就是onlayout的处理了，处理好屏幕，父视图子view之间的位置关系，通过各自的layout参数设置来摆放妥当各个view，比如开始的时候menu是隐藏的，这个就是通过位置的摆放设置的，然后它是从左边滑出来的，说明它处于父视图的左边位置，而主view处于相对右边的位置，而屏幕刚好也处于父视图右边的位置，恰好能看到主view的全貌，在脑海里如果能有清晰的画面出现，实现起来就会轻松很多。当实现了这个摆放，就可以理解menudrawer里面上下左右都可以滑出menu的结构了。
最后，便是滑动效果，请相信这样的控件里面，任何处理肯定都会和view位置的摆放扯上关系，滑动方向，滑动距离等等都涉及到坐标的处理。这也是为何上面列出那些常用的获取view坐标的方法。

总结下来，构建类似这样的控件，也就这三点，明确父子视图和屏幕的关系，通过坐标和位置参数设置它们的关系，处理这些关系发生变化的情况。

当然，事实上slidingmenu远远没这么简单，其中为了方便后续开发，它内置了很多接口和处理，大多数都是位置坐标和事件监听相关联，而万变不离其宗的是，它也肯定有这三个方面的构建，理解了这些基本的东西，尝试做一些自己想象的效果，对自定义的理解来说，进步会非常大。