Android自定义View实现五子棋

首先看下实际效果

实现的思路

1. 绘制棋盘

2. 绘制已经存在的棋子

3. 监听触摸事件,判断落子

4. 判断胜利条件

   重写onDraw方法如下

    @Override
    protected void onDraw(Canvas canvas) {
    	//绘制棋盘
    	drawBoard(canvas);
    	//添加棋盘上的点
    	addPoints();
   
    	if (!isGameOver) {
    		//绘制随手指滑动的棋子
        	drawFreeChessMans(canvas);
    	}
    	//绘制棋子
    	drawChessMans(canvas);
    }
   

实现的步骤

绘制棋盘

1. 创建构造方法,初始化部分变量

    private Map<String, ChessPoint> chessPoints;
   
    private Paint paint;
   
    private TextPaint textPaint;
   
    public ChessboardView(Context context) {
    	this(context, null);
    }
   
    public ChessboardView(Context context, @Nullable AttributeSet attrs) {
    	this(context, attrs, 0);
    }
   
    public ChessboardView(Context context, @Nullable AttributeSet attrs, int defStyleAttr) {
    	super(context, attrs, defStyleAttr);
    	init(context, attrs);
    }
   
    private void init(Context context, @Nullable AttributeSet attrs) {
   
    	paint = new Paint();
    	textPaint = new TextPaint();
    	paint.setAntiAlias(true);
    	textPaint.setAntiAlias(true);
    	chessPoints = new HashMap<>(15 * 15);
    }
   

2. 由于五子棋盘是正方形的,所以我们重写onMeasure方法强制让ChessboardView变成正方形

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
   
    	int widthSize = MeasureSpec.getSize(widthMeasureSpec);
    	int heightSize = MeasureSpec.getSize(heightMeasureSpec);
   
    	int min = widthSize < heightSize ? widthSize : heightSize;
   
    	setMeasuredDimension(min, min);
    }
   

3. 绘制棋盘(这里我找了百度百科五子棋下面的图片作为参考).可以看到:

   A,棋盘是横竖各有15条线;

   B,棋盘左边右边有数字/字母的标志;

   C,棋盘有D4,L4,D12,L12,H8这五个特殊的点;

   D,棋子分黑白两色,旗子上显示步数.

   

   参考代码如下

    private void drawBoard(Canvas canvas) {
   
        paint.setColor(Color.BLACK);
        paint.setStrokeWidth(dip2px(0.7f));
        textPaint.setTextSize(dip2px(12));
        textPaint.setColor(Color.BLACK);
   
        int _width = getWidth();
        int _height = getHeight();
   
        int _chessboardWidth = _width < _height ? _width : _height;
        float _padding = _chessboardWidth * 0.2f;
        float _lineLength = _chessboardWidth * 0.8f;
        float _space = _lineLength / 14;
   
        float _startX = _padding / 2;
        float _startY = _padding / 2;
        //画棋盘
        //1,画竖线
        for (int i = 0; i < 15; i++) {
            canvas.drawLine(_startX, _startY, _startX, _startY + _lineLength, paint);
            _startX += _space;
        }
   
        //2,画横线
        _startX = _padding / 2;
        _startY = _padding / 2;
        for (int i = 0; i < 15; i++) {
            canvas.drawLine(_startX, _startY, _startX + _lineLength, _startY, paint);
            _startY += _space;
        }
   
        //3,画数字字母
        _startX = _padding / 2;
        _startY = _padding / 8 * 3;
        char _text = 'A';
        for (char i = 0; i < 15; i++) {
            String s = String.valueOf((char) (_text + i));
            canvas.drawText(s, _startX - textPaint.measureText(s) / 2, _startY, textPaint);
            _startX += _space;
        }
   
        _startX = _padding / 4;
        _startY = _padding / 2;
        for (int i = 1; i <= 15; i++) {
            String s = String.valueOf(i);
            Rect rect = new Rect();
            paint.getTextBounds(s, 0, s.length(), rect);
            canvas.drawText(s, _startX - rect.width(), _startY + rect.height(), textPaint);
            _startY &