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）运行测试

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