自定义View（自定义圆形效果）

背景

前面的文章我们介绍了一些关于自定义View的基本知识和自定义View的类型，今天真正的来实现一个自定义View。

自定义圆形

从简单的开始，我们先实现一个自定义的圆形View，属于继承View重写 onDraw方法的类型
public class CircleView extends View{ private int mColor = Color.GREEN; private Paint mPaint = new Paint(Paint.ANTI_ALIAS_FLAG); public CircleView(Context context) { super(context); init(); } public CircleView(Context context, AttributeSet attrs) { super(context, attrs); init(); } public CircleView(Context context, AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); init(); } /** * 初始化画笔的颜色 */ private void init(){ mPaint.setColor(mColor); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); int width = getWidth(); int height = getHeight(); int radius = Math.min(width,height) / 2; canvas.drawCircle(width / 2,height / 2,radius,mPaint); } }
以上代码就简单的实现了一个具有圆形效果的自定义View，它会在自己的中兴点按照宽高的最小值为直径绘制一个实心的园，很简单，大家应该都会，但是在我们使用的时候我们会发现

circleview.png

我们可以看到，在这样的使用不，padding和warp_content并不起作用，因为我们前面的文章说到过，这种方式的自定义View要自己处理padding和warp_content。

padding和warp_content的处理

其实对于这两个属性的处理也很简单，我们只要稍稍的修改一下onDraw方法就可以了，下面是见证奇迹的时刻：
@Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); //获取padding的数值 final int paddingLeft = getPaddingLeft(); final int paddingRight = getPaddingRight(); final int paddingTop = getPaddingTop(); final int paddingBottom = getPaddingBottom(); int width = getWidth() - paddingLeft - paddingRight; int height = getHeight() - paddingTop - paddingBottom; int radius = Math.min(width,height) / 2; canvas.drawCircle(paddingLeft + width / 2,paddingRight + height / 2,radius,mPaint); }

@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec); int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec); int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec); int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec); int width = (int)this.getContext().getResources() .getDimension(R.dimen.cricleView_width); int height = (int)this.getContext().getResources() .getDimension(R.dimen.cricleView_height); if(widthSpecMode == MeasureSpec.AT_MOST && heightSpecMode == MeasureSpec.AT_MOST){ setMeasuredDimension(width,height); }else if(widthSpecMode == MeasureSpec.AT_MOST){ setMeasuredDimension(heightSpecSize,heightSpecSize); }else if(heightSpecMode == MeasureSpec.AT_MOST){ setMeasuredDimension(widthSpecSize,widthSpecSize); } }

circleview2.png

怎么样效果很明显吧。

总结

今天的非常基础，就是讲了一个超级简单的自定义绘制，只是适合初学者，希望大神们不要喷，哈哈。