自定义View

自定义View分类

• 继承View：这种自定义控件最大的特点是不包含子控件，当我们需要定制一个不同于原生控件且有“个性”的控件（如圆形头像、水波进度条）时，我们采用这种方式，很多情况下可以采用其他方式代替，比如圆形头像完全可以使用imageView+圆形背景图，但后者往往内存消耗过大，制作素材麻烦。

• 继承ViewGroup：这种自定义控件，常常利用现有组件（各种layout）的特定布局方式来组成新的控件。如流式标签。

• 自绘控件：顾名思义，这一类自定义控件注重控件本身的特性，如形状、动画效果等，一般继承View（但也不绝对，看具体需求），重写onDraw（）方法完成绘制，具体绘制的过程请参照 (三)自定义View常用的方法（测量、绘制、位置）

• 组合控件：组合控件的特点是使用原生控件组合成新的控件。

• 继承控件：继承控件的特点是利用了父控件本身的一些特性，在此基础上添加新的功能。充分利用已有资源，避免了重复的开发。

自定义View之时钟

实现时钟效果有以下几个重要代码：

//将之前所绘制的图形保存起来，然后后续的操作就好像在一个新的图层上操作一样，与ps的图层基本一致
canvas.save();

//将x y轴坐标绕着(x,y)坐标点顺时针旋转angle°。angle为负数则逆时针旋转
canvas.rotate(angle, x, y);

//可以理解为PhotoShop中的合并图层操作，将save之前的图像与save之后的合并
canvas.restore();

主要思路

1.创建一个类继承View，并添加构造方法
2.定义画笔，并设置相应参数，确定圆的半径
3.计算各个关键点的坐标

详细代码：

public class clockView extends View {
    //外圆画笔
    private Paint paint;
    //文字画笔
    private Paint paintNum;
    //时钟画笔 
    private Paint paintHour;
    //分钟画笔
    private Paint paintMinute;
    //秒钟画笔
    private Paint paintSecond;
    //外圆圆心
    private float x, y;
    //外圆半径
    private int r;

    public clockView(Context context) {
        super(context);
        initPaint();
    }

    public clockView(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaint();
    }

    public clockView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaint();
    }


    private void initPaint() {
        paint = new Paint();
        paint.setColor(Color.BLACK);
        paint.setAntiAlias(true);
        paint.setStrokeWidth(3);
        paint.setStyle(Paint.Style.STROKE);

        paintNum = new Paint();
        paintNum.setColor(Color.BLACK);
        paintNum.setAntiAlias(true);
        paintNum.setTextSize(35);
        paintNum.setStyle(Paint.Style.STROKE);
        paintNum.setTextAlign(Paint.Align.CENTER);

        paintSecond = new Paint();
        paintSecond.setColor(Color.RED);
        paintSecond.setAntiAlias(true);
        paintSecond.setStrokeWidth(5);
        paintSecond.setStyle(Paint.Style.FILL);

        paintMinute = new Paint();
        paintMinute.setColor(Color.BLACK);
        paintMinute.setAntiAlias(true);
        paintMinute.setStrokeWidth(8);
        paintMinute.setStyle(Paint.Style.FILL);

        paintHour = new Paint();
        paintHour.setColor(Color.BLACK);
        paintHour.setAntiAlias(true);
        paintHour.setStrokeWidth(13);
        paintHour.setStyle(Paint.Style.FILL);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int height = getMeasuredHeight();
        int width = getMeasuredWidth();
        x = width / 2;
        y = height / 2;
        r = (int) x - 5;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制外圆
        canvas.drawCircle(x, y, r, paint);

        //绘制圆心
        canvas.drawCircle(x, y, 15, paintMinute);

        //绘制刻度
        drawLines(canvas);

        //绘制整点
        drawText(canvas);


        try {
            initCurrentTime(canvas);
        } catch (Exception e) {
            e.printStackTrace();
        }
        //每隔1s刷新界面
        postInvalidateDelayed(1000);
    }


    /**
     * 绘制时钟刻度和分钟刻度
     *
     * @param canvas 画布
     */
    private void drawLines(Canvas canvas) {
        for (int i = 0; i < 60; i++) {
            if (i % 5 == 0) {
                //绘制整点刻度
                paint.setStrokeWidth(8);
                canvas.drawLine(x, y - r, x, y - r + 40, paint);
            } else {
                //绘制分钟刻度
                paint.setStrokeWidth(3);
                canvas.drawLine(x, y - r, x, y - r + 30, paint);
            }
            //绕着(x,y)旋转6°
            canvas.rotate(6, x, y);
        }
    }

    /**
     * 绘制整点数字
     *
     * @param canvas 画布
     */
    private void drawText(Canvas canvas) {
        // 获取文字高度用于设置文本垂直居中
        float textSize = (paintNum.getFontMetrics().bottom - paintNum.getFontMetrics().top);
        // 数字离圆心的距离,40为刻度的长度,20文字大小
        int distance = r - 40 - 20;
        // 数字的坐标(a,b)
        float a, b;
        // 每30°写一个数字
        for (int i = 0; i < 12; i++) {
            a = (float) (distance * Math.sin(i * 30 * Math.PI / 180) + x);
            b = (float) (y - distance * Math.cos(i * 30 * Math.PI / 180));
            if (i == 0) {
                canvas.drawText("12", a, b + textSize / 3, paintNum);
            } else {
                canvas.drawText(String.valueOf(i), a, b + textSize / 3, paintNum);
            }
        }
    }

    /**
     * 获取当前系统时间
     *
     * @param canvas 画布
     */
    private void initCurrentTime(Canvas canvas) {
        //获取系统当前时间
        SimpleDateFormat format = new SimpleDateFormat("HH-mm-ss");
        String time = format.format(new Date(System.currentTimeMillis()));
        String[] split = time.split("-");
        int hour = Integer.parseInt(split[0]);
        int minute = Integer.parseInt(split[1]);
        int second = Integer.parseInt(split[2]);
        //时针走过的角度
        int hourAngle = hour * 30 + minute / 2;
        //分针走过的角度
        int minuteAngle = minute * 6 + second / 10;
        //秒针走过的角度
        int secondAngle = second * 6;
        //绘制时钟,以12整点为0°参照点
        canvas.rotate(hourAngle, x, y);
        canvas.drawLine(x, y, x, y - r + 150, paintHour);
        canvas.save();
        canvas.restore();
        //这里画好了时钟，我们需要再将画布转回来,继续以12整点为0°参照点
        canvas.rotate(-hourAngle, x, y);
        //绘制分钟
        canvas.rotate(minuteAngle, x, y);
        canvas.drawLine(x, y, x, y - r + 60, paintMinute);
        canvas.save();
        canvas.restore();
        //这里同上
        canvas.rotate(-minuteAngle, x, y);
        //绘制秒钟
        canvas.rotate(secondAngle, x, y);
        canvas.drawLine(x, y, x, y - r + 20, paintSecond);
    }

}

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".clock.Main4Activity">
    <com.example.administrator.myapplication.clock.clockView
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

</LinearLayout>