Android自定义View之音频抖动动效

自定义动画效果——音频抖动效果

绘制一个矩形：

想要绘制一个矩形，继承View，并重写onDraw方法即可。复杂一点还可以重写onMeasure方法和onLayout方法进行大小测量和位置测量。但本文不打算写那么复杂的view，故只需要重写一个onDraw方法即可：

 private RectF rectF = new RectF();//绘制矩形
    private float lineWidth = 50;
    private Paint paint = new Paint();

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //设置颜色
        paint.setColor(context.getColor(R.color.colorPrimary));
        //填充内部
        paint.setStyle(Paint.Style.FILL);
        //设置抗锯齿
        paint.setAntiAlias(true);
        //绘制矩形的四边
        int widthCentre = getWidth() / 2;
        int heightCentre = getHeight() / 2;
        rectF.left = widthCentre - lineWidth / 2;
        rectF.right = widthCentre + lineWidth / 2;
        rectF.top = heightCentre - lineWidth * 2;
        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。如图所示：