自定义View学习-绘制一个简单的圆

想把平时学到的关于自定义View的一些东西记录下来，从最基本的慢慢往难学吧。这篇是简单的不能再简单的绘制，算是一个入门吧。做了两个，一个是就显示圆。还有一个是绘制的圆根据手指滑动的位置来移动。并且圆的半径是动态的，所以这也就导致了你的圆跟着你的手指滑动时，一会大，一会小的。个人觉得这个还是挺好玩的。好了接下来进入主题。

这个圆就是继承了View，然后使用了自定义属性。
先上自定义属性：

<declare-styleable name="Circle">
    <attr name="android:color"/>
    <attr name="radius" format="dimension"/>
    <attr name="alpha" format="integer"/>
</declare-styleable>

接下来是自定义的这个圆：

public class Circle extends View {

    private Paint mPaint = new Paint();
    private float mRadius;

    /**
     * 这个是从代码中创建自定义控件时间调用
     * @param context
     */
    public Circle(Context context) {
        this(context,null);
    }

    /**
     * 这个是从xml中创建自定义控件时间调用
     * @param context
     * @param attrs
     */
    public Circle(Context context, AttributeSet attrs) {
        this(context,attrs,0);
    }

    /**
     * 这个是从xml中创建自定义控件时间调用，并且带有Style
     * AttributeSet 可以得到这个控件的所有属性
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    public Circle(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init(attrs);
    }

    private void init(AttributeSet attrs){
        TypedArray array = getContext().obtainStyledAttributes(attrs, R.styleable.Circle);
        //int mColor = array.getColor(R.styleable.Circle_wbcolor, Color.BLACK);
        int mColor = array.getColor(R.styleable.Circle_android_color,Color.BLUE);
        mRadius = array.getDimension(R.styleable.Circle_radius, 50); //半径
        int mAlpha = array.getInteger(R.styleable.Circle_alpha,10);
        array.recycle();
        mPaint.setDither(true); //防抖
        mPaint.setAntiAlias(true); //抗锯齿
        mPaint.setStrokeWidth(50); //设置画笔的线宽
        mPaint.setColor(mColor);
        mPaint.setAlpha(mAlpha);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        DisplayMetrics dm = getResources().getDisplayMetrics(); //得到屏幕
        int width = dm.widthPixels/2;
        int height =  dm.heightPixels/2;
        Log.d("TAG","width" + width + "------" + "height" + height);
        canvas.drawCircle(width, height, mRadius, mPaint);
        canvas.save();
    }
}

最后我们在activity中使用全类名然后设置自定义属性的值，就好了。注意命名空间哦。第一个就是这么简单，好了记下来我们看第二个。
同样先上自定义属性：

<declare-styleable name="DrawView">
    <attr name="BallColor" format="color"/>
    <attr name="BallRadius" format="float"/>
    <attr name="BallStartX" format="float"/>
    <attr name="BallStartY" format="float"/>
</declare-styleable>

接下来是自定义变换的圆：

public class DrawView extends View {

    /*private float circleX = 40;
    private float circleY = 50;
    private float circleR = 15;*/

    private float circleX;
    private float circleY;
    private float circleR;
    private int ballColor;

    public DrawView(Context context) {
        this(context，null);
    }

    public DrawView(Context context, AttributeSet attrs) {
        super(context, attrs);

        TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.DrawView);

        //获取开始的X的位置属性值
        circleX = a.getFloat(R.styleable.DrawView_BallStartX,10);
        circleY = a.getFloat(R.styleable.DrawView_BallStartY,10);
        circleR = a.getFloat(R.styleable.DrawView_BallRadius,10);
        ballColor = a.getColor(R.styleable.DrawView_BallColor,0x990000FF);

        a.recycle();
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //创建画笔
        Paint paint = new Paint();
        //设置画笔颜色
        //paint.setColor(Color.RED);
        paint.setColor(ballColor);
        // 画小球
        canvas.drawCircle(circleX,circleY,circleR,paint);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        circleX = event.getX();
        circleY = event.getY();
        circleR = circleX % circleY;  // 改变R是为了好玩
        this.invalidate();
        return true;
    }
}

使用方法和上面那个一样。开始写第二个时间本来是圆跟随手指移动，但是在移动时间我突发奇想，如果能一边移动，圆一边变化大小应该挺好玩的吧，于是就在onTouchEvent中做了处理，虽然很简单，但是做出来的那个效果还有效果还是很喜欢的。