展会信息港展会大全

自定义布局执行流程之 画出自己定义的View
来源:互联网   发布日期:2016-01-14 09:51:17   浏览:3003次  

导读:android简析自定义布局、布局的执行流程以下代码示例针对(Android 2.3)你玩过植物大战僵尸吗?你玩过愤怒的小鸟吗?你是不是很疑惑精美的UI界面是如何作出来的呢?很明显andriod自带的控件是不可能做到那样的......

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

以下代码示例针对(Android 2.3)

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

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

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

。。。。。。

请看此图

。。。。。。

View.java

01

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

02

03

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

04

05

onMeasure(widthMeasureSpec, heightMeasureSpec);

06

07

}

08

09

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

10

11

12

13

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

14

15

public 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

27

protected 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, intb);

04

05

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

06

07

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

08

09

protected void measureChild(View child, int parentWidthMeasureSpec,

10

11

int parentHeightMeasureSpec) {}

12

13

14

15

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

16

17

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

18

19

public int getChildCount() {return mChildrenCount; }

RelativeLayout.java extends ViewGroup.java

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

01

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

02

03

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

04

05

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

06

07

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

08

09

public static class LayoutParams extends ViewGroup.MarginLayoutParams{

10

11

private int mLeft, mTop, mRight, mBottom;

12

13

}

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

CustomGridLayout.javaextends 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(...)的底层实现了吗

01

public 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();

01

protected 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

}

赞助本站

人工智能实验室

相关热词: 自定义 布局 View

相关内容
AiLab云推荐
展开

热门栏目HotCates

Copyright © 2010-2024 AiLab Team. 人工智能实验室 版权所有    关于我们 | 联系我们 | 广告服务 | 公司动态 | 免责声明 | 隐私条款 | 工作机会 | 展会港