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

10,405 阅读1分钟

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

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

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…