【Android自定义View实战01】仿微信读书APP滑动指示条

Dear 丶 2023-10-10 00:44 41阅读 0赞

先看一下读书APP的效果：

![format_png][]

弹窗往下滑动时，顶部的指示条也会跟着向下弯曲变成箭头形状。

分析

话不多说，先来给指示条做个X光检查看看：

![format_png 1][]

1.  未滑动时指示条就是一个普通的圆角矩形
2.  滑动时是一个箭头，箭头的两端是两个圆

指示条从`点S`滑动到`点T`过程中，`圆L`和`圆K`的切线相交形成箭头。箭头通过`Path`把`圆心L`、`点T`、`圆心K`连接起来，拐角处还需要处理为圆角，可以使用`Paint`的`setStrokeJoin()`方法，该方法设置线段连接处的样式，取值有三个：

java

复制代码

`Paint.Join.MITER //锐角 Paint.Join.Round //圆弧 Paint.Join.BEVEL //直线`

这里取`Round`，该值的处理方式是以`点T`为圆心、指示条高度的一半为半径画圆弧，连接拐角，如图：

![format_png 2][]

至此，指示条的整体高度就确定了，就是`QH`的长度，即`ST+指示条高度`。

#### 实现 ####

首先给指示条指定一个最大可弯曲的高度值`bendingHeight`，当前弯曲的比例为`bendingRatio`。

*  `onMeasure()`测量宽高：

1.  当弯曲比例等于0时，测量高度就是指示条高度
2.  当弯曲比例大于0时，测量高度就是指示条高度+弯曲高度

java

复制代码

`@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { int width = MeasureSpec.getSize(widthMeasureSpec); int hMode = MeasureSpec.getMode(heightMeasureSpec); int hSize = MeasureSpec.getSize(heightMeasureSpec); int height; if (hMode == MeasureSpec.EXACTLY) { height = hSize; } else { if (bendingRatio <= 0) { height = barHeight + getPaddingTop() + getPaddingBottom(); } else { int h = (int) (barHeight + bendingHeight * bendingRatio); height = Math.min(h + getPaddingTop() + getPaddingBottom(), hSize); } } setMeasuredDimension(width, height); }`

*  `onDraw()`绘制，

1.  当弯曲比例等于0时，绘制圆角矩形即可
2.  当弯曲比例大于0时，先使用`Path`绘制箭头，再绘制两端的圆

java

复制代码

`@Override protected void onDraw(Canvas canvas) { float radius = barHeight / 2f; if (bendingRatio <= 0) { rectF.set(getPaddingLeft(), getPaddingTop(), getWidth() - getPaddingRight(), getPaddingTop() + barHeight); barPaint.setStyle(Paint.Style.FILL); canvas.drawRoundRect(rectF, radius, radius, barPaint); } else { path.reset(); path.moveTo(getPaddingLeft() + radius, getPaddingTop() + radius); float x = getPaddingLeft() + (getWidth() - getPaddingLeft() - getPaddingRight()) / 2f; float y = getPaddingTop() + barHeight / 2f + bendingHeight * bendingRatio; path.lineTo(x, y); path.lineTo(getWidth() - getPaddingRight() - radius, getPaddingTop() + radius); barPaint.setStyle(Paint.Style.STROKE); canvas.drawPath(path, barPaint); canvas.drawCircle(getPaddingLeft() + radius, getPaddingTop() + radius, radius, circlePaint); canvas.drawCircle(getWidth() - getPaddingRight() - radius, getPaddingTop() + radius, radius, circlePaint); } }`

最后只需要调用`setBendingRatio()`方法实时更改弯曲比例即可。

#### 效果 ####

![format_png 3][]

到这里文章就水完了，有写的不好的地方还请指出。 参考连接：[SlidingIndicatorBar-项目地址][SlidingIndicatorBar-]

[format_png]: https://img-blog.csdnimg.cn/img_convert/586f17afa5c431e23bb89efd4b3c2e7b.webp?x-oss-process=image/format,png
[format_png 1]: https://img-blog.csdnimg.cn/img_convert/1ccf9e6d3aff29b2033512cc4fa8b3cd.webp?x-oss-process=image/format,png
[format_png 2]: https://img-blog.csdnimg.cn/img_convert/e459f1cfd43ffb59532b7376c4d1d2fd.webp?x-oss-process=image/format,png
[format_png 3]: https://img-blog.csdnimg.cn/img_convert/8c12ed9c846f2b432a2d848b8cb42786.webp?x-oss-process=image/format,png
[SlidingIndicatorBar-]: https://link.juejin.cn/?target=https%3A%2F%2Fgithub.com%2Fzaaach%2FSlidingIndicatorBar