先上效果图

• 实现的效果
  

• UI出的效果
  

虽然看起来实现的效果和UI的效果看起来有的出入,但这个并不影响,在手机上效果是可以的.

代码实现

• 支持更换格数
• 支持更换默认颜色和选中颜色
• 后续可优化成阶梯式

public class GpsSignalStrengthView extends View {

    public Context mContext;
    private Paint mPaint;
    /**
     * 信号数
     */
    private int mSignalCount = 10;

    /**
     * 信号
     */
    private int mSignal = 6;
    private int mViewWidth;
    private int mViewHeight;
    /**
     * view的宽度
     */
    private float mWeight;
    /**
     * view高度
     */
    private float mHeight;
    /**
     * 内边距
     */
    private float mPadding = 5;
    /**
     * 信号颜色
     */
    private int mSignalColor = Color.GREEN;
    /**
     * 信号默认颜色(没有达到的颜色)
     */
    private int mSignalDefaultColor = Color.BLACK;


    public GpsSignalStrengthView(Context context) {
        this(context, null);
    }

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

    public GpsSignalStrengthView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        mContext = context;
        mPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        setSignal(5,3);
    }


    /**
     * 在大小改变
     *
     * @param w    w
     * @param h    h
     * @param oldw oldw
     * @param oldh oldh
     */
    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        initRect(w, h);
    }

    /**
     * 初始化矩形
     *
     * @param viewW viewW
     * @param viewH viewH
     */
    private void initRect(int viewW, int viewH) {
        if (viewH == 0 || viewW == 0) {
            return;
        }
        mViewWidth = viewW;
        mViewHeight = viewH;
        mWeight = (float) mViewWidth / (mSignalCount);
        mPadding = mWeight / 2F;
        mHeight = mViewHeight - (mPadding);

    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
        //画默认信号
        mPaint.setStrokeCap(Paint.Cap.ROUND);
        mPaint.setAntiAlias(true);
        mPaint.setStrokeWidth(mWeight);
        mPaint.setColor(mSignalDefaultColor);
        mPaint.setStyle(Paint.Style.FILL);
        for (int i = 1; i < mSignalCount; i += 2) {
            canvas.drawLine(mWeight * i, mPadding, mWeight * i, mHeight, mPaint);
        }
        //画信号
        mPaint.setStyle(Paint.Style.FILL);
        mPaint.setColor(mSignalColor);
        for (int i = 1; i < mSignal; i += 2) {
            canvas.drawLine(mWeight * i, mPadding, mWeight * i, mHeight, mPaint);
        }

    }


    /**
     * 设置信号
     *
     * @param signalCount 信号总数
     * @param signal      当前信号数
     */
    public void setSignal(int signalCount, int signal) {
        mSignalCount = signalCount * 2;
        mSignal = signal * 2;
        if (mSignalCount < 1) {
            mSignalCount = 1;
        }
        if (mSignal > mSignalCount) {
            mSignal = mSignalCount;
        }
        if (mSignal < 0) {
            mSignal = 0;
        }
        initRect(mViewWidth, mViewHeight);
        invalidate();
    }


    /**
     * 设置信号颜色
     *
     * @param signalColor 电池颜色
     */
    public void setSignalColor(int signalColor) {
        mSignalColor = signalColor;
        invalidate();
    }

    /**
     * 设置信号默认颜色
     *
     * @param signalDefaultColor 信号默认颜色
     */
    public void setSignalDefaultColor(int signalDefaultColor) {
        mSignalDefaultColor = signalDefaultColor;
        invalidate();
    }


    /**
     * 获取信号格数
     *
     * @return 格数
     */
    public int getSignal() {
        return mSignal;
    }
}

实现原理

• 看效果图,可以简单的将格数乘2,这样中间间隔的部分就是乘2出来的
• 左右边距用的一个长度的一半,这样的好处是画笔设置为圆角的时候,上行各占1半,这样绘制的时候加上边距就可以绘制出圆角
• 还有画笔的宽度就是间隔,每一根信号只需要绘制一次
• 第一根不画就是因为画笔在中间,间隔又是宽度的一半,跳过就是边距了