自定义一个时钟的显示效果

直接看图上代码

定义一个View

import android.content.Context;
import android.content.res.TypedArray;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

import com.zhong.circleimageview.R;

/**
 * Created by zhongrc on 2016/9/19. 19:47
 * Email：zhongrc@skyth-tek.com
 */

public class CircleImageView extends View {
    private float mBorderWidth;//线条的宽度
    private int mBorderColor;//线条的颜色

    private RectF mBounds;//矩形区域

    private Paint mPaint;// 画笔
    private float width;
    private float height;
    float radius;//半径
    float smallLength;
    float largeLength;


    private int timeHours=100;
    private int timeMin=200;
    private int timeSecond=250;



    public CircleImageView(Context context) {
        super(context);
        init(context, null, 0);
    }

    public CircleImageView(Context context, AttributeSet attrs) {
        super(context, attrs);

        //获取布局定义的属性
        TypedArray typedArray =
                context.getTheme().obtainStyledAttributes(
                        attrs,
                        R.styleable.circleView,
                        0, 0);

        try {
            //获取线头的颜色
            mBorderColor = typedArray.getColor(R.styleable.circleView_border_color, 0xff000000);
            //获取线条的宽度
            mBorderWidth = typedArray.getDimension(R.styleable.circleView_border_width, 2);

        } finally {
            //回收
            typedArray.recycle();
        }

        init(context, attrs, 0);
    }

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



    /**
     * 初始化
     *
     * @param context
     * @param attrs
     * @param defStyleAttr
     */
    private void init(Context context, AttributeSet attrs, int defStyleAttr) {
        //初始化画笔
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mBorderWidth);
        mPaint.setColor(mBorderColor);

    }


    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);

        //根据当前的布局大小确定矩形区域
        mBounds = new RectF(getLeft(), getTop(), getRight(), getBottom());

        width = mBounds.right - mBounds.left; //矩形的宽
        height = mBounds.bottom - mBounds.top;//矩形的高


        if (width < height) {
            radius = width / 4;
        } else {
            radius = height / 4;
        }
        smallLength = 10;
        largeLength = 20;
    }

    public void setTime(int h,int m,int s){
        this.timeHours=h;
        this.timeMin=m;
        this.timeSecond=s;
        invalidate();

    }


    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        canvas.drawColor(0xffffffff);
        mPaint.setColor(0x66555555);
        canvas.drawRoundRect( //绘制圆角矩形
                new RectF(mBounds.centerX() - (float) 0.9 * width / 2,
                        mBounds.centerY() - (float) 0.9 * height / 2,
                        mBounds.centerX() + (float) 0.9 * width / 2,
                        mBounds.centerY() + (float) 0.9 * height / 2),
                30,
                30,
                mPaint);
        mPaint.setColor(mBorderColor);

        canvas.drawCircle(mBounds.centerX(), mBounds.centerY(), radius, mPaint);//画圆

        float start_x, start_y;
        float end_x, end_y;
        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) {
                mPaint.setColor(0xFFff0000);
                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);
            } else {
                mPaint.setColor(mBorderColor);
                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();

            canvas.drawLine(start_x, start_y, end_x, end_y, mPaint);
        }
        canvas.drawCircle(mBounds.centerX(), mBounds.centerY(), 10, mPaint);





        //画时钟
        mPaint.setColor(0xFF00F055);
        mPaint.setStrokeWidth(6);
        canvas.rotate(timeHours, mBounds.centerX(), mBounds.centerY());
        canvas.drawLine(mBounds.centerX(), mBounds.centerY(), mBounds.centerX(), mBounds.centerY() - radius *2/ 3, mPaint);

        //画分钟
        mPaint.setColor(0xFF00F055);
        mPaint.setStrokeWidth(4);
        canvas.rotate(timeMin-timeHours, mBounds.centerX(), mBounds.centerY());
        canvas.drawLine(mBounds.centerX(), mBounds.centerY(), mBounds.centerX(), mBounds.centerY() - radius * 4 / 5, mPaint);

        //画秒钟

        mPaint.setColor(0xFF00F055);
        mPaint.setStrokeWidth(2);
        canvas.rotate(timeSecond-timeHours-timeMin, mBounds.centerX(), mBounds.centerY());
        canvas.drawLine(mBounds.centerX(), mBounds.centerY(), mBounds.centerX(), mBounds.centerY() - radius, mPaint);

        mPaint.setStyle(Paint.Style.FILL);
        canvas.drawCircle(mBounds.centerX(), mBounds.centerY(), 8, mPaint);

        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mPaint.setStyle(Paint.Style.STROKE);
        mPaint.setStrokeWidth(mBorderWidth);
        mPaint.setColor(mBorderColor);

    }



}

定义属性

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <declare-styleable name="circleView" >
        <attr name="border_color" format="color"/>
        <attr name="border_width" format="dimension"/>
    </declare-styleable>
</resources>

xml布局

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"

    android:id="@+id/activity_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="com.zhong.circleimageview.MainActivity">

    <com.zhong.view.CircleImageView
        android:id="@+id/civ"
        android:layout_width="match_parent"
        android:layout_height="300dp"
        app:border_color="#25175e"
        app:border_width="2dp"

        >

    </com.zhong.view.CircleImageView>

   


</android.support.constraint.ConstraintLayout>

MainActivity.java

import android.app.Activity;

import android.os.Bundle;
import android.os.Handler;
import android.os.Message;
import android.os.SystemClock;
import android.widget.Toast;

import com.zhong.view.CircleImageView;

import java.sql.Time;
import java.util.Calendar;


public class MainActivity extends Activity {


    private boolean isRuning=true;
    private CircleImageView circleImageView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        circleImageView = (CircleImageView) findViewById(R.id.civ);




    }

    Handler handler=new Handler(){
        @Override
        public void handleMessage(Message msg) {
            super.handleMessage(msg);
            if (msg.what==0){
                Calendar c=Calendar.getInstance();
                int h = c.get(Calendar.HOUR);
                int m = c.get(Calendar.MINUTE);
                int s = c.get(Calendar.SECOND);
                h=h%12;
                circleImageView.setTime(360*h/12,360*m/60,360*s/60);


            }
        }
    };


    @Override
    protected void onResume() {
        super.onResume();
        new Thread(new Runnable() {
            @Override
            public void run() {
                while (isRuning){
                    handler.sendEmptyMessage(0);
                    SystemClock.sleep(1000);
                }

            }
        }).start();
    }

    @Override
    protected void onPause() {
        super.onPause();

        isRuning=false;
    }

    @Override
    protected void onRestart() {
        super.onRestart();
        isRuning=true;
    }
}