该项目属于继承自View的自定义控件。
效果图如下:
1.静态绘制粘性控件
粘性控件由两个点和中间的贝塞尔曲线组成。效果图如下:
分析图如下:
总体来说:粘性控件两个小圆点之间的区域使用贝塞尔曲线绘制,贝塞尔曲线有三个点,起始点,终点和控制点。第一条贝塞尔曲线起始点为固定圆的上半圆弧水平切点,第二条贝塞尔曲线的起始点为固定圆下半圆弧水平方向的切点。两条贝塞尔曲线的终点和控制点起始状态的位置如图所示。终点为拖拽圆上下半圆弧水平方向的切点,控制点是圆心连线的中点。后面动态绘制时,两条贝塞尔曲线的终点和控制点是随着拖拽圆的移动而改变的,这是后话。
1)在onDraw()中绘制两个小圆点:
2) 绘制贝塞尔曲线,使用Path类
首先确定贝塞尔曲线的起始点,终点坐标。如下图分析所示:
分别获得了两条贝塞尔曲线三个点的坐标,首先把起点,终点封装起来,避免用错。
开始绘制贝塞尔曲线,使用Path类,具体用法代码中已注释
其中需要注意的是,贝塞尔曲线是一个闭合的曲线,如果只有两个点,它会自动连接起点和终点,因此我们画第二条贝塞尔曲线时,直接把第二条的终点和第一条的终点连接起来,将4个点逆时针连接,lineTo(x,y)是画连线的意思,将曲线终点连接到(x,y) moveTo(x,y)是直接跳到(x,y)
此时,静态的拖拽小圆点已经绘制完成,明天更新动态拖拽小红点的内容。
2、绘制动态拖拽小红点
原理:根据手指在屏幕上的触摸点和MOVE事件,更改drag圆的圆心坐标,根据圆心坐标和斜率求出绘制贝塞尔曲线需要的5个点。需要注意的是,在拖拽的过程中,这5个点是一直随着dragCenter的变化而变化的。
如图所示:
如图所示:5个点分别是
1.controlPoint控制点 2.stickyPointp[0],dragPoint[0]第一条贝塞尔曲线的起点和终点。3.dragPoint[1],stickyPoint[1] 第二条贝塞尔曲线的起点和终点。
那么怎么样求出这5个点呢? 一步步来
1、 controlPoint 两圆圆心连线的黄金分割点。根据两圆圆心坐标和比例0.618求出该点坐标
2.求出斜率
3.根据斜率求出4个点
代码如下:
根据dragCenter的改变,动态求出5个点之后,就可以动态的绘制贝塞尔曲线,我们需要在onTouchEvent中,把Down 和Move 事件下获得手指移动的坐标,作为dragCenter的坐标,并且每次进行onToucheEvent时,都要对画面进行重绘。每次重绘都会更新点坐标,完成拖拽行为在屏幕上的实现。
onTouchEvent()代码的实现:
此时,效果如下:
可以看到,手指点到的位置,与dragCenter稍微有点偏移,这是因为获取的是点相对于屏幕的x,y坐标,而StatusBar 占了画布一点距离。因此,我们需要把画布整体往上偏移即可。
canvas.translate(0, -GeometryUtil.getStatusBarHeight(getResources()));
一些优化:(为什么每次传入值,屏幕上的值就可以动态的变化呢,这是因为在onTounchEvent
中调用了invalidate()重绘界面)
优化1.固定圆的半径随着两圆之间的距离变大,而不断的变小。到达一定的距离后就消失不见。
首先解决stickyRadius随着两圆之间的距离变大而不断变小。
代码如下:在onDraw()中,每次重绘界面都会改变stickyRadius值
然后解决,拖拽到一定程度时,中间连接的部分断掉,固定圆消失。
首先设置一个boolean isDragOut = true;
在onTouchEvent()中,拖拽的过程中,即MOVE事件中,判断两圆圆心的距离是否大于设定的最大值,这里是200,如果大,则将isDragOut = false;在onDraw()中 不再绘制贝塞尔曲线和固定圆部分,代码如下:
onDraw()中
优化2.手松开时拖拽圆的优化。
分几种情况
1.手松开时,已经拖拽出了最大范围,此时拖拽圆回去。
2.手松开时,没有拖拽出最大范围,此时拖拽圆以动画的形式弹回去
3.手松开时,没有拖拽出最大范围,但曾经拖拽出最大范围过,直接回去,不用动画的状态弹回去
代码如下
至此,自定义View暂时告一段落,等我把谷歌市场和华为市场两个项目写完,再继续更新一些比较难的自定义View的博客,参考Hencoder的公众号,做一些现在比较常用的自定义View。
今年的计划基本上是这样:
1.谷歌市场 2.华为市场 3.java数据结构和算法 java编程思想 学完了Android中的东西,就开始学习后端的知识