Android自定义View

Android高手进阶教程(三)之----Android 中自定义View的应用. 2010-04-18 21:11:25

标签：Android进阶View定义教程

原创作品，允许转载，转载时请务必以超链接形式标明文章原始出处、作者信息和本声明。否则将追究法律责任。https://www.360docs.net/doc/5615836084.html,/1556324/311457

大家好我们今天的教程是在Android 教程中自定义View 的学习，对于初学着来说，他们习

惯了Android 传统的页面布局方式，如下代码:

view plaincopy to clipboardprint?

1.

2.

3. android:orientation="vertical"

4. android:layout_width="fill_parent"

5. android:layout_height="fill_parent"

6. >

7.

8. android:layout_width="fill_parent"

9. android:layout_height="wrap_content"

10. android:text="@string/hello"

11. />

12.

13.

14.

15. android:orientation="vertical"

16. android:layout_width="fill_parent"

17. android:layout_height="fill_parent"

18. >

19.

20. android:layout_width="fill_parent"

21. android:layout_height="wrap_content"

22. android:text="@string/hello"

23. />

24.

当然上面的布局方式可以帮助我们完成简单应用的开发了，但是如果你想写一个复杂的应用，这样就有点牵强了，大家不信可以下源码都研究看看，高手写的布局方式，如上面的布局高手通常是这样写的:

view plaincopy to clipboardprint?

1.

2.

3.

4.

5.

6.

7.

8.

view plaincopy to clipboardprint?

其中A extends LinerLayout, B extends TextView.

其中A extends LinerLayout, B extends TextView.

为了帮助大家更容易理解，我写了一个简单的Demo ,具体步骤如下：

首先新建一个Android 工程命名为ViewDemo .

然后自定义一个View 类，命名为MyView(extends View) .代码如下:

1.view plaincopy to clipboardprint?

2.package com.android.tutor;

3.import android.content.Context;

4.import android.graphics.Canvas;

5.import android.graphics.Color;

6.import android.graphics.Paint;

7.import android.graphics.Rect;

8.import android.graphics.Paint.Style;

9.import android.util.AttributeSet;

10.i mport android.view.View;

11.p ublic class MyView extends View {

12. private Paint mPaint;

13. private Context mContext;

;

15.

16. public MyView(Context context) {

17. super(context);

18.

19. }

20. public MyView(Context context,AttributeSet attr)

21. {

22. super(context,attr);

23.

24. }

25. @Override

26. protected void onDraw(Canvas canvas) {

27. // TODO Auto-generated method stub

28. super.onDraw(canvas);

29.

30. mPaint = new Paint();

31.

32. //设置画笔颜色

33. mPaint.setColor(Color.RED);

34. //设置填充

35. mPaint.setStyle(Style.FILL);

36.

37. //画一个矩形,前俩个是矩形左上角坐标，后面俩个是右下角坐标

38. canvas.drawRect(new Rect(10, 10, 100, 100), mPaint);

39.

40. mPaint.setColor(Color.BLUE);

41. //绘制文字

42. canvas.drawText(mString, 10, 110, mPaint);

43. }

44.}

45.p ackage com.android.tutor;

46.i mport android.content.Context;

47.i mport android.graphics.Canvas;

48.i mport android.graphics.Color;

49.i mport android.graphics.Paint;

50.i mport android.graphics.Rect;

51.i mport android.graphics.Paint.Style;

52.i mport android.util.AttributeSet;

53.i mport android.view.View;

54.p ublic class MyView extends View {

55.private Paint mPaint;

56.private Context mContext;

58.

59.public MyView(Context context) {

60. super(context);

61.

62.}

63.public MyView(Context context,AttributeSet attr)

64.{

65. super(context,attr);

66.

67.}

68.@Override

69.protected void onDraw(Canvas canvas) {

70. // TODO Auto-generated method stub

71. super.onDraw(canvas);

72.

73. mPaint = new Paint();

74.

75. //设置画笔颜色

76. mPaint.setColor(Color.RED);

77. //设置填充

78. mPaint.setStyle(Style.FILL);

79.

80. //画一个矩形,前俩个是矩形左上角坐标，后面俩个是右下角坐标

81. canvas.drawRect(new Rect(10, 10, 100, 100), mPaint);

82.

83. mPaint.setColor(Color.BLUE);

84. //绘制文字

85. canvas.drawText(mString, 10, 110, mPaint);

86.}

87.}

