使用Android来画一个钟表
16lz
2021-01-26
今天我们来画一个Android钟表,只不过没有美化,看起来有点粗糙.....
功能实现就好啦
效果图:
15349277624781534927752516.gif//-------------------------------------具体思路
我们首先使用canvas.drawOval来画一个圆
计算圆的中心,记住圆的中心等于 x:宽/2 y:高/2
如果有移位的加上移位就能计算出圆的中心点
核心的系统方法:canvas.drawOval,canvas.drawLine,canvas.rotate,
canvas.rotate使用方式
canvas.rotate(角度,以哪个X坐标旋转,以哪个Y坐标旋转)
全部代码:
/** * 一个自定义钟表 */public class XHView extends View { //新的圆宽 private int sizeW; private int sizeH; private String[] timeString = {"12", "1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11"}; private Context mContext; private RectF rectF; private Paint mPaint; private Paint mTextPaint; //缩放距离 private int sc = 20; //线的长度 private int lineW = 40; //秒表最长 private int lineS = 360; private Paint mPaintS; //分钟 private int lineM = 260; private Paint mPaintM; //时钟 private int lineH = 220; private Paint mPaintH; private int drawH; private int drawM; private int drawS; public XHView(Context context) { super(context); initData(context); } public XHView(Context context, @Nullable AttributeSet attrs) { super(context, attrs); initData(context); } public XHView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) { super(context, attrs, defStyleAttr); initData(context); } private void initData(Context mContext) { this.mContext = mContext; mPaint = new Paint(); mPaint.setStyle(Paint.Style.STROKE); mPaint.setColor(Color.parseColor("#ad0015")); mPaint.setAntiAlias(true); mPaint.setStrokeWidth(5); //初始化 mTextPaint = new Paint(); mTextPaint.setTextSize(40); mTextPaint.setAntiAlias(true); mPaintS = new Paint(); mPaintS.setStrokeWidth(20); mPaintM = new Paint(); mPaintM.setColor(Color.parseColor("#c40302")); mPaintM.setStrokeWidth(5); mPaintM.setAntiAlias(true); mPaintH = new Paint(); mPaintH.setColor(Color.parseColor("#a59632")); mPaintH.setStrokeWidth(5); mPaintH.setAntiAlias(true); mPaintS.setAntiAlias(true); } @Override protected void onDraw(Canvas canvas) { super.onDraw(canvas); startDarwOR(canvas); startDrawSMH(canvas); } @Override protected void onSizeChanged(int w, int h, int oldw, int oldh) { super.onSizeChanged(w, h, oldw, oldh); sizeW = w; sizeH = h; initW2H(); invalidate(); startTime(); } //初始化宽高 private void initW2H() { rectF = new RectF(); rectF.left = sc; rectF.right = sizeW - sc; rectF.top = sc; rectF.bottom = sizeW - sc; } //开始画圆/表的刻度 private void startDarwOR(Canvas canvas) { canvas.drawOval(rectF, mPaint); //开始画刻度表 for (int i = 0; i < 60; i++) { if (i % 5 == 0) { //为时间段 lineW = 40; } else { //为分钟段 lineW = 20; } if (lineW == 40) { //画字 canvas.drawText(timeString[i / 5], ((rectF.bottom / 2) + (sc / 2)), sc + lineW + 40/*加上字体大小*/, mTextPaint); } canvas.drawLine((rectF.right / 2) + (sc / 2), sc, (rectF.right / 2) + (sc / 2), sc + lineW, mPaint); canvas.rotate(360 / 60, (rectF.right / 2) + (sc / 2), (rectF.bottom / 2) + (sc / 2)); canvas.drawOval((rectF.right / 2) + (sc / 2) - 10, (rectF.bottom / 2) + (sc / 2) - 10, (rectF.right / 2) + (sc / 2) + 10, (rectF.bottom / 2) + (sc / 2) + 10, mPaintS); } } //开始画秒钟/分钟/时钟 private void startDrawSMH(Canvas canvas) { canvas.save(); canvas.rotate(drawH, (rectF.right / 2) + (sc / 2), (rectF.bottom / 2) + (sc / 2)); canvas.drawLine((rectF.right / 2) + (sc / 2), (rectF.bottom / 2) + (sc / 2) + 50, (rectF.right / 2) + (sc / 2), (rectF.bottom / 2) + (sc / 2) - lineH, mPaintH); canvas.restore(); canvas.save(); canvas.rotate(drawM, (rectF.right / 2) + (sc / 2), (rectF.bottom / 2) + (sc / 2)); canvas.drawLine((rectF.right / 2) + (sc / 2), (rectF.bottom / 2) + (sc / 2) + 50, (rectF.right / 2) + (sc / 2), (rectF.bottom / 2) + (sc / 2) - lineM, mPaintM); canvas.restore(); canvas.save(); canvas.rotate(drawS, (rectF.right / 2) + (sc / 2), (rectF.bottom / 2) + (sc / 2)); canvas.drawLine((rectF.right / 2) + (sc / 2), (rectF.bottom / 2) + (sc / 2) + 50, (rectF.right / 2) + (sc / 2), (rectF.bottom / 2) + (sc / 2) - lineS, mPaint); canvas.restore(); canvas.drawText(time, ((rectF.right / 2) + (sc / 2)), (rectF.bottom / 4) + (sc / 2), mTextPaint); } //开始处理时间逻辑 //开始处理角度 //秒旋转角度 private int angle = 6; //分旋转角度 private int angleM = 6; //时旋转角度 private int angleH = 6; private String time = "00:00:00"; private void startTime() { //该逻辑处理放到子线程中 final SimpleDateFormat simpleDateFormat = new SimpleDateFormat("HH:mm:ss"); new Thread(new Runnable() { @Override public void run() { //死循环,如果有需要的同学请更改此逻辑 while (true) { //获取时间 Date date = new Date(); String format = simpleDateFormat.format(date); final String[] split = format.split(":"); time = format; if (angle > 360) { angle = 6; } if (angleM > 360) { angleM = 6; } if (angleH > 360) { angleH = 6; } try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } MainActivity.handler.post(new Runnable() { @Override public void run() { invalidate(); int h = Integer.parseInt(split[0]); int m = Integer.parseInt(split[1]); int s = Integer.parseInt(split[2]); drawH = angle * h; drawM = angleM * m; drawS = angleH * s; } }); } } }).start(); }}github:https://github.com/hanxinhao000/Clocks
15349277624781534927752516.gif更多相关文章
- android中path的arcTo方法的使用
- Android(安卓)调用 startActivityForResult(intent,requestCode)
- gallary滑动切换图片
- Android(安卓)使用PLDroidPlayer播放网络视频 根据视频角度自动
- android隐藏View动画的注意事项
- Android等待动画
- 自定义Drawable实现灵动的红鲤鱼动画（上篇）
- Android(安卓)Volley完全解析(四)，带你从源码的角度理解Volley
- [Android] Android开发优化之——从代码角度进行优化