Android-五子连珠

这次的学习的内容，是一个五子棋的小游戏，当然这里只是简单的实现人人对战，至于人机对战，那是算法问题了，就不过多的研究了。
视频教程传送门：http://www.imooc.com/learn/641

在这次学习的内容中呢，简单的涉及到了自定义View的知识点，相信看过之后还是会有收获的。

---

首先呢，就来核心内容，WuZiQiPanel，这就是自定义的View，顾名思义，其功能就是绘制棋盘与落子。这部分内容有点长，且需要注意的地方比较多。

//网格棋盘（面板）
public class WuZiQiPanel extends View{

    private int mPanelWidth;
    private float mLinearHeight;//每一个格子高度,注意为float类型
    //上面两个成员变量在初始化的时候，有人也许会考虑在setMeasuredDimension(length,length)之后初始化
    //不过还有一个更好的选择，可以在onSizeChanged（当宽和高确定发生改变以后会回调）方法中初始化

    private static final int MAX_LINE=10;

    public static final int MAX_PIECES_NUMBER=MAX_LINE*MAX_LINE;//用于判断是否没有点可下，如果没有了即为和棋

    private Paint mPaint=new Paint();

    private Bitmap mWhitePiece;
    private Bitmap mBlackPiece;

    private static final float RATIO_PIECE=3*1.0f/4;//设置棋子的大小为棋盘格子的3/4

    private boolean mIsWhite=true;//判断是否白子执手,初始化为true表明白子先手
    private List<Point> mWhiteArray=new ArrayList<>();//存放白子的坐标
    private List<Point> mBlackArray=new ArrayList<>();

    private boolean mIsGameOver;
    private int mResult;//0-和棋，1-白子赢，2-黑子赢
    public static final int DRAW=0;//平局
    public static final int WHITE_WON=1;
    public static final int BLACK_WON=2;

    private ResultListener mListener;

    public void setListener(ResultListener listener) {
        mListener=listener;
    }

    public WuZiQiPanel(Context context, AttributeSet attrs) {
        super(context, attrs);

//        setBackgroundColor(0x44ff0000);//红色半透明，使得运行的时候可以具体的看到View所占据的大小
        init();
    }

    private void init() {
        mPaint.setColor(0x88000000);
        mPaint.setAntiAlias(true);
        mPaint.setDither(true);
        mPaint.setStyle(Paint.Style.STROKE);

        mWhitePiece= BitmapFactory.decodeResource(getResources(),R.drawable.stone_w2);
        mBlackPiece= BitmapFactory.decodeResource(getResources(),R.drawable.stone_b1);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        int widthSize=MeasureSpec.getSize(widthMeasureSpec);
        int widthMode=MeasureSpec.getMode(widthMeasureSpec);

        int heightSize=MeasureSpec.getSize(heightMeasureSpec);
        int heightMode=MeasureSpec.getMode(heightMeasureSpec);

        //想把网格棋盘绘制成正方形
        //如果传入的是一个精确的值，就直接取值
        //同时也考虑到获得的widthSize与heightSize是设置的同样的值(如固定的100dp)，但也有可能是match_parent，所以在这里取最小值
        int length=Math.min(widthSize,heightSize);

        if(widthMode==MeasureSpec.UNSPECIFIED) {
            length=heightSize;
        } else if(heightMode==MeasureSpec.UNSPECIFIED) {//注意这里为else if，限定heightMode==MeasureSpec.UNSPECIFIED时才进入，使得逻辑更加严谨
            length=widthSize;
        }

        //将宽和高设置为同样的值
        //在重写onMeasure方法时，必需要调用该方法存储测量好的宽高值
        setMeasuredDimension(length,length);
    }

    @Override
    protected void onSizeChanged(int w, int h, int oldw, int oldh) {
        super.onSizeChanged(w,h,oldw,oldh);
        mPanelWidth=w;
        mLinearHeight=mPanelWidth*1.0f/MAX_LINE;

        //根据实际的棋盘格子的宽度按照一定的比例缩小棋子
        int pieceWidth=(int)(mLinearHeight*RATIO_PIECE);
        mWhitePiece=Bitmap.createScaledBitmap(mWhitePiece,pieceWidth,pieceWidth,false);
        mBlackPiece=Bitmap.createScaledBitmap(mBlackPiece,pieceWidth,pieceWidth,false);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);