88.

89.然后将我们自定义的View 加入到main.xml 布局文件中,代码如下:

90.v iew plaincopy to clipboardprint?

91.

92.

93. android:orientation="vertical"

94. android:layout_width="fill_parent"

95. android:layout_height="fill_parent"

96. >

97.

98. android:layout_width="fill_parent"

99. android:layout_height="wrap_content"

100. android:text="@string/hello"

101. />

102.

103. android:layout_width="fill_parent"

104. android:layout_height="fill_parent"

105./>

106.

107.

108.

109. android:orientation="vertical"

110. android:layout_width="fill_parent"

111. android:layout_height="fill_parent"

112. >

113.

114. android:layout_width="fill_parent"

115. android:layout_height="wrap_content"

116. android:text="@string/hello"

117. />

118.

119. android:layout_width="fill_parent"

120. android:layout_height="fill_parent"

121./>

122.

最后执行之，效果如下图:

OK,大功告成，今天就写到这里，开始做饭了，老婆孩子等我做饭了，lol~

对于Android系统的自定义View可能大家都熟悉了，对于自定义View的属性添加，以及Android的Layout的命名空间问题，很多网友还不是很清楚，今天Android123一起再带大家

温习一下。

1.CwjView myView=new CwjView(context);

复制代码

如果用于游戏或整个窗体的界面，我们可能直接在onCreate中setContentView(myView); 当然如果是控件，我们可能会需要从Layout的xml中声明，比如

1.

2.android:layout_width="wrap_content"

3.android:layout_height="wrap_content"

4./>

复制代码

当然，我们也可以直接从父类声明比如

1.

2.android:layout_width="wrap_content"

3.android:layout_height="wrap_content"

4./>

复制代码

上面我们仅用了父类View的两个属性，均来自android命名空间，而名称为layout_width 或layout_height，我们自定义的控件可能有更多的功能，比如

1.

2.android:layout_width="wrap_content"

3.android:layout_height="wrap_content"

4.cwj:age="22"

5.cwj:university="sjtu"

6.cwj:city="shanghai"

7./>

复制代码

我们可以看到上面的三个属性，是我们自定义的。作为标准xml规范，可能还包含了类似xmlns:android="https://www.360docs.net/doc/5615836084.html,/apk/res/android" 这样的语句，对于定义完整的

View，我们的命名空间为cwj，这里可以写为

xmlns:cwj=https://www.360docs.net/doc/5615836084.html,/apk/res/https://www.360docs.net/doc/5615836084.html,.android123.cwjView 或xmlns:cwj=https://www.360docs.net/doc/5615836084.html,/apk/res/android 都可以。

对于定义的cwj命名空间和age、university以及city的三个属性我们如何定义呢? 在工程的res/values目录中我们新建一个cwj_attr.xml文件，编码方式为utf-8是一个好习惯，内容如

下

1.

2.

3.

4.

5.

6.

7.

8.

复制代码

这里我们可能对format不是很熟悉，目前Android系统内置的格式类型有integer比如ProgressBar的进度值，float比如RatingBar的值可能是3.5颗星，boolean比如ToggleButton 的是否勾选，string比如TextView的text属性，当然除了我们常见的基础类型外，Android 的属性还有特殊的比如color是用于颜色属性的，可以识别为#FF0000等类型，当然还有dimension的尺寸类型，比如23dip，15px，18sp的长度单位，还有一种特殊的为reference，一般用于引用@+id/cwj @drawable/xxx这样的类型。

当然什么时候用reference呢? 我们就以定义一个颜色为例子，

1.

复制代码

这里我们用了逻辑或的运算符，定义的红色是颜色类型的，同时可以被引用

当然，对于我们自定义的类中，我们需要使用一个名为obtainStyledAttributes的方法来获取我们的定义。在我们自定义View的构造方法(Context context, AttributeSet attrs)的重载类型中

