Android自定义view-仿华为运动健康手势移动控件

Android自定义view-仿华为运动健康手势移动控件

Android小彩虹2021-06-11 8:42:31190A+A-

       最近买了个华为手环,准备跑步用的,没想到附近没有像样的跑步场所,只能作罢!无意间看到睡眠监测的页面,有个手势滑动的控件,让人觉得滑的很舒服,进而产生了兴趣,萌发撸出来的想法

       先从简单的来,首先绘制跟随手势移动的小圆,这个比较简单 

canvas.drawCircle(circleCenterX, circleCenterY, circleRadius, circlePaint);

       然后绘制跟随小圆移动的曲线以及曲线所在上面白色部分,这里需要使用到贝塞尔曲线进行曲线的绘制,一开始使用的是二阶的绘制方法,发现效果不好,然后改用的分成两段三阶贝塞尔曲线的绘制方法(看下图),效果就圆润多了。这里附上贝塞尔曲线传送门

private void drawLine(Canvas canvas) {    
    linePath.reset();    
    linePath.moveTo(0, circleCenterY);    
    linePath.lineTo(circleCenterX - circleRadius - 60, circleCenterY);    
    linePath.cubicTo(circleCenterX - circleRadius, circleCenterY, circleCenterX - circleRadius - 5            , circleCenterY - circleRadius - 10, circleCenterX, circleCenterY - circleRadius - 10);    
    linePath.cubicTo(circleCenterX + circleRadius + 5, circleCenterY - circleRadius - 10            , circleCenterX + circleRadius, circleCenterY, circleCenterX + circleRadius + 60, circleCenterY);
    linePath.lineTo(viewWidth, circleCenterY);    
    linePath.lineTo(viewWidth, 0);    
    linePath.lineTo(0, 0);    
    linePath.close();    
    canvas.drawPath(linePath, cruveLinePaint);
}

最后是小学数学部分,随着小圆移动,上面的时间文本会跟着上下移动

到这里基本就大功告成了,如果同学们有什么好的实现方法,或者有什么建议,欢迎留言,一起探讨学习!最后附上效果图和源码地址

开源不易,请尊重作者劳动,转载请注明出处

欢迎Github follow,点亮右上角的star,是给予的最大激励!

github 源码地址 github.com/jianjiucode…

点击这里复制本文地址 以上内容由权冠洲的博客整理呈现,请务必在转载分享时注明本文地址!如对内容有疑问,请联系我们,谢谢!

支持Ctrl+Enter提交

联系我们| 本站介绍| 留言建议 | 交换友链
本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除

权冠洲的博客 © All Rights Reserved.  Copyright quanguanzhou.top All Rights Reserved
苏公网安备 32030302000848号   苏ICP备20033101号-1

联系我们