Android进阶系列：八、自定义View之音频抖动动效(1)

rectF.bottom = heightCentre + lineWidth * 2;
//绘制圆角矩形，rx：x方向上的圆角半径。ry：y方向上的圆角半径。
canvas.drawRoundRect(rectF, 6, 6, paint);
}

1.我们需要初始化一个RectF来绘制矩形，这个类通过一个边的来绘制矩形。并初始化一个画笔，和矩形的宽度。

2.在onDraw方法中，设置画笔paint，包括颜色，填充方式，是否抗拒性。还有更多的设置，读者可以自行查阅API

3.获取该View的实际宽高的一半，然后设置矩形的四边，熟悉Android的view的绘制都知道，view的宽为right - left，高度为bottom - top。所以让right比left多一个lineWidth即可让矩形的宽为lineWidth，bottom比top多4lineWidth即可让高读为4lineWidth，并利用实际宽高的一半，把矩形绘制在view的中央。

4.在画布上使用drawRoundRect方法绘制一个圆角的矩形

5.然后在xml文件中引用这个view就可以使用了：

<com.ycm.customview.LineWaveVoiceView
android:id=“@+id/line1”
android:layout_width=“300dp”
android:layout_height=“100dp”
android:layout_marginBottom=“8dp”
android:layout_marginEnd=“8dp”
android:layout_marginStart=“8dp”
android:layout_marginTop=“8dp”
/>

这样就可以在view中绘制一个矩形，如图所示：

####绘制多个矩形
现在我们可以绘制多个矩形在画布上。直接采用for循环是不行的，这样会让矩形重叠在一起，导致只显示一个矩形，所以应该控制让矩形错开显示，我们可以让矩形之间间隔一个lineWidth。如图所示：

我们以第一个矩形的左边为参照，标为0，则其右边为1，第二个矩形的左边为2，右边为3，以此类推，它们的距离都是lineWidth。所以我们可以得出：

• 第一个矩形的左边是0，第二个矩形的左边是2，第三个左边是4，以此类推是一个2（n-1）的等差数列
• 第一个矩形的右边是1，第二个矩形的右边是3，第三个右边是5，以此类推是一个2n-1的等差数列
  所以我们可以这样写：

for (int i = 1; i <= 4; i++) {
rectF.left = widthCentre - lineWidth / 2 + 2 * (i - 1) * lineWidth;
rectF.right = widthCentre + lineWidth / 2 + (2 * i - 1) * lineWidth;
rectF.top = heightCentre - lineWidth * 2