可以用

1.public CwjView(Context context, AttributeSet attrs) {

2.super(context, attrs);

3.TypedArray a = context.obtainStyledAttributes(attrs,

4.R.styleable.cwj_attr);

5.mAge = a.getInteger(R.styleable.CwjView_age, 22);

6.mCity = a.getString(R.styleable.CwjView_city, "shanghai");

7.mUniversity= a.getString(R.styleable.CwjView_university, "sjtu");

8.

9. a.recycle(); //Android123提示大家不要忘了回收资源

10.

11.}

复制代码

这样类的全局成员变量mAge、mCity就获取了我们需要的内容，当然根据layout中的数值我们自定义的CwjView需要动态的处理一些数据的情况，可以使用AttributeSet类的

getAttributeResourceValue方法获取。

1.public CwjView(Context context, AttributeSet attrs)

2.{

3.super(context, attrs);

4.resId = attrs.getAttributeResourceValue("https://www.360docs.net/doc/5615836084.html,.android123.CwjView", "age", 100);

5.resId = attrs.getAttributeResourceValue("https://www.360docs.net/doc/5615836084.html,.android123.CwjView", "city", "shanghai");

6.//resID就可以任意使用了

7.}

复制代码

以上两种方法中，参数的最后一个数值为默认的，如果您有不明白的地方可以来函到android123@https://www.360docs.net/doc/5615836084.html,我们会在第一时间回复。（文/Android开发网）

Android 自定义View

2009年10月13日星期二 18:12

在values/attrs.xml中：

编写MyView.java，继承View

package test.cuntomizedview;

import java.util.Calendar;

import test.cuntomizedview.R;

import android.content.Context;

import android.content.res.TypedArray;

import android.graphics.Canvas;

import android.graphics.Color;

import android.graphics.Paint;

import android.os.SystemClock;

import android.util.AttributeSet;

import android.view.View;

public class MyView extends View {

private Paint mPaint;

private Context mContext;

private String mStr;

public MyView(Context context, AttributeSet attrs) {

super(context, attrs);

mContext = context;

initMyView();

TypedArray params = context.obtainStyledAttributes(attrs,

R.styleable.MyView);

int backgroudId = params.getResourceId(

R.styleable.MyView_imgBackground, 0);

if (backgroudId != 0)

setBackgroundResource(backgroudId);

int textColor = params.getColor(R.styleable.MyView_textColor, 0XFFFFFFFF);

setTextColor(textColor);

float textSize = params.getDimension(R.styleable.MyView_textSize, 36); setTextSize(textSize);

float paddingLeft = params.getDimension(

R.styleable.MyView_textPaddingLeft, 41);

float paddingTop = params.getDimension(

R.styleable.MyView_textPaddingTop, 21);

setPaddings(paddingLeft, paddingTop);

}

@Override

protected void onDraw(Canvas canvas) {

super.onDraw(canvas);

if(mStr != null) {

canvas.drawText(mStr, 0, 0, mPaint);

}

canvas.drawText("heiheihei", 30, 60, mPaint);

}

private void initMyView() {

mPaint = new Paint();

mPaint.setColor(Color.WHITE);

}

private void setTextColor(int textColor) {

mPaint.setColor(0XFFAABBCC);

}

private void setTextSize(float textSize) {

mPaint.setTextSize(textSize);

}

private void setPaddings(float paddingLeft, float paddingTop) {

setPadding((int)paddingLeft, (int)paddingTop, 0, 0);

}

}

// 注意怎样在attrs中怎样定义background并取得background。

在layout中使用MyView，

main.xml

xmlns:android="https://www.360docs.net/doc/5615836084.html,/apk/res/android"

xmlns:app="https://www.360docs.net/doc/5615836084.html,/apk/res/test.cuntomizedview" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent">

android:layout_width="fill_parent"

android:layout_height="fill_parent"

app:textColor="#FFFFFFFF" app:textSize="40dip"

app:textPaddingLeft="40dip" app:textPaddingTop="40dip"

app:imgBackground="@drawable/bg_time"

/>