Android 自定义 View 简单指南(02绘制)

529 阅读2分钟

接着上一章。

这次的目标是绘制一个圆心位于 View 中心点的空心圆。

知识:

  • Paint 画笔
  • Canvas 画布坐标
  • 使用 Canvas 绘制圆形

画笔 Paint

View 的绘制与现实中的绘画是同样的道理,现在中我们想要进行绘画至少需要两样物品:画笔与白纸,这两项物品在 Android 系统也给我们提供了—— Paint 与 Canvas;

接下来我们初始化画笔 Paint 为下面的绘制空心圆坐准备。

public class FreeStyleView extends View {
	// 画笔,用于绘制空心圆
    private Paint paint;

    public FreeStyleView(Context context) {
        super(context);
        init();
    }

    public FreeStyleView(Context context,AttributeSet attrs) {
        super(context, attrs);
        init();
    }

	// 在构造方法中就将画笔初始化好,避免在 onDraw() 方法中初始化,因为系统会多次调用 onDraw()
    private void init(){
        // 实例化画笔,好比给自己准备了一支笔
        paint = new Paint();
        // 设置画笔模式,FILL 填充,STROKE 描边,意为画出来的画出来的形状是填充还仅仅是描边的形状
        paint.setStyle(Paint.Style.STROKE);
        // 设置画笔颜色
        paint.setColor(Color.RED);
    }

}

其实画笔有许多的作用,可以绘制形状、路径和 bitmap。详细看这里,建议最后看

画布坐标

和显示画图一样,我们需要准确的将期望绘制的内容绘制在画布上。现实中我们是以画布四周为基准的,在 Android 在 Canvas 中提供了类似于数学中直角坐标系一样的坐标系统,用于在绘制 View 内容时定位绘制位置,View 的整体坐标也是如此的。

画布坐标和直角坐标系类似,横坐标为 X 轴 纵坐标为 Y 轴,区别在于 画布坐标系的原点位于 View 的左上定点,Y 轴 的正方向位于 X 轴 的下方,同时 View 的宽高就是画布的宽高,记住这一点,一面绘制的时候超出边界。形象如 下图所示。

ELZjG4.png

绘制圆形

很简单,在 onDraw() 中调用 canvas 的 drawCircle 函数,一次传入圆心点的x,y值、圆半径以及绘制该圆使用的画笔。

@Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        // 绘制一个圆形
        // getWidth 获取 View 的宽度
        // getHeight 获取 view 的高度
  canvas.drawCircle(getWidth()/2,getHeight()/2,getHeight()/2,paint);
    }

最后显示效果如下:

ELuxk6.md.png

为什么需要测量

最后我们在 Activity 布局中将自定义 View 的高度改为 wrap_content ,然后看一下效果。

为什么出出现这种效果呢?????高度明明时 wrap_content 为什么会充满屏幕变?

ELMk2F.md.png