Android - 自定义view【2】（WIFI动画）

1.效果图

GIF.gif

2.具体实现代码

绘制这个扇形和弧线，首先需要去创建一个自定义的view重写它的onDraw()方法，在绘制之前可以在view创建的时候先将画笔初始化出来。

具体的难点在于第二步如何动态去绘制，可以定义一个具体的数值比如 shouldExistSignalSize 来控制每次绘制的时候绘制哪个信号，从最开始的时候只绘制第一个信号（也就是扇形），接着第二次绘制的时候需要绘制第一个和第二个信号，往后就是第一个信号，第二个信号，第三个信号；当四格信号都绘制完毕的时候记得将 shouldExistSignalSize 重置。

package cc.willread.www.viewapp;

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.RectF;
import android.os.Handler;
import android.support.annotation.Nullable;
import android.util.AttributeSet;
import android.view.View;

public class WIFIView extends View {
    public WIFIView(Context context) {
        this(context, null);
    }

    public WIFIView(Context context, @Nullable AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public WIFIView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private Paint paint;
    /**
     * 初始化准备
     */
    private void init() {
        paint = new Paint();
        //画笔颜色
        paint.setColor(Color.BLACK);
        //画笔粗细
        paint.setStrokeWidth(6);
        //抗锯齿
        paint.setAntiAlias(true);

    }


    /**WIFI控件宽高较小一边的长度*/
    private int wifiLength;
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w, h, oldw, oldh);
        wifiLength = Math.min(w, h);
    }

    /**
     * 开始角度
     */
    private float startAngle = -135;
    /**
     * 扇形或者弧的旋转角度
     */
    private float sweepAngle = 90;
    /**
     * 信号大小，默认4格
     */
    private int signalSize = 4;

    /**每次应该绘制的信号个数*/
    private float shouldExistSignalSize = 0f;

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        shouldExistSignalSize++;
        if(shouldExistSignalSize>4){
            shouldExistSignalSize=1;
        }
        canvas.save();
        //计算最小的扇形信号所在的圆的半径
        float signalRadius = wifiLength/2/signalSize;
        //向下平移画布,保证绘制的图形能够完全显示
        canvas.translate(0,signalRadius);
        for (int i = 0; i < signalSize; i++) {
            if(i>=signalSize-shouldExistSignalSize) {
                //定义每个信号所在圆的半径
                float radius = signalRadius * i;
                RectF rectf = new RectF(radius, radius, wifiLength - radius, wifiLength - radius);
                if (i < signalSize - 1) {
                    paint.setStyle(Paint.Style.STROKE);
                    canvas.drawArc(rectf, startAngle, sweepAngle, false, paint);
                } else {
                    paint.setStyle(Paint.Style.FILL);
                    canvas.drawArc(rectf, startAngle, sweepAngle, true, paint);
                }
            }
        }
        canvas.restore();

        if(!isDetached) {
            try {
                Thread.sleep(500);
                invalidate();
            } catch (InterruptedException e) {
                // TODO Auto-generated catch block
                e.printStackTrace();
            }
        }
    }
    /**
     * 自定义控件是否脱离窗体
     */
    private boolean isDetached;

    /**
     * 当自定义控件脱离窗体，即将销毁
     */
    @Override
    protected void onDetachedFromWindow() {
        super.onDetachedFromWindow();
        isDetached = true;
    }
}

3.添加自定义view

https://www.willread.cc/p/5be507828a71a