Android自定义视图

Android SDK有很多标准的视图，如按钮、TextView和图片等等。当我们遇到特殊的需求时（例如一个饼图或圆环图），就需要创建自定义视图。本章的目的是来展示如何创建一个简单的自定义视图，绘制视图的形状，给它一个漂亮的外观。

问题：

• 如何创建新的自定义视图？
• 如何定义自定义视图的属性？
• 如何画在画布上？

（1）创建一个新的Android项目

• Application Name: Simple Custom View
• Project Name: android-custom-view
• Package Name: com.zhaolei.views

（2）创建一个自定义视图

在创建一个自定义视图的第一个步骤是扩展基类视图，至少重写有一个重载的构造函数。

• /com/zhaolei/views/SimpleView.java

public class SimpleView extends View {    public SimpleView(Context context, AttributeSet attrs) {        super(context, attrs);    }}

（3）定义自定义的视图属性

当添加一个视图的布局文件，设置一些属性值，如宽度、高度等等，也可以自定义其他属性。

• 在 /res/values下创建一个新的布局文件: attrs.xml，并定义shape和dim两个属性。
• /res/values/attrs.xml

<resources>    <declare-styleable name="FaceView">        <attr name="shape" format="enum">            <enum name="circle" value="0"/>            <enum name="square" value="1"/>        </attr>        <attr name="dim" format="dimension"/>    </declare-styleable></resources>

（4）添加自定义的视图布局

扩展视图类和定义自定义属性后，可以像其他标准的视图那样使用自定义视图。这就需要定义一个属于自己的命名空间属性。自定义属性的格式为:http://schemas.android.com/apk/res/[包名].

• 此处我们定义两个视图，分别是 圆形和方形。
• /res/layout/activity_main.xml

<LinearLayout     ....    xmlns:customviews="http://schemas.android.com/apk/res/com.zhaolei.views"    ....    android:orientation="vertical"    >    <com.hmkcode.views.SimpleView            android:id="@+id/simpleViewCircle"            android:layout_width="140dp"            android:layout_height="150dp"            customviews:shape="circle"            customviews:dim="70dp"            android:layout_gravity="center_horizontal"         />     <com.hmkcode.views.SimpleView            android:id="@+id/simpleViewSquare"            android:layout_width="140dp"            android:layout_height="140dp"            customviews:shape="square"            customviews:dim="140dp"            android:layout_gravity="center_horizontal"         />     <TextView         android:id="@+id/tv"         android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_gravity="center_horizontal"         /></LinearLayout>

（5）通过自定义属性值自定义视图类

但是现在我们自定义的视图类是不能使用自定义属性（shape、dim）的，所以我们需要传递给类的使用。

• src/com/zhaolei/views/SimpleView.java

public class SimpleView extends View {    float dim;    int shape;    public SimpleView(Context context, AttributeSet attrs) {        super(context, attrs);        TypedArray a = context.getTheme().obtainStyledAttributes(                attrs,                R.styleable.SimpleView,                0, 0        );        try {            dim = a.getDimension(R.styleable.SimpleView_dim, 20f);            shape = a.getInteger(R.styleable.SimpleView_shape, 0);        } finally {            a.recycle();        }    }...}

（6）运行测试

在这一步，就可以运行应用程序了，但是图片没有将显示在屏幕上，我们新自定义视图仍然是空白。接下来画一些形状在画布上，就可以在屏幕上看到它了。

（7）在自定义视图上绘制画布

• 绘制自定义视图的形状，首先需要重写OnDraw（帆布）的自定义视图类的方法。所有的图纸必须通过在画布上的对象OnDraw参数。
• 画一个圆用的画布。drawcircle()以X和Y的圆的圆心和半径。
• 画一个正方形用画布。drawrect()以左上方和底部矩形的右角的x和y。
• 绘制对象定义的外观，设置自己喜欢的颜色。
• src/com/zhaolei/views/SimpleView.java

package com.zhaolei.views;import android.content.Context;import android.content.res.TypedArray;import android.graphics.Canvas;import android.graphics.CornerPathEffect;import android.graphics.Paint;import android.util.AttributeSet;import android.view.View;public class SimpleView extends View {    float dim;    int shape;    Paint paint;    public static final int CIRCLE = 0;    public static final int SQUARE = 1;    public SimpleView(Context context, AttributeSet attrs) {        super(context, attrs);        ....        }        paint = new Paint();        paint.setColor(0xfffed325); // yellow     }    @Override    protected void onDraw(Canvas canvas) {        super.onDraw(canvas);        switch(shape){            case CIRCLE:                canvas.drawCircle(dim, dim, dim, paint);                break;            case SQUARE:                canvas.drawRect(0, 0, dim, dim, paint);                break;        }    }}

（8）单击监听器添加自定义视图

为了像其他标准视图一样可以点击监听添加自定义视图。

• scr/com/zhaolei/views/MainActivity.java

package com.zhaolei.views;import android.app.Activity;import android.os.Bundle;import android.view.View;import android.view.View.OnClickListener;import android.widget.TextView;public class MainActivity extends Activity implements OnClickListener {    SimpleView svCircle;    SimpleView svSquare;    TextView tv;    @Override    protected void onCreate(Bundle savedInstanceState) {        super.onCreate(savedInstanceState);        setContentView(R.layout.activity_main);        svCircle = (SimpleView) findViewById(R.id.simpleViewCircle);        svSquare = (SimpleView) findViewById(R.id.simpleViewSquare);        tv = (TextView) findViewById(R.id.tv);        svCircle.setOnClickListener(this);        svSquare.setOnClickListener(this);    }    @Override    public void onClick(View view) {        switch(view.getId()){            case R.id.simpleViewCircle:                tv.setText("Circle");                break;            case R.id.simpleViewSquare:                tv.setText("Square");                break;        }    }}

（9）运行测试

运行这个应用程序，可以看到一个圆形和一个方形，这样我们就得到自定义视图啦，小伙伴们你们都懂了吗？