Android\OPhone自定义视图（View）

最经在Android上作游戏居多了，在Android平台做游戏和做应用少有少许的不同，做游戏就会更多的使用自定义视图了，有很多东西需要我们自己去实现，就不像做应用，用得最多的就是Android系统的一些组件，当然偶尔也会涉及到自定义一些界面，但是这些自定义界面都是使用系统的一些组件来组合完成了，而游戏不同了，游戏在图形的处理上要求会更多，这时，自定义视图就派上用场了。

说老实话，做了几个游戏出来之后，才发现，以前要实现某个功能会经过很多的步骤并且很复杂，在Android就可以很轻松的解决，比如最简单的一个渐变色的处理，要是在J2ME上计算就会多很多，在Android就需要定义一个shape的XML文件即可，同时还可以利用shape来绘制一些基本的图形（有机会右面会介绍这个shape），甚至代替很多图片内容，这样既节省了空间，又提高了效率，为什么不好呢？Android真的很强大，主要是很灵活，我们可以用很多方法去实现某个功能。

好了，又废话了这么多，下面进入正题。

我们都知道Android的UI，都是基于View和ViewGroup以及一些子类，比如layout等等，所以我们在自定义视图时就需要将自定义的类继承自这个类。

首先我们需要在values目录下建立一个attrs.xml文件，来定义我们在自定义视图中需要使用的一些资源，比如：背景、字体大小、字体等等。代码如下：

1. <?xml version="1.0" encoding="utf-8"?>     
2. <resources>     
3. <declare-styleable name="TestView">     
4. <attr name="textColor" format="color" />     
5. <attr name="textSize" format="dimension" />     
6. <attr name="backGround" format="integer" />     
7. </declare-styleable>     
8. </resources>  

上面的代码很好理解，我们将自定义的试图名定位TestView，其中包括了字体颜色（textColor），字体尺寸（textSize）以及背景（backGround）。
接下来我们就需要建立一个类TestView，继承自View了。 
代码如下（代码加入了注释，这里就不多说了）：

1. package com.yarin.Android.Test;     
2.     
3. import android.content.Context;     
4. import android.content.res.TypedArray;     
5. import android.graphics.Canvas;     
6. import android.graphics.Paint;     
7. import android.util.AttributeSet;     
8. import android.view.View;     
9.     
10. public class TestView extends View     
11. {     
12.     private Paint   mPaint      = null;     
13.     
14.     private Context     mContext    = null;     
15.     
16.     /**    
17.      *  mTestView = new TestView(this);    
18.      *  setContentView(mTestView);    
19.      *  如果在Activity中这样写，那么就需要实现这个构造函数    
20.      */    
21.     public TestView(Context context)     
22.     {     
23.         super(context);     
24.              
25.         mContext = context;     
26.         mPaint = new Paint();     
27.     }     
28.          
29.     /**    
30.      *  setContentView(R.layout.main);    
31.      *  mTestView = (TestView)findViewById(R.id.mTestView);    
32.      *  如果在Activity中这样写，那么就需要实现这个构造函数    
33.      */    
34.     public TestView(Context context, AttributeSet attrs)     
35.     {     
36.         super(context, attrs);     
37.              
38.         mContext = context;     
39.     
40.         mPaint = new Paint();     
41.              
42.         TypedArray params = context.obtainStyledAttributes(attrs,R.styleable.TestView);     
43.         //取得xml布局文件中所定义的背景     
44.         int backgroudId = params.getResourceId(R.styleable.TestView_backGround,0);     
45.         if (backgroudId != 0)      
46.         {     
47.             setBackgroundResource(backgroudId);     
48.         }     
49.         //字体颜色     
50.         int textColor = params.getColor(R.styleable.TestView_textColor,0XFFFFFFFF);     
51.         mPaint.setColor(textColor);     
52.         //字体大小     
53.         float textSize = params.getDimension(R.styleable.TestView_textSize, 20);     
54.         mPaint.setTextSize(textSize);     
55.     }     
56.     protected void onDraw(Canvas canvas)      
57.     {     
58.         super.onDraw(canvas);     
59.     
60.         //测试绘制一个矩形     
61.         canvas.drawRect(30, 50, 80, 90, mPaint);     
62.         //绘制一个字符串     
63.         canvas.drawText("测试字符串", 50, 150, mPaint);     
64.     }     
65. }  

接下来，我们需要在main.xml中来修改加入自定义视图了，修改如下：

1. <?xml version="1.0" encoding="utf-8"?>    
2. <LinearLayout      
3.     xmlns:android="http://schemas.android.com/apk/res/android"    
4.     xmlns:test="http://schemas.android.com/apk/res/com.yarin.Android.Test"    
5.     android:orientation="vertical"    
6.     android:layout_width="fill_parent"    
7.     android:layout_height="fill_parent"    
8.     >    
9. <TextView       
10.     android:layout_width="fill_parent"      
11.     android:layout_height="wrap_content"      
12.     android:text="@string/hello"    
13.     />    
14.     <!-- 自定义视图      
15.     注意这里是如何来申明自定义视图中的字体颜色、字体大小、背景的，     
16.     在线性布局中不要忘记“xmlns:test="http://schemas.android.com/apk/res/com.yarin.Android.Test”     
17.     -->    
18. <com.yarin.Android.Test.TestView      
19.     android:id="@+id/mTestView"    
20.     android:layout_width="fill_parent"      
21.     android:layout_height="fill_parent"    
22.     test:textColor="#FFFFFFFF"      
23.     test:textSize="25dip"    
24.     test:backGround="@drawable/bg"    
25. />    
26. </LinearLayout>  

最后在Activity中，不管我们采用下面那一种方式来写都可以了：

1. //mTestView = new TestView(this);     
2. //setContentView(mTestView);     
3.              
4. setContentView(R.layout.main);     
5. mTestView = (TestView)findViewById(R.id.mTestView);   

大家可以从代码看出，我们在屏幕上绘制了一个矩形和一个字符串做测试。效果如下（这个效果是在OPhone1.0上测试的）:

也没什么多说的，网络上已经早已有方法你来讲解了，就算自己作个记录吧，能帮助到某个朋友，当然很高兴，下面是Eclipse工程文件。   

需要说明一下，3D的应用时不能这样的，3D需要使用SurfaceView来实现，后面有时间在介绍。最后总结一点经验，Android上开发应用，最主要的就是UI界面的布局，其他的都好解决，正在努力想UI的布局有没有更好的方式。

谢谢大家支持。

本文转自 yarin 51CTO博客，原文链接：http://blog.51cto.com/yarin/381936，如需转载请自行联系原作者