自定义控件(一)

一 , 绘图工具

说明:自定义控件几乎是只要是显示的一些需求都可以实现,但是,一般是不得已才使用,自定义的控件,因为调试的过程中比较麻烦.
在我看来吧,我是第一次来正规的学习,感觉是有很多东西要记的,为什么这样说呢?我前面也看了好多大神的博客,我也学了好多,可能自己还是不会自主学习吧,有些方法就是猜的,百度,就算了,现在百度都基本说法一样,有些还收不到,废话到这吧.
—————————
继承view来实现今天的内容吧 还有好几种自定义控件的方法,还没学,哈哈以后在说,先写这个简单的吧
—————————

[1]继承(一个已有的类或者view)

private Paint mPaint;
public class CustomView extends View{
    public CustomView(Context context) {
        this(context,null);
    }

    public CustomView(Context context, AttributeSet attrs) {
        this(context, attrs,0);
    }

    /**
     * 这是5.0版本出来的方法
     * @param context
     * @param attrs
     * @param defStyleAttr
     * @param defStyleRes
     */
    public CustomView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
    }

    public CustomView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        //新建画笔
        mPaint = new Paint(); 
    }
}

以上代码是简单实现 ,4个参数的是5.0版本出来的,当时material design出来了,出来这个方法吧,

  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(0xff00ff00);

    }

然后重写onDraw方法,通过onDraw的画布,来写内容的,canvasd当然也可以自己画上颜色

  <com.zhouzhou.day02_1.CustomView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:text="Hello World!"/>

在布局中引用后,运行如图

现在就简单的用上了,哈哈,
接下来学习一下几个绘图 api

1. 画点 canvas.drawPoint(5,5,mPaint);
2. 画线 canvas.drawLine(200,200,400,200,mPaint);
3. 矩形 canvas.drawRect(20,20,200,100,mPaint);
4. 圆 canvas.drawCircle(400,400,60,mPaint);

  @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(0xff00ff00);
        //设置画笔颜色
        mPaint.setColor(Color.RED);
        mPaint.setStrokeWidth(5);
        //画点
        canvas.drawPoint(5,5,mPaint);
        //画线
        canvas.drawLine(200,200,400,200,mPaint);

        //画面
        // [1] 矩形
        canvas.drawRect(20,20,200,100,mPaint);
        // [2]圆
        canvas.drawCircle(400,400,60,mPaint);

        //画路径
        Path path = new Path();
        path.moveTo(500,500);
        path.lineTo(600,600);
        path.lineTo(600,610);
        path.lineTo(600,670);
        canvas.drawPath(path,mPaint);
        //圆弧                                    true表示画扇形  false表示没下面的三角形
        canvas.drawArc(new RectF(600,200,650,250),500,100,true,mPaint);
        //画椭圆
//        canvas.drawOval();
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ic_launcher);
        canvas.drawBitmap(bitmap,200,700,mPaint);

        //画 五角星
        mPaint.setColor(Color.BLUE);
        mPaint.setStyle(Paint.Style.STROKE);
        Path path1 = new Path();
        path1.moveTo(300,700);   //圆的半径是200  (300,900)
        for (int i = 1; i < 6; i++) {
            path1.lineTo((float) (300+200*Math.sin(Math.toRadians(144*i))),(float) (900-200*Math.cos(Math.toRadians(144*i))));
        }
        canvas.drawPath(path1,mPaint);
    }

接下来写个时钟
这个原理:就是有分钟,有时钟的,还有秒钟,原来自己觉得这个比较难实现,现在觉得还好,主要是canvas旋转,实际的画,还是在原来的地方,就这点,其他就好说了

 @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //背景变黑的
        canvas.drawColor(Color.BLACK);
        //------>[1]画时钟刻度
        mPaint.setColor(Color.WHITE);
        //消除锯齿
        mPaint.setAntiAlias(true);
        //空心
        mPaint.setStyle(Paint.Style.STROKE);

        canvas.save();

        canvas.drawCircle(200,200,200,mPaint);
        mPaint.setStyle(Paint.Style.FILL);
        //12个刻度
        for (int i = 0; i < 12; i++) {
            if (i % 3 == 0) {
                canvas.drawLine(200,0,200,20,mPaint);
            }else {
                canvas.drawLine(200,0,200,10,mPaint);
            }
                //根据点 (200,200) 旋转 30 角度
                canvas.rotate(30,200,200);
        }

        canvas.restore();

    }

