android基础知识14：自定义View

本篇主要介绍如何自定义view。

1、自定义View

对于初学着来说，他们习惯了Android 传统的页面布局方式，如下代码:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> </LinearLayout> 然上面的布局方式可以帮助我们完成简单应用的开发了，但是如果你想写一个复杂的应用，这样就有点牵强了，大家不信可以下源码都研究看看，高手写的布局方式，如上面的布局高手通常是这样写的:

<?xml version="1.0" encoding="utf-8"?> <A> <B></B> </A> <?xml version="1.0" encoding="utf-8"?> <A> <B></B> </A> 其中A extends LinerLayout, B extends TextView.
为了帮助大家更容易理解，我写了一个简单的Demo ,具体步骤如下：
首先新建一个Android 工程 命名为ViewDemo .
然后自定义一个View 类，命名为MyView(extends View) .代码如下:

public class MyView extends View { private Paint mPaint; private Context mContext; private static final String mString = "Welcome to Mr Wei's blog"; public MyView(Context context) { super(context); Log.v("MyView(Context context)","" + this.getHeight()+ " " + this.getWidth()); } public MyView(Context context,AttributeSet attr) { super(context,attr); Log.v("MyView(Context context,AttributeSet attr)","" + this.getHeight()+ " " + this.getWidth()); } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); Log.v("onDraw(Canvas canvas)","" + this.getHeight()+ " " + this.getWidth()); mPaint = new Paint(); // 获得资源 Resources rec = getResources(); // InputStream得到资源流 InputStream in = rec.openRawResource(R.drawable.ic_launcher); // BitmapDrawable 解析数据流 BitmapDrawable bitmapDrawable = new BitmapDrawable(in); // 得到图片 Bitmap bitmap = bitmapDrawable.getBitmap(); // 绘制图片 canvas.drawBitmap(bitmap, 100, 100,mPaint); //设置画笔颜色 mPaint.setColor(Color.RED); //设置填充 mPaint.setStyle(Style.FILL); //画一个矩形,前俩个是矩形左上角坐标，后面俩个是右下角坐标 canvas.drawRect(new Rect(10, 10, 100, 100), mPaint); mPaint.setColor(Color.BLUE); //绘制文字 canvas.drawText(mString, 10, 110, mPaint); } protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { // TODO Auto-generated method stub super.onMeasure(widthMeasureSpec, heightMeasureSpec); Log.v("onMeasure","" + this.getHeight()+ " " + this.getWidth()); } } 然后将我们自定义的View 加入到main.xml 布局文件中,代码如下:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <demo.xuxm.com.MyView android:layout_width="fill_parent" android:layout_height="fill_parent" /> </LinearLayout> 最后执行之，效果如下图:

2、Android 中自定义属性(attr.xml,TypedArray)的使用

在xml 文件里定义控件的属性，我们已经习惯了android:attrs="" ,那么我们能不能定义自己的属性能，比如:test:attrs="" 呢？答案是肯定的.
好了我就不卖关子了，直接进入主题。大致以下步骤:
一、 在res/values 文件下定义一个attrs.xml 文件.代码如下:

<?xml version="1.0" encoding="utf-8"?> <resources> <declare-styleable name="MyView"> <attr name="textColor" format="color" /> <attr name="textSize" format="dimension" /> </declare-styleable> </resources> 二、 我们在MyView.java 代码修改如下，其中下面的构造方法是重点，我们获取定义的属性我们R.sytleable.MyView_textColor, 获取方法中后面通常设定默认值(floattextSize = a.getDimension(R.styleable.MyView_textSize, 36 ); )， 防止我们在xml 文件中没有定义.从而使用默认值!
获取，MyView 就是定义在<declare-styleablename="MyView "></declare-styleable> 里的名字,获取里面属性用 名字_ 属性 连接起来就可以.TypedArray 通常最后调用 .recycle() 方法，为了保持以后使用该属性一致性！
public class MyView extends View { private Paint mPaint; private Context mContext; private static final String mString = "Welcome to Mr Wei's blog"; public MyView(Context context) { super(context); } public MyView(Context context,AttributeSet attr) { super(context,attr); mPaint = new Paint(); TypedArray a = context.obtainStyledAttributes(attr, R.styleable.MyView); int textColor = a.getColor(R.styleable.MyView_textColor, 0XFFFFFFFF); float textSize = a.getDimension(R.styleable.MyView_textSize, 36); mPaint.setTextSize(textSize); mPaint.setColor(textColor); a.recycle(); } @Override protected void onDraw(Canvas canvas) { // TODO Auto-generated method stub super.onDraw(canvas); //设置填充 mPaint.setStyle(Style.FILL); //画一个矩形,前俩个是矩形左上角坐标，后面俩个是右下角坐标 canvas.drawRect(new Rect(10, 10, 100, 100), mPaint); mPaint.setColor(Color.BLUE); //绘制文字 canvas.drawText(mString, 10, 110, mPaint); } } 三、将我们自定义的MyView 加入布局main.xml 文件中，平且使用自定义属性,自定义属性必须加上:
xmlns:test =" http://schemas.android.com/apk/res/demo.xuxm.com"蓝色 是自定义属性的前缀，红色 是我们包名.
main.xml 全部代码如下:

<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:test="http://schemas.android.com/apk/res/demo.xuxm.com" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" /> <demo.xuxm.com.MyView android:layout_width="fill_parent" android:layout_height="fill_parent" test:textSize="20px" test:textColor="#fff" /> </LinearLayout> 四、运行之效果如下图:

参考资料：

《Android高手进阶教程》

Android中继承View的研究(一)