自定义view

Posted 2020-08-06 建勋

　　这里是自定义view（二），上一篇关于自定义view的一些基本知识，比如说自定义view的步骤、会涉及到哪些函数以及如何实现自定义属性，同时实现了一个很基础的自定义控件，一个自定义的计时器，需要看的人可以点击这个链接：http://www.cnblogs.com/YaoJianXun/p/5806926.html。

　　这次讲的是如何通过坐标系的变化实现一些更复杂的自定义view绘制，上一次博客我们实现了一个类似于计时器的环形控件，这次我们在那个基础上再做一次改动，通过坐标系的变动实现下面的效果：

　　这里想讲一下关于android坐标系的一些东西：

1、android 坐标系

　　在android中有两种常用坐标系：

1.1 android坐标系

　　android坐标系就是以屏幕左上方为原点，向右为x轴正方向，向下为y轴正方的坐标系，可以使用getLocationOnScreen(intlocation[])这个函数获取Android坐标系中点的位置，可就是视图左上角在android坐标系中的位置。

1.2 视图坐标系

　　这个坐标系描述的是子视图在父视图中的位置，就是子视图左上角在父视图总的位置，坐标系的原点在父视图的左上角，向右为x轴正方向，向下为y轴正方向。

1.3 坐标系常用函数

• view的方法：

　　getTop():获取到的是view自身顶边到期父布局顶边的距离。

   getLeft():获取到的是view自身的左边到其父布局左边的距离。

   getBottom()，getRight()也同上，获取的分别是view自身下边右边到其父布局下边右边的距离。

• MotionEvent的方法：

　　getX():获取点击事件距离控件左边的距离，视图坐标。

   getY():获取点击事件距离控件上边的距离，视图坐标。

   getRawX()，getRawY(),同上，只是他们获取的android坐标系中的距离，绝对坐标。

1.4 通过坐标系移动实现view绘制

　　这里介绍两个函数：

• translate():平移android坐标系
• rotate():旋转android坐标系

　　分析上面图中的效果如何实现：

• 外围的圆形

　　这个就不做讲述了，很容易实现的效果。

• 表盘上的刻度

　　这个就要分析一下了，首先画出12点的刻度很容，由于它是一条竖直的直线，只需要指定起止点就可以直接绘制出来了。那么其他的刻度呢，起止点就没有那么容易计算得到了，那么怎么办呢，这个时候其实只要将android坐标系以原点为中心旋转一定的角度，在绘制和12点方向一样的线，就可以了，只不过刻度不同，可能线的长度不同，这个需要设置条件语句进行具体判断，但是绘制的方向很容易就得出来了。下面是代码：

 

　　　　　　for (int i = 0; i < 60; i++) {
            //通过旋转坐标系绘制刻度
            String degree = String.valueOf(i / 5);
            if (i % 15 == 0) {
                mPaint2.setStrokeWidth(5);
                mPaint2.setTextSize(30);
                canvas.drawLine(mCircleXY, 20, mCircleXY, 80, mPaint2);
                if (i == 0) {
                    canvas.drawText("12", mCircleXY - mPaint2.measureText(degree) / 2, 120, mPaint2);
                } else {
                    canvas.drawText(degree, mCircleXY - mPaint2.measureText(degree) / 2, 120, mPaint2);
                }
            } else if (i % 5 == 0) {
                mPaint2.setStrokeWidth(5);
                mPaint2.setTextSize(30);
                canvas.drawLine(mCircleXY, 20, mCircleXY,60, mPaint2);
                canvas.drawText(degree, mCircleXY - mPaint2.measureText(degree) / 2, 100, mPaint2);
            } else {
                mPaint2.setStrokeWidth(5);
                mPaint2.setTextSize(30);
                canvas.drawLine(mCircleXY, 20, mCircleXY, 40, mPaint2);
            }
            canvas.rotate(6, mCircleXY, mCircleXY);
        }

 

　　通过上面的代码也能看出，每次选择6度一共旋转60次，每次绘制线的时候判断一下，如果现在整点数，绘制的线长度长一点，如果是12点、3点、6点、9点绘制的线的长度要更长一点。

• 绘制时针分针

