Android仿小米时钟效果

发布时间 - 2026-01-11 00:08:20    点击率:

我在一个[博客] android*小米时钟(使用Camera和Matrix实现3D效果)上面看到了小米时钟实现.特别感兴趣.就认真的看了一遍.并自己敲了一遍.下面说下我自己的理解和我的一些改进的地方效果真的特别棒就发布了自己的时钟应用。

先上图(电脑没有gif截图软件.大家凑合看.哪个软件好也可以给我推荐下)

话不多说,首先自定义控件XimiClockView继承view  并做一些初始化的操作
看到的漂亮时钟图片我自己画的效果图(以后妈妈再也不用担心我迟到了)

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

 public XimiClockView(Context context, AttributeSet attrs) {
 super(context, attrs);
 init(context, attrs);
 }

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

 @RequiresApi(api = Build.VERSION_CODES.LOLLIPOP)
 public XimiClockView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
 super(context, attrs, defStyleAttr, defStyleRes);
 init(context, attrs);
 }

 /**
 * 进行一些初始化的操作
 *
 * @param context
 * @param attrs
 */
 private void init(Context context, AttributeSet attrs) {
 if (attrs == null) return;
 TypedArray array = context.obtainStyledAttributes(attrs, R.styleable.MyClockView);
 backGroundColor = array.getColor(R.styleable.MyClockView_clockBackColor, Color.parseColor("#2078A8"));
 drakColor = array.getColor(R.styleable.MyClockView_clockDarkColor, Color.parseColor("#96C2D8"));
 lightColor = array.getColor(R.styleable.MyClockView_clockLightColor, Color.parseColor("#ffffff"));
 array.recycle();//注意这里别忘了调用recycle()方法,[原因](http://www.cnblogs.com/kissazi2/p/4049982.html)
 //设置背景色
 setBackgroundColor(backGroundColor);
 //文本画笔
 textPaint = new Paint();
 textPaint.setColor(drakColor);
 textPaint.setTextSize(25);
 textRect = new Rect();
 }

然后在onSizeChange方法中调用获取时钟半径,和一些其他的计算

 @Override
 protected void onSizeChanged(int w, int h, int oldw, int oldh) {
 super.onSizeChanged(w, h, oldw, oldh);
 //获取时钟的半径
 mRadius = Math.min(w - getPaddingLeft() - getPaddingRight(), h - getPaddingTop() - getPaddingBottom()) / 2;
 //为了防止时钟旋转的时候超出了界限,默认加一个padding值
 defaultPadding = 0.12f * mRadius;
 //圆弧的宽度
 mCircleWidth = 0.012f * mRadius;
 //圆环的宽度
 mCircleRingWidth = 0.12f*mRadius;
 paddingLeft = w / 2 - mRadius + getPaddingLeft() + defaultPadding;
 paddingTop = h / 2 - mRadius + getPaddingTop() + defaultPadding;
 paddingRight = w / 2 - mRadius + getPaddingRight() + defaultPadding;
 paddingBottom = h / 2 - mRadius + getPaddingBottom() + defaultPadding;
 mSweepGradient = new SweepGradient(w / 2,h / 2 ,new int[]{drakColor,lightColor},new float[]{0.75f,1f});
 }

画Text

@Override
 protected void onDraw(Canvas canvas) {
 mCanvas = canvas;
 drawTimeText();
 }

 /**
 * 画12 /3 /6 /9时间
 */
 private void drawTimeText() {
 String str = "12";
 textPaint.getTextBounds(str, 0, str.length(), textRect);
 int lengthTextWidth = textRect.width();
 int textHeight = textRect.height();
 int width=getWidth();
 int height=getHeight();
 mCanvas.save();//保存画布的状态
 mCanvas.drawText(str, width / 2-lengthTextWidth/2,paddingTop+textHeight,textPaint);
 str="3";
 textPaint.getTextBounds(str, 0, str.length(), textRect);
 int smallTextWidth = textRect.width();
 mCanvas.drawText("3",width-paddingRight-lengthTextWidth/2-smallTextWidth/2,height/2+textHeight/2,textPaint);
 mCanvas.drawText("6",width / 2-smallTextWidth/2,height-paddingBottom,textPaint);
 mCanvas.drawText("9",paddingLeft,height/2+textHeight/2,textPaint);
 mCanvas.restore();//取出画布的状态
 }

崩溃写完了,我发表时候提示我没有登录,然后发表异常,然后我一刷新没了,,,又重新写一遍,