        drawBoard(canvas);
        drawPieces(canvas);
        checkGameOver();
    }

    private void checkGameOver() {
        boolean isWhiteWon = WuZiQiUtils.checkFiveInLine(mWhiteArray);
        boolean isBlackWon = WuZiQiUtils.checkFiveInLine(mBlackArray);
        if(isWhiteWon||isBlackWon) {
            mIsGameOver=true;
            mResult=isWhiteWon?WHITE_WON:BLACK_WON;
            mListener.showResult(mResult);
            return;
        }

        boolean isFull=WuZiQiUtils.checkIsFull(mWhiteArray.size()+mBlackArray.size());
        if(isFull) {
            mResult=DRAW;
            mListener.showResult(mResult);
        }
    }

    private void drawPieces(Canvas canvas) {
        for(Point whitePoint:mWhiteArray) {
            canvas.drawBitmap(mWhitePiece,(whitePoint.x+(1-RATIO_PIECE)/2)*mLinearHeight,(whitePoint.y+(1-RATIO_PIECE)/2)*mLinearHeight,null);
        }
        for(Point blackPoint:mBlackArray) {
            canvas.drawBitmap(mBlackPiece,(blackPoint.x+(1-RATIO_PIECE)/2)*mLinearHeight,(blackPoint.y+(1-RATIO_PIECE)/2)*mLinearHeight,null);
        }
    }

    /**
     * 绘制棋盘
     * 因为棋子可以下在边界的点上，所以边界的线与View的边界还是有一定距离的(左右上下的情况是一样的)
     * 所以这里设定边界线距离View的边界有1/2mLinearHeight
     */
    private void drawBoard(Canvas canvas) {
        for (int i=0;i<MAX_LINE;i++) {

            int startX=(int)mLinearHeight/2;
            int endX=(int)(mPanelWidth-mLinearHeight/2);

            int y=(int)((0.5+i)*mLinearHeight);

            //首先画横线
            canvas.drawLine(startX,y,endX,y,mPaint);

            //然后再画纵线(与横线的坐标是相反的)
            canvas.drawLine(y,startX,y,endX,mPaint);
        }
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if(mIsGameOver) return false;

        //首先需要设置该View是对MotionEvent.ACTION_UP事件感兴趣的
        //return true就表示告诉父View自己的态度，表明可以响应MotionEvent.ACTION_UP事件（而至于父View是否将该事件交给你处理还是拦截下来，那是父View的事了），这里只是表明自己的态度
        int action=event.getAction();

        if(action==MotionEvent.ACTION_UP) {
            int x=(int)event.getX();
            int y=(int)event.getY();

            Point point=getValidPoint(x,y);

            //这里还需要考虑contains方法是间接的通过equals方法比较的
            //而Point中的equals方法是通过比较x和y的值来实现的，而不是比较两个引用变量是否指向同一地址（因为在getValidPoint方法中每次都new了一个Point实例）
            //所以这里用contains方法是符合要求的
            if(mWhiteArray.contains(point)||mBlackArray.contains(point)) {
                return false;//（1）
            }

            if(mIsWhite) {
                mWhiteArray.add(point);
            } else {
                mBlackArray.add(point);
            }
            invalidate();//请求重绘
            mIsWhite=!mIsWhite;
            return true;//（2）
            //因为这里只需要处理到ACTION_UP事件即可，接下来要发生的事件不用管（如果有的话），
            //所以在（1）（2）处返回true还是false都所谓（因为WuZiQiPanel是最终层次的view了，其下不会再有子view了），程序都能够正常执行，但是逻辑上返回true比较好
        }
        //上面这点一定要注意

        //改成ACTION_UP的话，需要在末尾直接return true;如果return super.onTouchEvent(event)的话是不会绘制棋子的
        //return super.onTouchEvent(event);
        return true;

        //如果返回true，表示该方法消费了此事，
        //如果为false，那么表明该方法并未处理完全，该事件任然需要以某种方法传递下去继续等待处理
    }

    /**
     * 通过传入的坐标得到一个合法的落子位置
     */
    private Point getValidPoint(int x, int y) {
        return new Point((int)(x/mLinearHeight),(int)(y/mLinearHeight));//逻辑的实现很巧妙
    }

    private static final String INSTANCE="instance";
    private static final String INSTANCE_GAME_OVER="instance_game_over";
    private static final String INSTANCE_WHITE_ARRAY="instance_white_array";
    private static final String INSTANCE_BLACK_ARRAY="instance_black_array";

    @Override
    protected Parcelable onSaveInstanceState() {
        Bundle bundle=new Bundle();
        bundle.putParcelable(INSTANCE,super.onSaveInstanceState());//注意，系统本来需要保存的数据不能忽视
        bundle.putBoolean(INSTANCE_GAME_OVER,mIsGameOver);
        bundle.putParcelableArrayList(INSTANCE_WHITE_ARRAY,(ArrayList)mWhiteArray);//Point已经实现了Parcelable接口
        bundle.putParcelableArrayList(INSTANCE_BLACK_ARRAY,(ArrayList)mBlackArray);
        return bundle;
    }

    @Override
    protected void onRestoreInstanceState(Parcelable state) {
        //需要判断state是否为我们设置的state类型，如果是则表明有需要自己去恢复的数据
        if(state instanceof Bundle) {
            Bundle bundle=(Bundle)state;
            mIsGameOver=bundle.getBoolean(INSTANCE_GAME_OVER);
            mWhiteArray=bundle.getParcelableArrayList(INSTANCE_WHITE_ARRAY);
            mBlackArray=bundle.getParcelableArrayList(INSTANCE_BLACK_ARRAY);
            super.onRestoreInstanceState(bundle.getParcelable(INSTANCE));//恢复保存起来的系统数据，不能忽略
            return;
        }
        super.onRestoreInstanceState(state);
    }

    protected void restart() {
        mWhiteArray.clear();
        mBlackArray.clear();
        mIsGameOver=false;
        invalidate();
    }
}

