自定义view画钟表

思路:
1.定义一个类继承于view,并重写里面的3个方法并作出修改(如下面紫色部分做修改);加粗部分为重写的3个方法;
2.在onDraw方法里画出内容;

注意:

//画字符时,它会从右下角开始画起:
代码:
public class ClockView extends View {

    private int radius;
    //中心点x,y
    private float cx;
    private float cy;

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

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

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

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

        radius = Math.min(getWidth(), getHeight()) / 2-10;  //半径之所以减去10,是为了好看一些,不然就会和边框相切
        cx=getWidth()/2;
        cy=getHeight()/2;

      Paint  paint=new Paint();
        paint.setColor(Color.RED);
        paint.setStyle(Paint.Style.STROKE);
        paint.setStrokeWidth(6);
        paint.setAntiAlias(true);
        canvas.drawCircle(cx,cy,radius,paint);
        //拿到当前时间
        int hour = Calendar.getInstance().get(Calendar.HOUR);  //注意,Calendar的包不要导错了
        int minute = Calendar.getInstance().get(Calendar.MINUTE);
        int second = Calendar.getInstance().get(Calendar.SECOND);
        float fHour=hour+minute/60f;   //得到精确的小时,因为小时不能30度才走一个,要慢慢的走

        //绘制数字
        Paint paint2=new Paint();
        paint2.setColor(Color.BLACK);
        paint2.setTextSize(50);
        for (int i = 1; i <13 ; i++) {
            float tx=paint2.measureText(i+"")/2;   //测量要画的字符的宽度
            canvas.drawText(i+"",(float) (cx+radius*0.9*Math.sin(Math.toRadians(i*30)))-tx,(float)(cy-radius*0.9*Math.cos(Math.toRadians(i*30)))+tx,paint2);

        }
        //每秒刷新一次
        postInvalidateDelayed(1000);
        //绘制时针
        Paint paint1=new Paint();
        paint1.setColor(Color.BLUE);
        paint1.setStrokeWidth(15);
        paint1.setStrokeCap(Paint.Cap.ROUND);
        paint1.setAntiAlias(true);
        canvas.drawLine(cx,cy,(float) (cx+radius*0.5*Math.sin(Math.toRadians(fHour*30))),(float)(cy-radius*0.5*Math.cos(Math.toRadians(fHour*30))),paint1);
        //绘制分针

        paint2.setStrokeWidth(10);
        paint2.setStrokeCap(Paint.Cap.ROUND);
        paint2.setAntiAlias(true);
        canvas.drawLine(cx,cy,(float) (cx+radius*0.7*Math.sin(Math.toRadians(minute*6))),(float)(cy-radius*0.7*Math.cos(Math.toRadians(minute*6))),paint2);
        //绘制秒针
        Paint paint3=new Paint();
        paint3.setColor(Color.YELLOW);
        paint3.setStrokeWidth(7);
        paint3.setStrokeCap(Paint.Cap.ROUND);
        paint3.setAntiAlias(true);
        canvas.drawLine(cx,cy,(float) (cx+radius*0.9*Math.sin(Math.toRadians(second*6))),(float)(cy-radius*0.9*Math.cos(Math.toRadians(second*6))),paint3);

        //绘制圆心
        paint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(cx, cy, radius / 13, paint);


    }
}

布局:
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:background="@mipmap/bg"
    android:layout_height="match_parent"
    tools:context="com.example.drawclock.MainActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="20dp"
        android:textColor="#0ff"
        android:textSize="40sp"
        android:layout_height="wrap_content"
        android:text="时钟" />

    <com.example.drawclock.ClockView
        android:id="@+id/aa"
        android:layout_centerInParent="true"
        android:layout_width="300dp"
        android:layout_height="300dp" />


</RelativeLayout>

运行结果:



猜你喜欢

转载自blog.csdn.net/yang__k/article/details/80224253