自定义View之绘制钟表

自定义View–绘制钟表

Android中为我们提供了很多的功能强大的视图控件，但是有些时候我们需要特定效果的控件。这时我们就需要自定义View来实现需要的效果。关于自定义视图的内容很多，我也在慢慢研究，这里绘制了一个简单的钟表视图和大家一起分享学习。

关于自定义视图

一般来说自定义视图的方法主要有三种。每种方法都有他们特定的用处，自定义视图时我们需要根据视图的功能来考虑选择那种方法。

自定义View	用途
继承View重写onDraw()方法	一般用来绘制一些不规则的自定义的效果控件
继承ViewGrop	一般用来绘制自定义的布局，可以将多个控件封装在一起使用
继承Android提供的视图（如TextView）	一般用来扩展原有视图的一些自定义的功能

绘制钟表控件

根据上面的分析可知绘制钟表这种不规则的视图控件需要采用继承View 重写onDraw()的方法来实现，在onDraw()方法中通过画笔绘制自定义的视图

视图属性的定义和使用

在使用Android提供的一些控件时，会经常用到一些控件的特定属性例如TextView的text属性，ImageView的scaletype属性等。这些属性可以设置控件的显示效果。自定义View的同时需要自定义一些属性来更好的设置view的显示效果。

属性的定义

在res-values-styles文件中自定义view需要的属性，为每种属性定义合适的名称和类型。

 <declare-styleable name="clock_view">
        <attr name="clock_border_color" format="color" />
        <attr name="clock_border_width" format="dimension" />
        <attr name="clock_border_padding" format="dimension" />
        <attr name="clock_drawRect" format="boolean" />
        <attr name="clock_back_color" format="color"/>
    </declare-styleable>

view属性的类型主要有下面几种

类型	资源类型	样例
reference	参考某一资源的ID	app:background = “@drawable/icon”
color	颜色类型	app:textColor = “#00FF00”
boolean	布尔类型true/false	app:focusable = “true”
demension	尺寸类型	app:layout_height = “42dp”
float	浮点类型	app:fromAlpha = “1.0”
integer	整型	app:framesCount = “12”
String	字符串类型	app:text=”hello world”
fraction	百分数类型	app:pivotY = “300%”
enum	枚举类型	app:orientation = “vertical”
flag	位或运算	app:windowSoftInputMode = “stateUnspecified | stateUnchanged　|　stateHidden”

注意：属性的使用可以指定多种类型

 <attr name="clock_border_color" format="color|integer" />

属性的使用

使用自定义的属性需要添加自定义命名空间，名称可以自己取

 xmlns:app="http://schemas.android.com/apk/res-auto"

  <com.example.administrator.clockdemo.ClockView
        android:id="@+id/clock_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        app:clock_border_color="#b510c7"
        app:clock_border_padding="10dp"
        app:clock_back_color="#000000"
        app:clock_border_width="3dp" />

重写onDraw()方法

View的工作流程主要包括measure、layout、draw三部分：
1. measure 测量视图的大小
2. layout 确定视图在父布局中的位置
3. draw 执行onDraw()方法，绘制视图内容

通过继承View实现自定义视图的方法，主要分析流程的第三部。

获取和使用自定义的视图属性

前面我们定义并在布局文件中使用了自定义的属性，下面介绍怎么在代码中使用使这些属性。

 //获取自定义视图的属性
        TypedArray array = context.obtainStyledAttributes(attars, R.styleable.clock_view);
        //获取自定义的属性值，并为其设置默认值
        mBorderColor = array.getColor
                (R.styleable.clock_view_clock_border_color, Color.parseColor("#ffffff"));
        senWidth = (int) array.getDimension(R.styleable.clock_view_clock_border_width, 6);
        minWidth = (int) (senWidth * 1.5);
        hourWidth = (int) (minWidth * 1.5);
        padding = (int) array.getDimension(R.styleable.clock_view_clock_border_padding, 10);
        isDrawRecr = array.getBoolean(R.styleable.clock_view_clock_drawRect, false);
        clockBackColor = array.getColor(R.styleable.clock_view_clock_back_color, Color.parseColor("#281f1f"));
        array.recycle();//回收TypedArray ，以便后面的资源使用

适配横竖屏切换操作，在切屏时重新绘制

