自定义布局执行流程之 画出自己定义的View

android 简析自定义布局、布局的执行流程

以下代码示例针对（Android 2.3）

你玩过植物大战僵尸吗？你玩过愤怒的小鸟吗？你是不是很疑惑精美的UI界面是如何作出来的呢？很明显andriod 自带的控件是不可能做到那样的效果的，这里就用到了对控件、布局的重写。

单从重写控件来看，你会感觉到很简单（只需要覆盖onMeasure()及onLayout()方法）就可以了，但是这两个方法的被谁调用？它的Framework层的布局流程究竟是怎样的，只有搞清楚这些我们才能很好的去重写布局，布上我们的View，从而实现我们想要的效果。

为了更直观地展示布局调用结构，我在这里简略绘制了布局Framework层的类图。

。。。。。。

请看此图

。。。。。。

 

View.java

01// 注意final修饰，该方法永远不会被覆盖，整个布局结构 measure方法唯一

02 

03public final void measure(int widthMeasureSpec, int heightMeasureSpec) {

04 

05         onMeasure(widthMeasureSpec, heightMeasureSpec);

06 

07}

08 

09protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {}

10 

11  

12 

13//注意final修饰，该方法永远不会被覆盖，整个布局结构layout方法唯一

14 

15public final void layout(int l, int t, int r, int b) {

16 

17        boolean changed = setFrame(l, t, r, b);

18 

19        if (changed || (mPrivateFlags & LAYOUT_REQUIRED) == LAYOUT_REQUIRED) {

20 

21                  onLayout(changed, l, t, r, b);

22 

23        }

24 

25}

26 

27protected void onLayout(boolean changed, int left, int top, int right, intbottom) { } //空方法

ViewGroup.java extends View.java 

01@Override

02 

03   protected abstract void onLayout(boolean changed, int l, int t, int r, int b);

04 

05// 测量该ViewGroup所包含的所有布局

06 

07protected void measureChildren(int widthMeasureSpec, int heightMeasureSpec) {}

08 

09protected void measureChild(View child, int parentWidthMeasureSpec,

10 

11            int parentHeightMeasureSpec) {}

12 

13  

14 

15//我会单讲mChildren数组mChildren中的View是如何来的。

16 

17public View getChildAt(int index) {  return mChildren[index];  }

18 

19public int getChildCount() {  return mChildrenCount; }

 

RelativeLayout.java extends ViewGroup.java

//当继承RelativeLayout布局时，我们应当覆盖该方法，以实现测量该布局包含的View，//此处的实现并不能测量所有的View

01protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {}

02 

03protected void onLayout(boolean changed, int l, int t, int r, int b) {}

04 

05private void measureChild(View child, LayoutParams params, int myWidth, intmyHeight) {}

06 

07//还包含一个重要的内部类，代表RelativeLayout所包含的每一个view大小及位置信息

08 

09public static class LayoutParams extends ViewGroup.MarginLayoutParams{

10 

11          private int mLeft, mTop, mRight, mBottom;

12 

13}

下面我要自定义一个布局，定义布局的目的肯定是为了向其内部放置View

CustomGridLayout.java  extends RelativeLayout.java

初学者会问，我们到底需要继承RelativeLayout类的哪个方法呢！！

抛去一切，我们自己想象，布局控件需要

第一：控件(View)的大小 

第二：控件(View)的位置  

第三：知道要放置多少个View

 

通过熟读文档，我们应该知道：

onMeasure方法负责测量将要放在CustomGridLayout内部的View的大小。

onLayout方法负责分配尺寸及位置给将要放在CustomGridLayout内部的View。

所以很明显，需要我们继承的方法是

1. protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {}

功能：测量该布局所包含的所有View的大小（会在框架层循环取得每一个View，然后测量其大小），该方法会被View.java中的measure方法调用。而measure方法会被

2. protected void onLayout(boolean changed, int l, int t, int r, int b) {}

功能：在相应的位置放置相应的View，该方法会被View.java中的layout方法调用，而layout方法会被谁调用呢?

(1) 调用requestLayout()方法. 该方法内部会执行Object.layout(…)

(2) 直接调用 Object.layout(…) 

(3) 调用addView（View child, ...）时，

   调用addView(...)之前一般需要先调用android.view.View.setLayoutParams(LayoutParams params)

最后我简略分析了一下布局调用的流程调用，如下：

也许有人会问当调用addView时，会和框架层的layout,onLayout,measure, onMeasure等几个布局方法有什么关系，或者说后者几个方法是怎么被触发的，别着急，看见addView(...)的底层实现了吗

01public void addView(View child, int index, LayoutParams params) {

02 

03        // addViewInner() will call child.requestLayout() when setting the new LayoutParams

04 

05        // therefore, we call requestLayout() on ourselves before, so that the child's

06 

07        // request will be blocked at our level

08 

09        requestLayout();

10 

11        invalidate();

12 

13        addViewInner(child, index, params, false);

14 

15   }

很明显，addView在底层调用了requestLayout方法，该方法如时序图所示，会依次触发我们的onMeasure，onLayout方法。

看了这里，你是不是对布局layout,onLayout,measure, onMeasure，requestLayout,等方法的调用清晰多了呢？好了，就先写到这吧，有什么问题欢迎大家共同探讨.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

当我们在画布上显示自己定义的View时，

canvas.save();

canvas.rotate(float 角度,float X,float Y);//画布以某个点为中心转动的角度

onDrawItem（）方法；

canvas.restore();

view source

print?

01protected void onDrawItem(Canvas c, int index, Point screenCoords) {

02 

03 final BalloonItem focusedItem = balloonItems.get(index);

04 

05 if (index == mTapIndex) {

06 

07 LinearLayout viewIcon = null;

08 

09 viewIcon=(LinearLayout)LayoutInflater.from(mContext).inflate(R.layout.balloon_layout, null);

10 

11 viewIcon.setBackgroundDrawable(mContext.getResources().getDrawable(R.drawable.balloon_blue));

12 

13 //得到自己定义的布局View之后，要先measure和layout，才能画出

14 

15 viewIcon.measure(0, 0);

16 

17 viewIcon.layout(0, 0, viewIcon.getMeasuredWidth(), viewIcon.getMeasuredHeight());

18 

19  

20 

21       c.save();

22 

23 c.translate(screenCoords.x - mDensity*10, screenCoords.y - mDensity*20);

24 

25  

26 

27 viewIcon.draw(c);

28 

29 c.restore();

30 

31  

32 

33 Button playBtn = (Button) mT.findViewById(R.id.btn_start);

34 

35 final TextView title = (TextView) mT.findViewById(R.id.poi_title);

36 

37  

38 

39 title.setText(focusedItem.getAttractionsName());

40 

41 

42 

43 mT.measure(0, 0);

44 

45 mT.layout(0, 0, mT.getMeasuredWidth(), mT.getMeasuredHeight());

46 

47  

48 

49 c.save();

50 

51 c.translate(screenCoords.x - mDensity*10, screenCoords.y - playBtn.getMeasuredHeight() - playBtn.getTop() - mDensity*30);

52 

53 mT.draw(c);

54 

55 c.restore();

56 

57  

58 

59 }