只是画了个刻度

//保存当前的状态
canvas.save();
//取出原来存的状态 —>(旋转rotate,平移translate,缩放sacle,倾斜skew)
canvas.restore();

package com.zhouzhou.day02;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.os.Handler;
import android.os.Message;
import android.util.AttributeSet;
import android.view.View;

import java.util.Calendar;

/**
 *
 * Created by zhousaito on 2016/9/6.
 */
public class MyClockView extends View implements Handler.Callback{

    private Paint mPaint;
    private Path mHourPath;
    private Handler mHandler = new Handler(this);
    private Path mMinutePath;

    public MyClockView(Context context) {
        this(context, null);
    }

    public MyClockView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public MyClockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);

        mPaint = new Paint();

        //画粗点的时钟
        mHourPath = new Path();
        mHourPath.moveTo(200,60);
        mHourPath.lineTo(190,190);
        mHourPath.lineTo(200,210);
        mHourPath.lineTo(210,190);

        mMinutePath = new Path();
        mMinutePath.moveTo(200,20);
        mMinutePath.lineTo(195,195);
        mMinutePath.lineTo(200,210);
        mMinutePath.lineTo(205,205);
        mHandler.sendEmptyMessage(0);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(Color.BLACK);
        mPaint.setAntiAlias(true);

        //保存
        canvas.save();
        //设置画笔颜色
        mPaint.setColor(Color.WHITE);
        //设置宽度, 如果不设置,默认是1像素,但是在缩放的时候,默认的1像素还是1像素
        mPaint.setStrokeWidth(4);
        //设置空心
        mPaint.setStyle(Paint.Style.STROKE);
        //画圆
        canvas.drawCircle(200, 200, 200, mPaint);
        //通过canvas的旋转来画上去,就是canvas转,而原来的线并没哟变化
        for (int i = 0; i < 12; i++) {
            if (i % 3 == 0) {
                //根据圆心转多少度
                /**
                 * 总共是360度, 所以  360/12 =30 度的转就好
                 */
                mPaint.setStrokeWidth(4);
//                canvas.rotate(30*i,200,200);
                canvas.drawLine(200, 0, 200, 20, mPaint);
            } else {
                mPaint.setStrokeWidth(2);
//                canvas.rotate(30*i,200,200);
                canvas.drawLine(200, 0, 200, 10, mPaint);
            }
            /**
             * 旋转了,就改了,不会回来了,所以不能用30* i
             */
            canvas.rotate(30, 200, 200);
        }
        canvas.restore();
        //画时针
        //drawable 是图片的一种, 继承drawable shape也可被绘制
        Calendar calendar = Calendar.getInstance();
        mPaint.setStyle(Paint.Style.FILL);

        canvas.save();
        /**
         *  每小时30 度, 每60分钟就占30刻度  所以每分钟 0.5刻度
         */
        canvas.rotate(calendar.get(Calendar.HOUR)*30+calendar.get(Calendar.MINUTE)*0.5f,200,200);
        canvas.drawPath(mHourPath,mPaint);
        /**
         *  每分钟 360 度
         */
        canvas.restore();
        mPaint.setColor(Color.YELLOW);
        canvas.save();

        canvas.rotate(calendar.get(Calendar.MINUTE)*6.0f+calendar.get(Calendar.SECOND)*0.1f,200,200);
        canvas.drawPath(mMinutePath,mPaint);
        canvas.restore();
        mPaint.setColor(Color.RED);
        canvas.save();
        mPaint.setStrokeWidth(4);
        canvas.rotate(calendar.get(Calendar.SECOND)*6,200,200);
        canvas.drawLine(200,20,200,210,mPaint);
        canvas.restore();

    }

    @Override
    public boolean handleMessage(Message msg) {
        switch (msg.what) {
            case 0:
                invalidate();
                mHandler.sendEmptyMessageDelayed(0, 500);
                break;
        }
        return true;
    }
}

效果

哈哈,今天就这样吧,今天学的感觉有收获,博客自己将近写了2个小时,写这些简单的demo, 回头想,今天就学了简单的绘制的api
然后通过drawPath画时钟的针,通过canvas的旋转来绘图,可能也不常用,我自己觉得好有收获,哈哈