为了更好更好解释某些问题，这里先将主布局(activity_main.xml)贴出来：

<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/bg">

    <com.example.wuziqi.WuZiQiPanel
        android:id="@+id/id_panel"
        android:layout_gravity="center"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>

    <Button
        android:id="@+id/id_restart"
        android:layout_gravity="right"
        android:background="#22e97d0a"
        android:text="重来"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</FrameLayout>

---

然后，就是讲一下WuZiQPanel中需要注意的几个点了：

(1)
看到布局中为
<com.example.wuziqi.WuZiQiPanel
        android:layout_width="match_parent"
        android:layout_height="match_parent" />
中android:layout_width与android:layout_height为match_parent
有可能有人会疑惑为什么不用wrap_content？
这是因为在本次的Demo中，考虑到WuZiQiPanel中的线以及棋子的绘制是根据WuZiQiPanel的大小决定的，如果在布局中将WuZiQiPanel设置为wrap_content，会出现矛盾，因为它内部的内容的绘制根据它自身的大小决定，但是它的大小又根据内部的内容决定，这是相悖的，就无法测量出实际的尺寸。
当然，如果在指定了WuZiQiPanel内部内容的最小尺寸，也是可以用wrap_content的，但是这样不是最好的解决方法。
所以这里只实现match_parent或者固定的尺寸值这样一种模式（即onMeasure方法中只实现了测量match_parent或者固定的尺寸值这样的情况）。

关于onMeasure，可以下面两篇文章：
自定义View之onMeasure()
ANDROID自定义视图——onMeasure流程，MeasureSpec详解

(2)关于WuZiQiPanel中重写的onMeasure方法的需要注意的地方
（有时候实现自定义View，在测试的时候是良好的，但是当和ScrollView等这样的控件嵌套的时候，就会出现意外的问题，比如自定义的View看不见了，遇到这样的问题一般都是onMeasure的时候没有处理好一些具体的细节。）

在这个实例中：
假设WuZiQiPanel用在ScrollView的内部，这时候一般是将ScrollView作为根部局，然后里面有一个LinearLayout（其layout_height为wrap_content）,然后再LinearLayout的内部是多个WuZiQiPanel垂直排列（如下图），这时即使WuZiQiPanel的layout_width为match_parent（而layout_height一般会为0dp，一般用layout_weight去设置）,然后在onMeasure里面获取widthSize与heightSize以及对应的Mode的时候，会发现heightMode是UNSPECIFIED，而heightSize有可能是0，有可能为不确定的值，因此就有可能带来一系列的问题。
假设为0，则int length=Math.min(widthSize,heightSize)得到的就是0，则setMeasuredDimension(0,0)，此时View就会显示不出来。
所以需要增加如下判断：（当然这里只是处理了某些情况导致mode为MeasureSpec.UNSPECIFIED的情况，也有能存size==0但mode不为UNSPECIFIED的情况，这里不做处理）：
    if(widthMode==MeasureSpec.UNSPECIFIED) {
            length=heightSize;
        } else if(heightMode==MeasureSpec.UNSPECIFIED) {//注意这里为else if，限定heightMode==MeasureSpec.UNSPECIFIED时才进入，使得逻辑更加严谨
            length=widthMode;
        }