　　这个就更简单了，通过translate()函数移动android坐标系原点到表盘中间，在从中间画出两条长短不一的线就可以了。同时没过一秒，选择一定角度就可以了。下面是代码：

 

 　　　　//平移坐标系，绘制时针
        canvas.translate(mCircleXY, mCircleXY);
        canvas.drawLine(0, 0, 100, 100, mPaint3);

        //旋转坐标系，绘制分针
        canvas.rotate(6 * time, 0, 0);
        canvas.drawLine(0, 0, 100, 200, mPaint4);

        time++;
        postInvalidateDelayed(1000);

 

 

　　下面是完整的全部代码：

 

public class CustomView extends View {
    private float mCircleXY, mLength, mRadius;
    private Paint mPaint1 = new Paint();   //表圆弧
    private Paint mPaint2 = new Paint();   //表刻度
    private Paint mPaint3 = new Paint();   //表时针
    private Paint mPaint4 = new Paint();   //表秒针
    private WindowManager mWM;
    private int time = 0;
    private int hour = 0;

    public CustomView(Context context) {
        super(context);
        mPaint1.setStyle(Paint.Style.STROKE);
        mPaint1.setStrokeWidth(5);
        mPaint1.setAntiAlias(false);
        mPaint3.setStrokeWidth(20);
        mPaint4.setStrokeWidth(10);
        setValues();
    }

    public CustomView(Context context, AttributeSet attrs) {
        super(context, attrs);
        mPaint1.setStyle(Paint.Style.STROKE);
        mPaint1.setStrokeWidth(5);
        mPaint1.setAntiAlias(false);
        mPaint3.setStrokeWidth(20);
        mPaint4.setStrokeWidth(10);
        setValues();
    }

    private void setValues() {
        mWM = (WindowManager) getContext()
                .getSystemService(Context.WINDOW_SERVICE);
        mLength = mWM.getDefaultDisplay().getWidth();
        mCircleXY = mLength / 2;
        mRadius = (float) (mLength * 0.5);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制钟表外圈圆环
        canvas.drawCircle(mCircleXY, mCircleXY, mRadius-20, mPaint1);
        //消除锯齿
        canvas.setDrawFilter(new PaintFlagsDrawFilter(0, Paint.ANTI_ALIAS_FLAG
                | Paint.FILTER_BITMAP_FLAG));
        for (int i = 0; i < 60; i++) {
            //通过旋转坐标系绘制刻度
            String degree = String.valueOf(i / 5);
            if (i % 15 == 0) {
                mPaint2.setStrokeWidth(5);
                mPaint2.setTextSize(30);
                canvas.drawLine(mCircleXY, 20, mCircleXY, 80, mPaint2);
                if (i == 0) {
                    canvas.drawText("12", mCircleXY - mPaint2.measureText(degree) / 2, 120, mPaint2);
                } else {
                    canvas.drawText(degree, mCircleXY - mPaint2.measureText(degree) / 2, 120, mPaint2);
                }
            } else if (i % 5 == 0) {
                mPaint2.setStrokeWidth(5);
                mPaint2.setTextSize(30);
                canvas.drawLine(mCircleXY, 20, mCircleXY,60, mPaint2);
                canvas.drawText(degree, mCircleXY - mPaint2.measureText(degree) / 2, 100, mPaint2);
            } else {
                mPaint2.setStrokeWidth(5);
                mPaint2.setTextSize(30);
                canvas.drawLine(mCircleXY, 20, mCircleXY, 40, mPaint2);
            }
            canvas.rotate(6, mCircleXY, mCircleXY);
        }

        //平移坐标系，绘制时针
        canvas.translate(mCircleXY, mCircleXY);
        canvas.drawLine(0, 0, 100, 100, mPaint3);

        //旋转坐标系，绘制分针
        canvas.rotate(6 * time, 0, 0);
        canvas.drawLine(0, 0, 100, 200, mPaint4);

        time++;
        postInvalidateDelayed(1000);
    }

}

 

　　这样就可以绘制出图中所示的表盘，源码的链接：https://github.com/jiushi555/CustomView/tree/master/CustomTimepiece。

　　转载请标明出处。

 

---

不是闷骚的程序员算不上程序员。我的微信公众号“那点鼻事”，在这里周一到周五每天一篇文章，与技术无关，只哈牛逼。