Android自定义控件之onLayout

待我称王封你为后i 2022-03-25 07:22 440阅读 0赞

原文：[http://blog.csdn.net/a396901990/article/details/38129669][http_blog.csdn.net_a396901990_article_details_38129669]

**一、简介**

在自定义view的时候，其实很简单，只需要知道3步骤：

**1.测量——onMeasure()**：决定View的大小，关于此请阅读《[Android自定义控件之onMeasure][Android_onMeasure]》

**2.布局——onLayout()：**决定View在ViewGroup中的位置

**3.绘制——onDraw()：**如何绘制这个View。

这篇文章主要来谈谈第二步**布局（Layout）**

**二、View视图结构**

View视图可以是单一的一个如TextView，也可以是一个视图组（ViewGroup）如LinearLayout。

如图：对于多View的视图他的结构是树形结构，最顶层是ViewGroup，ViewGroup下可能有多个ViewGroup或View。

![SouthEast][]

这个树的概念很重要，因为无论我们是在测量大小或是调整布局的时候都是从树的顶端开始一层一层，一个分支一个分支的进行（**树形递归**）。

**三、onLayout函数**

measure的作用就是为整个View树计算实际的**大小**，而通过刚才对View树的介绍知道，想计算整个View树的大小，就需要递归的去计算每一个子视图的大小（Layout同理）。

对每一个视图通过onMeasure方法的一系列测量流程后计算出实际的高(**mMeasuredHeight**)和宽(**mMeasureWidth**)传入**setMeasuredDimension()**方法完成单个View的测量，如果所测的视图是ViewGroup则可以通过**measureChild**方法递归的计算其中的每一个子view。对于每个View的实际宽高都是由**父视图**和**本身视图**决定的。

Layout的作用就是为整个View树计算实际的**位置**，而通过刚才对View树的介绍知道，想计算整个View树的位置，就需要递归的去计算每一个子视图的位置（Measure同理）。

而确定这个位置很简单，只需要**mLeft，mTop，mRight，mBottom**四个值（注意：这4个值是子View相对于父View的值，下面会详细介绍）。

在代码中如何设置这4个值呢？

首先，无论是系统提供的LinearLayout还是我们自定义的View视图，他都需要继承自ViewGroup类，之后必须要做的就是重写onLayout方法（因为在onLayout在ViewGroup中被定义为抽象方法）。

**ViewGroup的onlayout：**

**\[java\]**  [view plain][view_plain]  [copy][view_plain]

[print][view_plain] [?][view_plain]

1.  @Override  
2.  protected abstract void onLayout(boolean changed, int l, int t, int r, int b);

onLayout被定义为抽象方法，所以在继承ViewGroup时必须要重写该方法（onMeasure不需要）。另外这个方法也被override标注，所以也是重写的方法，他重写的是其父类view中的onLayout方法。

**View.java的onLayout：**

**\[java\]**  [view plain][view_plain]  [copy][view_plain]

[print][view_plain] [?][view_plain]

1.  /\*\* 
2.   \* 当这个view和其子view被分配一个大小和位置时，被layout调用。 
3.   \* @param changed 当前View的大小和位置改变了 
4.   \* @param left 左部位置（相对于父视图） 
5.   \* @param top 顶部位置（相对于父视图） 
6.   \* @param right 右部位置（相对于父视图） 
7.   \* @param bottom 底部位置（相对于父视图） 
8.   \*/  
9.  protected void onLayout(boolean changed, int left, int top, int right, int bottom) \{\}

View.java的onLayout是一个空实现，当这个view和其子view被分配一个大小和位置时，被layout调用。所以我们去看看layout中做了什么

**View的layout：**

**\[java\]**  [view plain][view_plain]  [copy][view_plain]

[print][view_plain] [?][view_plain]

1.  /\*\* 
2.   \* 给View和其所有子View分配大小和位置 
3.   \* 
4.   \* 这是布局的第二个阶段（第一个阶段是测量）。在这个阶段中，每个父视图需要去调用layout去为他所有的子视图确定位置 
5.   \* 派生的子类不应该重写layout方法，应该重写onLayout方法，在onlayout方法中应该去调用每一个view的layout 
6.   \*/  
7.  public void layout(int l, int t, int r, int b) \{  
8.      // 将当前视图的左上右下记录为old值(参数中传入的为新的l，t,r,b值)  
9.      int oldL = mLeft;  
10.     int oldT = mTop;  
11.     int oldB = mBottom;  
12.     int oldR = mRight;  
13.       
14.     // setFrame方法的作用就是将新传入的ltrb属性赋值给View，然后判断当前View大小和位置是否发生了变化并返回  
15.     boolean changed = setFrame(l, t, r, b);  
16.       
17.     if (changed || (mPrivateFlags & PFLAG\_LAYOUT\_REQUIRED) == PFLAG\_LAYOUT\_REQUIRED) \{  
18.         // 调用onLayout回调方法，具体实现由重写了onLayout方法的ViewGroup的子类去实现（后面详细说明）  
19.         onLayout(changed, l, t, r, b);  
20.         mPrivateFlags &= ~PFLAG\_LAYOUT\_REQUIRED;  
21.   
22.         // 调用所有重写了onLayoutChange监听的方法，通知View大小和位置发生了改变  
23.         ListenerInfo li = mListenerInfo;  
24.         if (li != null && li.mOnLayoutChangeListeners != null) \{  
25.             ArrayList<OnLayoutChangeListener> listenersCopy =  
26.                     (ArrayList<OnLayoutChangeListener>)li.mOnLayoutChangeListeners.clone();  
27.             int numListeners = listenersCopy.size();  
28.             for (int i = 0; i < numListeners; ++i) \{  
29.                 listenersCopy.get(i).onLayoutChange(this, l, t, r, b, oldL, oldT, oldR, oldB);  
30.             \}  
31.         \}  
32.     \}  
33.     mPrivateFlags &= ~PFLAG\_FORCE\_LAYOUT;  
34. \}

在这段代码中我们只要知道：如果视图的大小和位置发生变化后，会调用我们前面分析过的onLayout方法。

对于onLayout方法的最终实现全部依靠我们在自定义ViewGroup类中重写的onLayout去实现。

ViewGroup.java的layout函数

/**     * { @inheritDoc}     */    @Override    public final void layout(int l, int t, int r, int b) {        if (!mSuppressLayout && (mTransition == null || !mTransition.isChangingLayout())) {            if (mTransition != null) {                mTransition.layoutChange(this);            }            super.layout(l, t, r, b);        } else {            // record the fact that we noop'd it; request layout when transition finishes            mLayoutCalledWhileSuppressed = true;        }    }

**四、计算View位置**** **

重写的onLayout方法中，唯一的目的就是：对当前视图和其所有子View设置它们在父视图中具体位置（确定这个位置就依靠mLeft，mTop，mRight，mBottom这四个值）

之前介绍过，mLeft，mTop，mRight，mBottom这四个值表示的是子view相对于父view的位置。下面我贴出我画的图看一下就明白了。

![SouthEast 1][]

如图，黄色区域是我们的父view，而中间的深色的区域就是我们的子view。

所以对于这个View来说，我列出它相对于父view的各个值是如何计算和相关函数：

**mLeft，mTop，mRight，mBottom：**

view.getLeft()——mLeft：子View左边界到父view左边界的距离

**\[java\]**  [view plain][view_plain]  [copy][view_plain]

[print][view_plain] [?][view_plain]

1.  public final int getLeft() \{  
2.      return mLeft;  
3.  \}

view.getTop()——mTop：子View上边界到父view上边界的距离

view.getRight()——mRight：子View右边界到父view左边界的距离

view.getBottom()——mBottom：子View下边距到父View上边界的距离

**视图宽高：**

视图宽度 view.getWidth();子View的右边界 - 子view的左边界。

**\[java\]**  [view plain][view_plain]  [copy][view_plain]

[print][view_plain] [?][view_plain]

1.  public final int getWidth() \{  
2.      return mRight - mLeft;  
3.  \}

视图高度 view.getHeight() ;子View的下边界 - 子view的上边界。

**\[java\]**  [view plain][view_plain]  [copy][view_plain]

[print][view_plain] [?][view_plain]

1.  public final int getHeight() \{  
2.      return mBottom - mTop;  
3.  \}

**测量宽高：**

view.getMeasuredWidth();measure过程中返回的mMeasuredWidth

**\[java\]**  [view plain][view_plain]  [copy][view_plain]

[print][view_plain] [?][view_plain]

1.  public final int getMeasuredWidth() \{  
2.      return mMeasuredWidth & MEASURED\_SIZE\_MASK;  
3.  \}

view.getMeasuredHeight();measure过程中返回的mMeasuredHeight

**\[java\]**  [view plain][view_plain]  [copy][view_plain]

[print][view_plain] [?][view_plain]

1.  public final int getMeasuredHeight() \{  
2.      return mMeasuredHeight & MEASURED\_SIZE\_MASK;  
3.  \}

最后介绍一下getWidth/Height和getMeasuredWidth/Height的区别：

getWidth,和getLeft等这些函数都是View相对于其父View的位置。而getMeasuredWidth,getMeasuredHeight是测量后该View的实际值(有点绕，下面摘录一段[jafsldkfj][]所写的[Blog][]中的解释).

实际上在当屏幕可以包裹内容的时候，他们的值是相等的，只有当view超出屏幕后，才能看出他们的区别：

getMeasuredHeight()是实际View的大小，与屏幕无关，而getHeight的大小此时则是屏幕的大小。

当超出屏幕后，getMeasuredHeight()等于getHeight()加上屏幕之外没有显示的大小

在计算子View在父View中的位置时，主要就是应用上面这几个函数。下面就来看看如何去重写onLayout。

**五、重写onLayout**

对于重写onLayout的思路和重写onMeasure相同：

如果只需要测量单个View，则单独测量它自己就行。如果需要测量的View其下还有子View，则需要测量其所有的子View。

就以上面的View为例子，他最外面是一个黄色的父View，中间一个居中的深色子View。

我的思路如下：

如果想画出一个View，就要计算它的l，t，r，b值。并传递到onlayout( l, t, r, b )中;

mRight = view.getWidth + mLeft;

mBottom = view.getHeight + mTop;

所以最后可以用如下形式传入：onlayout( l, t, l+width, t+height );

剩下的任务就只需要知道它的mLeft值，mTop值，加上长、宽值就行了。

长宽值很简单，使用getWidth/Height和getMeasuredWidth/Height都可以。

由于这个View需要居中显示，剩下的问题就是如何计算该View的mLeft值和mTop值。我的思路如下：

r(父View的mRight) = mLeft + width + mLeft(因为左右间距一样)

b(父View的mBottom) = mTop + height + mTop（因为上下间距一样）

我的代码如下：

**\[java\]**  [view plain][view_plain]  [copy][view_plain]

[print][view_plain] [?][view_plain]

1.  @Override  
2.  protected void onLayout(boolean changed, int l, int t, int r, int b) \{  
3.    
4.         // 循环所有子View  
5.         for (int i=0; i<getChildCount(); i++) \{  
6.             View child = getChildAt(i);  
7.             // 取出当前子View长宽  
8.             int width = child.getMeasuredWidth();  
9.             int height = child.getMeasuredHeight();  
10.   
11.            // 计算当前的mLeft和mTop值（r,b为传递进来的父View的mRight和mBottom值）  
12.            int mLeft = (r - width) / 2;  
13.            int mTop = (b - height) / 2;  
14.   
15.            // 调用layout并传递计算过的参数为子view布局  
16.            child.layout(mLeft, mTop, mLeft + width, mTop + height);  
17.        \}  
18.    \}

布局文件如下：

**\[html\]**  [view plain][view_plain]  [copy][view_plain]

[print][view_plain] [?][view_plain]

1.  <com.gxy.text.CostomViewGroup xmlns:android="http://schemas.android.com/apk/res/android"  
2.      android:layout\_width="wrap\_content"  
3.      android:layout\_height="wrap\_content"  
4.      android:background="\#eee999" >  
5.    
6.      <Button  
7.          android:text="ChildView"  
8.          android:layout\_width="200dip"  
9.          android:layout\_height="200dip"  
10.         android:background="\#333444"  
11.         android:id="@+id/textView2" />  
12. </com.gxy.text.CostomViewGroup>

效果图：

![SouthEast 2][]

**六、总结**

onMeasure和onLayout的大致总结完了，在自定义View的时候最关键的是onLayout，因为无论你如何Measure这个View的大小，最后的决定权永远在onLayout手中，onLayout会决定具体View的大小和位置。当然onMeasure也很重要，有的情况控件的宽高不确定或者需要自定义，这时候需要我们人工Measure它。而在复杂的自定义View时，很多计算也需要在onMeasure中完成，并且些值会记录下来在onLayout中使用（个人理解，欢迎指正）。

再分享一下我老师大神的人工智能教程吧。零基础！通俗易懂！风趣幽默！还带黄段子！希望你也加入到我们人工智能的队伍中来！[https://blog.csdn.net/jiangjunshow][https_blog.csdn.net_jiangjunshow]

[http_blog.csdn.net_a396901990_article_details_38129669]: http://blog.csdn.net/a396901990/article/details/38129669
[Android_onMeasure]: http://blog.csdn.net/hudashi/article/details/50905325
[SouthEast]: /images/20220325/ba119df1d83740ceaddc0345e1e688fe.png
[view_plain]: http://blog.csdn.net/a396901990/article/details/38129669#
[SouthEast 1]: /images/20220325/d07ded4ee5ff498bb6336dd88fec0685.png
[jafsldkfj]: http://my.csdn.net/chongshi007
[Blog]: http://blog.csdn.net/xujainxing/article/details/8985063
[SouthEast 2]: /images/20220325/5c5e755430a84d5a9ac3cae0f55cb577.png
[https_blog.csdn.net_jiangjunshow]: https://blog.csdn.net/jiangjunshow/article/details/77338485