接下来画圆弧

 /**
 * 画圆弧
 */
 private void drawCircleArc() {
 mCanvas.save();
 mCirclePaint.setStyle(Paint.Style.STROKE);//设置空心模式
 mCirclePaint.setStrokeWidth(mCircleWidth);//设置圆弧宽度
 mCircleRectF.set(paddingLeft + textRect.width() / 2, paddingTop + textRect.height() / 2, getWidth() - paddingRight - textRect.width() / 2, getHeight() - paddingBottom - textRect.height() / 2);
 for (int x = 0; x < 4; x++) {
 //圆弧分四段来画,一段话80度
  mCanvas.drawArc(mCircleRectF, 5 + 90 * x, 80, false, mCirclePaint);
 }
 mCanvas.restore();
 }

画刻度

/**
 * 画圆环和刻度
 */
 private void drawCircleRing() {
 mCanvas.save();
 //画圆环
 mCircleRingRectF.set(paddingLeft+textRect.height()/2+1.5f*mCircleRingWidth,paddingTop+textRect.height()/2+1.5f*mCircleRingWidth,getWidth()-paddingRight-textRect.height()/2-1.5f*mCircleRingWidth,
  getHeight()-paddingBottom-textRect.height()/2-1.5f*mCircleRingWidth);
 mMatrix.setRotate(mDegreeS-90,getWidth()/2,getHeight()/2);
 mSweepGradient.setLocalMatrix(mMatrix);
 mCircleRingPaint.setStyle(Paint.Style.STROKE);
 mCircleRingPaint.setStrokeWidth(mCircleRingWidth);
 mCircleRingPaint.setShader(mSweepGradient);
 mCanvas.drawArc(mCircleRingRectF,0,360,false,mCircleRingPaint);
 //画刻度
 mScaleLinePaint.setStrokeWidth(0.1f*mCircleRingWidth);//设置线的宽度
 for (int i=0;i<200;i++){
  //画刻度线
  mCanvas.drawLine(getWidth()/2,paddingTop+textRect.height()/2+mCircleRingWidth,getWidth()/2,paddingTop+textRect.height()/2+2*mCircleRingWidth,mScaleLinePaint);
  mCanvas.rotate(1.8f,getWidth()/2,getHeight()/2);//旋转角度
 }
 mCanvas.restore();
 }

画秒针

 /**
 * 画秒针
 * 秒针针是不规则的图形
 * 就用到了Path这个类
 *
 */
 private void drawSoundHand() {
 mCanvas.save();
 path.reset();
 mCanvas.rotate(mDegreeS,getWidth()/2,getHeight()/2);//旋转的角度和旋转的圆心
 path.moveTo(getWidth()/2,paddingTop+textRect.height()/2+0.27f*mRadius);//开始的点
 path.lineTo(getWidth()/2+0.03f*mRadius,paddingTop+textRect.height()/2+0.31f*mRadius);//直线到这个位置
 path.lineTo(getWidth()/2-0.03f*mRadius,paddingTop+textRect.height()/2+0.31f*mRadius);//直线到这个位置
 path.close();
 mCanvas.drawPath(path,mSoundHandPaint);
 mCanvas.restore();
 }

画时针

 /**
 * 画时针
 */
 private void drawHourHand() {
 mCanvas.save();
 mCanvas.rotate(mDegreeH,getWidth()/2,getHeight()/2);
 hourHandPath.reset();
 hourHandPath.moveTo(getWidth()/2-0.02f*mRadius,getHeight()/2);
 hourHandPath.lineTo(getWidth()/2-0.01f*mRadius,getHeight()/2-0.35f*mRadius);
 //贝塞尔曲线
 hourHandPath.quadTo(getWidth()/2,getHeight()/2-0.38f*mRadius,getWidth()/2+0.01f*mRadius,getHeight()/2-0.35f*mRadius);
 hourHandPath.lineTo(getWidth()/2+0.02f*mRadius,getHeight()/2);
 hourHandPath.close();
 mCanvas.drawPath(hourHandPath,mHourHandPaint);
 mCanvas.restore();
 }

画分针

 /**
 * 画分针
 */
 private void drawMinnuteHand() {
 mCanvas.save();
 mCanvas.rotate(mDegreeM,getWidth()/2,getHeight()/2);
 mMinutePath.reset();
 mMinutePath.moveTo(getWidth()/2-0.012f*mRadius,getHeight()/2);
 mMinutePath.lineTo(getWidth()/2-0.006f*mRadius,getHeight()/2-0.40f*mRadius);
 mMinutePath.quadTo(getWidth()/2,getHeight()/2-0.43f*mRadius,getWidth()/2+0.006f*mRadius,getHeight()/2-0.40f*mRadius);
 mMinutePath.lineTo(getWidth()/2+0.012f*mRadius,getHeight()/2);
 mMinutePath.close();
 mCanvas.drawPath(mMinutePath,mMinutePaint);
 //画圈圈盖着时针的尾部
 mCanvas.drawCircle(getWidth()/2,getHeight()/2,0.03f*mRadius,mMinutePaint);
 mCanvas.drawCircle(getWidth()/2,getHeight()/2,0.015f*mRadius,mCircleMinPaint);
 mCanvas.restore();
 }

