【Android 自定义 View】--＞ 垂直流程指示器

前言

本篇文章主要介绍使用自定义 View 来实现时钟效果，灵活地使用 Android 的 Canvas，Paint, Path 的 API 以及理清 Canvas 的 save 和 restore 的意义。

代码实现 1. 新建一个类继承 View

public class ClockView extends View {
    //原点
    private Point mCoo = new Point(500, 800);
    private Path mMainPath;
    private Paint mMainPaint;
    
    public ClockView(Context context) {
        this(context,null);
    }

    public ClockView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);

        init();
    }

    private void init() {
        //初始化画笔
        mMainPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        mMainPaint.setStyle(Paint.Style.STROKE);
        mMainPaint.setStrokeCap(Paint.Cap.ROUND);

        mMainPath = new Path();
        
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //绘制
        canvas.save();//新建图层1
        canvas.translate(mCoo.x, mCoo.y);

        drawBreakCircle(canvas);
        drawDot(canvas);
        drawText(canvas);

        Calendar calendar = Calendar.getInstance();
        int hour = calendar.get(Calendar.HOUR_OF_DAY);
        int min = calendar.get(Calendar.MINUTE);
        int sec = calendar.get(Calendar.SECOND);

        drawH(canvas, hour / 12.f * 360 - 90 + min / 60.f * 30 + sec / 3600.f * 30);
        drawM(canvas, min / 60.f * 360 - 90 + sec / 60.f);
        drawS(canvas, sec / 60.f * 360 - 90);
        canvas.restore();
    }
 }

2. 绘制逻辑

2.1 绘制破碎的圆

	/**
     * 绘制破碎的圆
     *
     * @param canvas
     */
    private void drawBreakCircle(Canvas canvas) {
        mMainPaint.setStrokeWidth(8);
        mMainPaint.setColor(Color.parseColor("#D5D5D5"));

        for (int i = 0; i 

    

2. 更新时间

public class ParcticeOneActivity extends AppCompatActivity {

    /**
     * 新建Handler
     */
    Handler mHandler = new Handler() {
        @Override
        public void handleMessage(Message msg) {
            mView.invalidate();//处理：刷新视图
        }
    };

    private View mView;
    private final Timer timer = new Timer();

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_parctice_one);

        mView = findViewById(R.id.clockView);

        TimerTask timerTask = new TimerTask() {
            @Override
            public void run() {
                mHandler.sendEmptyMessage(0);//发送消息
            }
        };
        //定时任务
        timer.schedule(timerTask, 0, 1000);
    }

    public void clicked(View view) {
        new HighLightView(this).showTipForView(view, "", new View.OnClickListener() {
            @Override
            public void onClick(View v) {

            }
        });
    }
}