这样就避免了length为0的情况（因为heightSize、widthSize不会同时为0）

(3)关于关于WuZiQiPanel中重写的onTouchEvent方法需要注意的问题
首先需要明确的是：父View是有权力拦截事件，自己处理，而不交给子View处理的。（源自该博客：http://blog.csdn.net/jiangwei0910410003/article/details/16986039，注意其评论）

在视频中，最开始是相应ACTION_DOWN来实现落子的，但是后来改为实现ACTION_UP来实现的。

这是因为假设WuZiQiPanel是嵌套到一个ScrollView中，如果用户想滑动棋盘到另外的区域落子，但是当你按住棋盘准备滑动的时候，就会有一个棋子落在你按住的那个点（因为此时设定父类将该事件传递给WuZiQiPanel且其表明了可以响应MotionEvent.ACTION_DOWN的态度），此时明显是不符合要求的。

但是在改为响应MotionEvent.ACTION_UP之后，就需要注意了，在onTouchEvent方法中的最外层的return语句应该返回true，而不是super.onTouchEvent(event)，具体原因如下：

首先需要说明的是：onTouchEvent方法如果返回true，表示该方法消费了此事，如果为false，那么表明该方法并未处理完全，该事件任然需要以某种方法传递下去继续等待处理。

了解到这一点后，就可先去看看下面提及博客，之后会对我的解释更容易理解的。

当我们点击屏幕上的某个点时，正常情况下是会有几个事件依次发生的，而首先发生的就是ACTION_DOWN，如果此时不先对ACTION_DOWN进行处理（即最终返回true，用以表明处理了此事件），那么后续的事件是不会再发生了，如ACTION_MOVE,ACTION_UP等。
因此在WuZiQiPanel中的onTouchEvent方法中，如果要想实现能够处理ACTION_UP的话，对于ACTION_UP之前的事件都必须返回true(即都正常处理了)，这样才能正常的发生ACTION_UP事件。（之所以不能在此Demo中返回super.onTouchEvent(event)，是因为super.onTouchEvent(event)得到的为false，且WuZiQiPanel是最终的view了，无法再将事件传递下去得以处理，最终也就无疾而终了）

谈View中和onTouchEvent(MotionEvent event);

(4)如果遇到接电话、屏幕旋转等情况，当重新进入游戏的时候，会使得开始的棋子的布局都丢失，因此需要实现View的状态保存与恢复，即重写View中的onSaveInstanceState与onRestoreInstanceState方法。在实现着两个方法时，
一定不能忽略系统自带的`super.onSaveInstanceState()`的保存与恢复，
一定不能忽略系统自带的`super.onSaveInstanceState()`的保存与恢复，
一定不能忽略系统自带的`super.onSaveInstanceState()`的保存与恢复。
（在源码中有注释）重要的事情要说三遍！！！

并且，还需要注意，在把自定义的view添加进布局文件时需要设置id（在本次的Demo中设置为了`id_panel`）,因为Activity会自动调用重写的那两个方法去实现view中数据的保存与恢复，此时需要View的id作为依据。如果设置id是无法实现的。

---

好了，本次代码的核心部分就完了。接下来就是一个用于判断游戏结果的工具类以及MainActivity，以及用于处理游戏结果的回掉接口。

public class WuZiQiUtils {
    private static final int MAX_COUNT_IN_LINE=5;

    public static boolean checkFiveInLine(List<Point> piecesArray) {
        checkIsFull(piecesArray.size());

        for(Point p:piecesArray) {
            int x=p.x;
            int y=p.y;

            if(checkHorizontal(x,y,piecesArray)) return true;
            else if(checkVertical(x,y,piecesArray)) return true;
            else if(checkLeftDiagonal(x,y,piecesArray)) return true;
            else if(checkRightDiagonal(x,y,piecesArray)) return true;
        }
        return false;
    }

    /**
     * 判断棋盘是否已满
     */
    public static boolean checkIsFull(int number) {
        if(number==WuZiQiPanel.MAX_PIECES_NUMBER) {
            return true;
        }
        return false;
    }