每个视图其实都是一个矩形Rect，我们可以确定一个矩形范围，在其内部绘制我们的视图

 /**
     * 屏幕旋转是重新计算钟表尺寸
     *
     * @param w
     * @param h
     * @param oldw
     * @param oldh
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        mBounds = new RectF(0, 0, w, h);
        width = w;
        height = h;
        if (width < height) {
            radius = width / 2 - padding;
        } else {
            radius = height / 2 - padding;
        }
        smallLength = 10;
        largeLength = 20;
    }

绘制表盘

表盘其实就是一个大的圆形，我们可以根据系统提供的方法直接绘制，圆心就是前面定义的矩形rect的中心

  canvas.drawCircle(mBounds.centerX(), mBounds.centerY(), radius, mPaint);//绘制表盘

绘制刻度

绘制表盘上的刻度线，这部关键是通过三角函数计算刻度线的起始位置坐标

  //绘制表盘刻度
        for (int i = 0; i < 60; ++i) {
            start_x = radius * (float) Math.cos(Math.PI / 180 * i * 6);
            start_y = radius * (float) Math.sin(Math.PI / 180 * i * 6);
            if (i % 5 == 0) {
                end_x = start_x - largeLength * (float) Math.cos(Math.PI / 180 * i * 6);
                end_y = start_y - largeLength * (float) Math.sin(Math.PI / 180 * i * 6);
                drawTextView(canvas, i);
            } else {
                end_x = start_x - smallLength * (float) Math.cos(Math.PI / 180 * i * 6);
                end_y = start_y - smallLength * (float) Math.sin(Math.PI / 180 * i * 6);
            }
            start_x += mBounds.centerX();
            end_x += mBounds.centerX();
            start_y += mBounds.centerY();
            end_y += mBounds.centerY();
            mPaint.setStrokeWidth(senWidth);
            canvas.drawLine(start_x, start_y, end_x, end_y, mPaint);

        }
        mPaint.setStrokeWidth(senWidth);
        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(mBounds.centerX(), mBounds.centerY(), 10, mPaint);//绘制表盘中心点

绘制刻度文本

和刻度一样，利用三角函数计算文本的起点坐标

 /**
     * 绘制表盘刻度文本
     *
     * @param canvas
     */
    private void drawTextView(Canvas canvas, int i) {
        String textTime;
        float textTranslate = textSize / 2;
        float text_x;
        float text_y;
        //钟表左右边刻度
        if (Math.sin(Math.PI / 180 * i * 6) > 0) {

            text_x = (float) (mBounds.centerX() + (radius * 0.9 - textTranslate) * (float) Math.sin(Math.PI / 180 * i * 6));
        } else if (Math.sin(Math.PI / 180 * i * 6) < 0) {
            text_x = (float) (mBounds.centerX() + (radius * 0.9 + textTranslate) * (float) Math.sin(Math.PI / 180 * i * 6));

        } else {
            text_x = (float) (mBounds.centerX() - textTranslate);

        }

        //钟表上下刻度
        if (Math.cos(Math.PI / 180 * 6 * i) > 0) {
            text_y = (float) (mBounds.centerY() + -(radius * 0.9 - textTranslate) * (float) Math.cos(Math.PI / 180 * i * 6));

        } else if (Math.cos(Math.PI / 180 * 6 * i) < 0) {
            text_y = (float) (mBounds.centerY() + -(radius * 0.9 + textTranslate) * (float) Math.cos(Math.PI / 180 * i * 6));

        } else {
            text_y = (float) (mBounds.centerY() - textTranslate);

        }
        mPaint.setTextSize(textSize);
        mPaint.setStrokeWidth(2);
        textTime = i == 0 ? "12" : i / 5 + "";
        canvas.drawText(textTime, text_x, text_y, mPaint);
    }

绘制钟表走针

绘制时分秒指针的原理其实是相同的，这里以秒针为例，将当前表盘分成60份，获取当前时间的秒数，绘制当前时间时指针的位置（当为时针是则将表盘分为类12份）

 /**
     * 绘制秒针
     *
     * @param canvas
     */
    private int second = 0;

    private void drawSecLine(Canvas canvas) {
        second = getCurrentSec();
        int angle = second * 6;
        float endX = (float) (mBounds.centerX() + (radius / 1.2) * (float) Math.sin(Math.PI / 180 * angle));
        float endY = (float) (mBounds.centerY() + -(radius / 1.2) * (float) Math.cos(Math.PI / 180 * angle));
        float startX= (mBounds.centerX() - 50 * (float) Math.sin(Math.PI / 180 * angle));
        float startY=  (mBounds.centerY() + 50 * (float) Math.cos(Math.PI / 180 * angle));
        mPaint.setStrokeWidth(senWidth);
        canvas.drawLine(startX,startY, endX, endY, mPaint);
    }

获取当前系统的时间

 /**
     * 获取当前的时间s
     *
     * @return
     */
    private Time time;

    private int getCurrentSec() {
        return time.second;
    }

刷新界面

每隔1s重新绘制界面更新指针的位置

  postInvalidateDelayed(1000);//每隔1s重新绘制，刷新界面

效果图

Git源码下载