上我的measure的方法

 @Override
 protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
 setMeasuredDimension(getMeasure(widthMeasureSpec), getMeasure(heightMeasureSpec));
 }

 private int getMeasure(int measureSpec) {
 int result;
 int mode = MeasureSpec.getMode(measureSpec);
 int size = MeasureSpec.getSize(measureSpec);
 if (mode == MeasureSpec.EXACTLY) {
  result = size;
 } else {
  result = 800;
  if (mode == MeasureSpec.AT_MOST) {
  result = Math.min(result, size);
  }
 }
 return result;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。


# Android  # 时钟  # Android获取设备CPU核数、时钟频率以及内存大小的方法  # Android多功能时钟开发案例(实战篇)  # android实现widget时钟示例分享  # Android 仿日历翻页、仿htc时钟翻页、数字翻页切换效果  # Android多功能时钟开发案例(基础篇)  # android高仿小米时钟(使用Camera和Matrix实现3D效果)  # Android实现简单时钟View的方法  # Android自定义动态壁纸开发(时钟)  # Android编程基于自定义控件实现时钟功能的方法  # Android自定义View实现时钟功能  # 一遍  # 自己的  # 给我  # 我在  # 看了  # 我一  # 其他的  # 感兴趣  # 自定义  # 没了  # 就用  # 别忘了  # 多说  # 敲了  # 为了防止  # 大家多多  # 迟到了  # 一段话  # 塞尔  # 上图 


相关栏目: 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571


相关推荐: 如何快速打造个性化非模板自助建站?  Laravel怎么实现验证码功能_Laravel集成验证码库防止机器人注册  详解Android图表 MPAndroidChart折线图  Win11怎样安装网易有道词典_Win11安装词典教程【步骤】  如何为不同团队 ID 动态生成多个“认领值班”按钮  悟空浏览器如何设置小说背景色_悟空浏览器背景色设置【方法】  百度浏览器如何管理插件 百度浏览器插件管理方法  Laravel如何发送邮件_Laravel Mailables构建与发送邮件的简明教程  Android中Textview和图片同行显示(文字超出用省略号,图片自动靠右边)  Laravel如何使用查询构建器?(Query Builder高级用法)  如何在 Pandas 中基于一列条件计算另一列的分组均值  Laravel怎么处理异常_Laravel自定义异常处理与错误页面教程  如何在IIS中新建站点并解决端口绑定冲突?  详解jQuery中基本的动画方法  如何制作新型网站程序文件,新型止水鱼鳞网要拆除吗?  北京专业网站制作设计师招聘,北京白云观官方网站?  EditPlus中的正则表达式 实战(2)  HTML5打空格有哪些误区_新手常犯的空格使用错误【技巧】  SQL查询语句优化的实用方法总结  详解jQuery停止动画——stop()方法的使用  Laravel怎么导出Excel文件_Laravel Excel插件使用教程  Laravel如何处理异常和错误?(Handler示例)  网站制作壁纸教程视频,电脑壁纸网站?  如何在云服务器上快速搭建个人网站?  Laravel项目结构怎么组织_大型Laravel应用的最佳目录结构实践  北京网页设计制作网站有哪些,继续教育自动播放怎么设置?  网页制作模板网站推荐,网页设计海报之类的素材哪里好?  再谈Python中的字符串与字符编码(推荐)  Midjourney怎样加参数调细节_Midjourney参数调整技巧【指南】  如何快速生成专业多端适配建站电话?  昵图网官网入口 昵图网素材平台官方入口  微信小程序 require机制详解及实例代码  如何使用 Go 正则表达式精准提取括号内首个纯字母标识符(忽略数字与嵌套)  HTML5段落标签p和br怎么选_文本排版常用标签对比【解答】  中山网站推广排名,中山信息港登录入口?  Laravel Blade组件怎么用_Laravel可复用视图组件的创建与使用  Laravel怎么实现观察者模式Observer_Laravel模型事件监听与解耦开发【指南】  Laravel如何创建自定义Artisan命令?(代码示例)  怎么用AI帮你为初创公司进行市场定位分析?  网站制作价目表怎么做,珍爱网婚介费用多少?  韩国网站服务器搭建指南:VPS选购、域名解析与DNS配置推荐  创业网站制作流程,创业网站可靠吗?  如何用AWS免费套餐快速搭建高效网站?  iOS发送验证码倒计时应用  Laravel如何处理JSON字段的查询和更新_Laravel JSON列操作与查询技巧  如何续费美橙建站之星域名及服务?  公司网站制作需要多少钱,找人做公司网站需要多少钱?  韩国服务器如何优化跨境访问实现高效连接?  Win11怎么设置默认图片查看器_Windows11照片应用关联设置  香港网站服务器数量如何影响SEO优化效果?