    /**
     * 判断(x,y)点的棋子是否在横向上有5个相连的棋子
     */
    private static boolean checkHorizontal(int x, int y, List<Point> piecesArray) {
        int count=1;

        //往同一个方向最多只要判断四次

        //先判断左边的
        for(int i=1;i<MAX_COUNT_IN_LINE;i++) {
            if(piecesArray.contains(new Point(x-i,y))) {
                count++;
            } else {
                break;
            }
        }
        if(count==MAX_COUNT_IN_LINE) return true;

        //判断右边的
        for(int i=1;i<MAX_COUNT_IN_LINE;i++) {
            if(piecesArray.contains(new Point(x+i,y))) {
                count++;
            } else {
                break;
            }
        }
        if(count==MAX_COUNT_IN_LINE) return true;

        return false;
    }

    /**
     * 判断(x,y)点的棋子是否在纵向上有5个相连的棋子
     */
    private static boolean checkVertical(int x, int y, List<Point> piecesArray) {
        int count=1;

        for(int i=1;i<MAX_COUNT_IN_LINE;i++) {
            if(piecesArray.contains(new Point(x,y-i))) {
                count++;
            } else {
                break;
            }
        }
        if(count==MAX_COUNT_IN_LINE) return true;

        //判断右边的
        for(int i=1;i<MAX_COUNT_IN_LINE;i++) {
            if(piecesArray.contains(new Point(x,y+i))) {
                count++;
            } else {
                break;
            }
        }
        if(count==MAX_COUNT_IN_LINE) return true;

        return false;
    }

    /**
     * 判断(x,y)点的棋子是否在左斜(/)向上有5个相连的棋子
     */
    private static boolean checkLeftDiagonal(int x, int y, List<Point> piecesArray) {
        int count=1;

        for(int i=1;i<MAX_COUNT_IN_LINE;i++) {
            if(piecesArray.contains(new Point(x-i,y-i))) {
                count++;
            } else {
                break;
            }
        }
        if(count==MAX_COUNT_IN_LINE) return true;

        //判断右边的
        for(int i=1;i<MAX_COUNT_IN_LINE;i++) {
            if(piecesArray.contains(new Point(x+i,y+i))) {
                count++;
            } else {
                break;
            }
        }
        if(count==MAX_COUNT_IN_LINE) return true;

        return false;
    }

    /**
     * 判断(x,y)点的棋子是否在右斜(\)向上有5个相连的棋子
     */
    private static boolean checkRightDiagonal(int x, int y, List<Point> piecesArray) {
        int count=1;

        for(int i=1;i<MAX_COUNT_IN_LINE;i++) {
            if(piecesArray.contains(new Point(x-i,y+i))) {
                count++;
            } else {
                break;
            }
        }
        if(count==MAX_COUNT_IN_LINE) return true;

        //判断右边的
        for(int i=1;i<MAX_COUNT_IN_LINE;i++) {
            if(piecesArray.contains(new Point(x+i,y-i))) {
                count++;
            } else {
                break;
            }
        }
        if(count==MAX_COUNT_IN_LINE) return true;

        return false;
    }
}

public class MainActivity extends AppCompatActivity {
    private WuZiQiPanel mPanel;
    private Button mRestart;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        mPanel= (WuZiQiPanel) findViewById(R.id.id_panel);
        mRestart= (Button) findViewById(R.id.id_restart);
        mPanel.setListener(new ResultListener() {
            @Override
            public void showResult(int result) {
                String text=(result==WuZiQiPanel.DRAW)?("和棋!"):(result==WuZiQiPanel.WHITE_WON?"白棋胜利!":"黑棋胜利!");
//                Toast.makeText(MainActivity.this,text,Toast.LENGTH_SHORT).show();
                AlertDialog.Builder builder=new AlertDialog.Builder(MainActivity.this);
                builder.setIcon(android.R.drawable.ic_dialog_info);
                builder.setTitle("对战结果:");
                builder.setMessage(text);
                builder.setNegativeButton("重新开始", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        mPanel.restart();
                    }
                });
                builder.setPositiveButton("退出", new DialogInterface.OnClickListener() {
                    @Override
                    public void onClick(DialogInterface dialog, int which) {
                        finish();
                    }
                });
                builder.show();
            }
        });
        mRestart.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                mPanel.restart();
            }
        });
    }
}

public interface ResultListener {
    void showResult(int result);
}

这里可以不通过接口去实现游戏结果的处理而是直接在自定义的view中去实现，但是使用接口是为了更接近实际的开发，进行一定程度上解耦，并且也方便实现各种不同的处理方式。

---

源码：http://download.csdn.net/download/qq_22804827/9492649