Android 自定义控件之——画个老虎机来玩玩

小时候经常去镇上的游戏厅玩游戏，里面有很多赌游戏币的老虎机，当初也玩过，被坑了好多游戏币。现在有空，自己也画一个来玩玩。巩固一下自己在自定义控件 方面的知识，好了，不多废话了。效果图先走一波。

图中的未注册是制作gif的时候，制图软件自己加上去的。另外就是右下角看起来像有点缺，这是卡顿造成的，真机上跑起来还是很流畅的。

写这个控件的时候首先要理清思路，先画什么，再画什么。当然这里就这么两种，肯定先画灰色的方块了。画好灰色的方块在考虑红色的怎么画。

画灰色方块

首先我建了一个类叫RuningView 继承View 代码如下

public class RuningView extends View {

    private Paint grayPaint;
    private Paint redPaint;
    private Paint textPaint;

    private static final int MAGIN = 10; //与边线的距离
    private static final int BORDER_LENGTH = 100;  // 边长
    private int verticalNumber = 0; //竖直方向的数量
    private int horizontalNumber = 0; //水平方向的数量
    private float horizontalSpacing = 0; //水平矩形间的间距
    private List<RectF> rectFList = new ArrayList<>();
    private int locationIndexFirst = 0;
    private int locationIndexSecond = -1;
    private int locationIndexThird = -2;

    private int sleepTime = 200;
    private int runTime = 10 * 5 * 200;
    private int currentTime = 0;
    private boolean isRuning = false;

    public RuningView(Context context) {
        super(context);
        init();
    }

    public RuningView(Context context, @Nullable AttributeSet attrs) {
        super(context, attrs);
        init();
    }

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

    private void init() {
        grayPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        grayPaint.setStyle(Paint.Style.FILL);
        grayPaint.setColor(Color.GRAY);

        redPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        redPaint.setStyle(Paint.Style.FILL);
        redPaint.setColor(Color.RED);

        textPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
        textPaint.setStyle(Paint.Style.FILL);
        textPaint.setColor(Color.WHITE);
        textPaint.setTextSize(40);
    }

}

初始化了一些变量，至于这些变量有什么用，后面慢慢会用到。

首先，看看灰色矩形怎么画，画法多种多样，我这里当然只能说说我的思路。思路是整个边上的矩形分为4部分，即 上、下、左、右。每部分采用for循环依次画出。好了，问题又来了，坐标怎么确定？我怎么知道要循环多少次呢？这就是下面就是要计算的东西咯。

先把我的计算方法贴出来

@Override
protected void onSizeChanged(int w, int h, int oldw, int oldh) {
    super.onSizeChanged(w, h, oldw, oldh);
    int width = getWidth();
    int height = getHeight();
    int horizontalRectNumber = width / BORDER_LENGTH;//如果不考虑间距，这可以画这么多个矩形
    horizontalNumber=horizontalRectNumber-3; //这里用3个矩形的位置的空间来做矩形间的间距
    int horizontalRest = width - horizontalNumber * BORDER_LENGTH -2*MAGIN; //水平方向剩余的空间
    float horizontalSpac = (float) horizontalRest / (float) (horizontalNumber - 1);
    DecimalFormat df = new DecimalFormat("0.00");
    String format= df.format(horizontalSpac);
    horizontalSpacing=Float.valueOf(format);

    int verticalRectNumber = (int) ((hei