我的Android进阶之旅------>Android疯狂连连看游戏的实现之开发游戏界面(二)

连连看的游戏界面十分简单，大致可以分为两个区域：

• 游戏主界面区
• 控制按钮和数据显示区

1、开发界面布局

本程序使用一个RelativeLayout作为整体的界面布局元素，界面布局上面是一个自定义组件，下面是一个水平排列的LinearLayout。

下面是本程序的布局文件：/res/layout/main.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="utf-8"?>  
2. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"  
3.     android:layout_width="fill_parent" android:layout_height="fill_parent"  
4.     android:background="@drawable/room">  
5.     <!-- 游戏主界面的自定义组件 -->  
6.     <cn.oyp.link.view.GameView  
7.         android:id="@+id/gameView" android:layout_width="fill_parent"  
8.         android:layout_height="fill_parent" />  
9.     <!-- 水平排列的LinearLayout -->  
10.     <LinearLayout android:layout_width="fill_parent"  
11.         android:layout_height="fill_parent" android:orientation="horizontal"  
12.         android:layout_marginTop="380px" android:background="#1e72bb"  
13.         android:gravity="center">  
14.         <!-- 控制游戏开始的按钮,该按钮的背景图片可以根据按钮的状态改变 -->  
15.         <Button android:id="@+id/startButton" android:layout_width="wrap_content"  
16.             android:layout_height="wrap_content" android:background="@drawable/button_selector" />  
17.         <!-- 显示游戏剩余时间的文本框 -->  
18.         <TextView android:id="@+id/timeText" android:layout_width="wrap_content"  
19.             android:layout_height="wrap_content" android:gravity="center"  
20.             android:textSize="20dip" android:width="150px" android:textColor="#ff9" />  
21.     </LinearLayout>  
22. </RelativeLayout>  

其中指定按钮背景色使用了@drawable/button_selector,这是在res/drawable目录下配置的StateListDrawable对象，配置文件代码如下：res/drawable/button_selector.xml

[html]  view plain copy

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <selector xmlns:android="http://schemas.android.com/apk/res/android">  
3.     <!-- 指定按钮按下时的图片 -->  
4.     <item android:state_pressed="true" android:drawable="@drawable/start_down" />  
5.     <!-- 指定按钮松开时的图片 -->  
6.     <item android:state_pressed="false" android:drawable="@drawable/start" />  
7. </selector>  

2、开发游戏界面组件

本游戏采用了一个自定义View:GameView，它从View的基类派生出来，这个自定义View的功能就是根据游戏状态来描绘游戏界面上的全部方块。

为了开发这个GameView，本程序还提供了一个Piece类，一个Piece对象代表游戏界面中的一个方块，它除了封装了方块上的图片之外，还需要封装该方块代表二维数组中的那个元素，也需要封装它的左上角在游戏界面中的X、Y坐标,这X、Y坐标可以决定方块的绘制位置，GameView根据这两个坐标值绘制全部方块即可。

下面是Piece类的代码：cn\oyp\link\view\Piece.java

[java]  view plain copy

1. package cn.oyp.link.view;  
2.   
3. import android.graphics.Point;  
4.   
5. /** 
6.  * 连连看游戏中的方块对象 <br/> 
7.  * <br/> 
8.  * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/> 
9.  */  
10. public class Piece {  
11.     /** 
12.      * 保存方块对象的所对应的图片 
13.      */  
14.     private PieceImage pieceImage;  
15.     /** 
16.      * 该方块的左上角的x坐标 
17.      */  
18.     private int beginX;  
19.     /** 
20.      * 该方块的左上角的y座标 
21.      */  
22.     private int beginY;  
23.     /** 
24.      * 该对象在Piece[][]数组中第一维的索引值 
25.      */  
26.     private int indexX;  
27.     /** 
28.      * 该对象在Piece[][]数组中第二维的索引值 
29.      */  
30.     private int indexY;  
31.   
32.     /** 
33.      * 设置该Piece对象在数组中的索引值 
34.      *  
35.      * @param indexX 
36.      *            该方块的左上角的x坐标 
37.      * @param indexY 
38.      *            该方块的左上角的y座标 
39.      */  
40.     public Piece(int indexX, int indexY) {  
41.         this.indexX = indexX;  
42.         this.indexY = indexY;  
43.     }  
44.   
45.     /** 
46.      * 获取该Piece的中心位置 
47.      *  
48.      * @return 中心点的坐标对象Point 
49.      */  
50.     public Point getCenter() {  
51.         return new Point(getBeginX() + getPieceImage().getImage().getWidth()  
52.                 / 2, getBeginY() + getPieceImage().getImage().getHeight() / 2);  
53.     }  
54.   
55.     /** 
56.      * 判断两个Piece上的图片是否相同 
57.      *  
58.      * @param otherPieceImage 
59.      *            另外的一个Piece对象 
60.      * @return 是否相同 
61.      */  
62.     public boolean isSameImage(Piece otherPieceImage) {  
63.         if (pieceImage == null) {  
64.             if (otherPieceImage.pieceImage != null)  
65.                 return false;  
66.         }  
67.         // 当两个Piece封装图片资源ID相同时，即可认为这两个Piece上的图片相同。  
68.         return pieceImage.getImageId() == otherPieceImage.pieceImage  
69.                 .getImageId();  
70.     }  
71.   
72.     /** 
73.      * @return 该方块的左上角的X坐标 
74.      */  
75.     public int getBeginX() {  
76.         return beginX;  
77.     }  
78.   
79.     /** 
80.      * 设置该方块的左上角的X坐标 
81.      *  
82.      * @param beginX 
83.      */  
84.     public void setBeginX(int beginX) {  
85.         this.beginX = beginX;  
86.     }  
87.   
88.     /** 
89.      * @return 该方块的左上角的Y座标 
90.      */  
91.     public int getBeginY() {  
92.         return beginY;  
93.     }  
94.   
95.     /** 
96.      * 设置该方块的左上角的Y坐标 
97.      *  
98.      * @param beginY 
99.      */  
100.     public void setBeginY(int beginY) {  
101.         this.beginY = beginY;  
102.     }  
103.   
104.     /** 
105.      * @return 该对象在Piece[][]数组中第一维的索引值 
106.      */  
107.     public int getIndexX() {  
108.         return indexX;  
109.     }  
110.   
111.     /** 
112.      * 设置该对象在Piece[][]数组中第一维的索引值 
113.      *  
114.      * @param indexX 
115.      */  
116.     public void setIndexX(int indexX) {  
117.         this.indexX = indexX;  
118.     }  
119.   
120.     /** 
121.      * @return 该对象在Piece[][]数组中第二维的索引值 
122.      */  
123.     public int getIndexY() {  
124.         return indexY;  
125.     }  
126.   
127.     /** 
128.      * 设置该对象在Piece[][]数组中第二维的索引值 
129.      *  
130.      * @param indexY 
131.      */  
132.     public void setIndexY(int indexY) {  
133.         this.indexY = indexY;  
134.     }  
135.   
136.     /** 
137.      * @return 保存方块对象的所对应的图片 
138.      */  
139.     public PieceImage getPieceImage() {  
140.         return pieceImage;  
141.     }  
142.   
143.     /** 
144.      * 设置保存方块对象的所对应的图片 
145.      *  
146.      * @param pieceImage 
147.      */  
148.     public void setPieceImage(PieceImage pieceImage) {  
149.         this.pieceImage = pieceImage;  
150.     }  
151. }  

上面Piece类中封装的PieceImage代表了该方块上的图片，它封装了两个信息：Bitmap对象和图片资源ID。其中Bitmap对象用于在游戏界面上绘制方块；而图片资源ID则表示该Piece对象的标识，当两个Piece所封装的图片资源ID相等时，即可认为这两个Piece上的图片相同。

下面是PieceImage的代码：cn\oyp\link\view\PieceImage.java

[java]  view plain copy

1. package cn.oyp.link.view;  
2.   
3. import android.graphics.Bitmap;  
4.   
5. /** 
6.  * 封装图片ID与图片本身的工具类 <br/> 
7.  * <br/> 
8.  * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/> 
9.  */  
10. public class PieceImage {  
11.     /** 
12.      * 图片 
13.      */  
14.     private Bitmap image;  
15.     /** 
16.      * 图片资源ID 
17.      */  
18.     private int imageId;  
19.   
20.     /** 
21.      * 构造函数 
22.      *  
23.      * @param image 
24.      *            图片 
25.      * @param imageId 
26.      *            图片ID 
27.      */  
28.     public PieceImage(Bitmap image, int imageId) {  
29.         super();  
30.         this.image = image;  
31.         this.imageId = imageId;  
32.     }  
33.   
34.     /** 
35.      * @return 图片 
36.      */  
37.     public Bitmap getImage() {  
38.         return image;  
39.     }  
40.   
41.     /** 
42.      * 设置图片 
43.      *  
44.      * @param image 
45.      */  
46.     public void setImage(Bitmap image) {  
47.         this.image = image;  
48.     }  
49.   
50.     /** 
51.      * @return 图片ID 
52.      */  
53.     public int getImageId() {  
54.         return imageId;  
55.     }  
56.   
57.     /** 
58.      * 设置图片ID 
59.      *  
60.      * @param imageId 
61.      */  
62.     public void setImageId(int imageId) {  
63.         this.imageId = imageId;  
64.     }  
65. }  

GameView主要就是根据游戏的状态来绘制界面上的方块，GameView继承了View组件，重写了View组件上的onDraw(Canvas canvas)方法，重写该方法主要就是绘制游戏里剩余的方块，除此之外，它还复杂绘制连接方块的连接线。GameView的代码如下：cn\oyp\link\view\GameView.java

[java]  view plain copy

1. package cn.oyp.link.view;  
2.   
3. import java.util.List;  
4.   
5. import android.content.Context;  
6. import android.graphics.Bitmap;  
7. import android.graphics.Canvas;  
8. import android.graphics.Color;  
9. import android.graphics.Paint;  
10. import android.graphics.Point;  
11. import android.util.AttributeSet;  
12. import android.view.View;  
13. import cn.oyp.link.board.GameService;  
14. import cn.oyp.link.utils.ImageUtil;  
15. import cn.oyp.link.utils.LinkInfo;  
16.   
17. /** 
18.  * 连连看游戏中的游戏主界面 <br/> 
19.  * <br/> 
20.  * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/> 
21.  */  
22. public class GameView extends View {  
23.     /** 
24.      * 游戏逻辑的实现类 
25.      */  
26.     private GameService gameService;  
27.     /** 
28.      * 保存当前已经被选中的方块 
29.      */  
30.     private Piece selectedPiece;  
31.     /** 
32.      * 连接信息对象 
33.      */  
34.     private LinkInfo linkInfo;  
35.     /** 
36.      * 画笔Paint 
37.      */  
38.     private Paint paint;  
39.     /** 
40.      * 选中标识的图片对象 
41.      */  
42.     private Bitmap selectImage;  
43.   
44.     /** 
45.      * 构造方法 
46.      *  
47.      * @param context 
48.      * @param attrs 
49.      */  
50.     public GameView(Context context, AttributeSet attrs) {  
51.         super(context, attrs);  
52.         this.paint = new Paint();  
53.         // 设置连接线的颜色  
54.         this.paint.setColor(Color.RED);  
55.         // 设置连接线的粗细  
56.         this.paint.setStrokeWidth(3);  
57.         // 初始化被选中的图片  
58.         this.selectImage = ImageUtil.getSelectImage(context);  
59.     }  
60.   
61.     /** 
62.      * 设置连接信息对象 
63.      *  
64.      * @param linkInfo 
65.      */  
66.     public void setLinkInfo(LinkInfo linkInfo) {  
67.         this.linkInfo = linkInfo;  
68.     }  
69.   
70.     /** 
71.      * 设置当前选中方块 
72.      *  
73.      * @param piece 
74.      */  
75.     public void setSelectedPiece(Piece piece) {  
76.         this.selectedPiece = piece;  
77.     }  
78.   
79.     /** 
80.      * 设置游戏逻辑的实现类 
81.      *  
82.      * @param gameService 
83.      */  
84.     public void setGameService(GameService gameService) {  
85.         this.gameService = gameService;  
86.     }  
87.   
88.     /** 
89.      * 绘制图形的方法 
90.      */  
91.     @Override  
92.     protected void onDraw(Canvas canvas) {  
93.         super.onDraw(canvas);  
94.         if (this.gameService == null)  
95.             return;  
96.         Piece[][] pieces = gameService.getPieces();  
97.         if (pieces != null) {  
98.             // 遍历pieces二维数组  
99.             for (int i = 0; i < pieces.length; i++) {  
100.                 for (int j = 0; j < pieces[i].length; j++) {  
101.                     // 如果二维数组中该元素不为空（即有方块），将这个方块的图片画出来  
102.                     if (pieces[i][j] != null) {  
103.                         // 得到这个Piece对象  
104.                         Piece piece = pieces[i][j];  
105.                         // 根据方块左上角X、Y座标绘制方块  
106.                         canvas.drawBitmap(piece.getPieceImage().getImage(),  
107.                                 piece.getBeginX(), piece.getBeginY(), null);  
108.                     }  
109.                 }  
110.             }  
111.         }  
112.         // 如果当前对象中有linkInfo对象, 即连接信息  
113.         if (this.linkInfo != null) {  
114.             // 绘制连接线  
115.             drawLine(this.linkInfo, canvas);  
116.             // 处理完后清空linkInfo对象  
117.             this.linkInfo = null;  
118.         }  
119.         // 画选中标识的图片  
120.         if (this.selectedPiece != null) {  
121.             canvas.drawBitmap(this.selectImage, this.selectedPiece.getBeginX(),  
122.                     this.selectedPiece.getBeginY(), null);  
123.         }  
124.     }  
125.   
126.     /** 
127.      * 根据LinkInfo绘制连接线的方法。 
128.      *  
129.      * @param linkInfo 
130.      *            连接信息对象 
131.      * @param canvas 
132.      *            画布 
133.      */  
134.     private void drawLine(LinkInfo linkInfo, Canvas canvas) {  
135.         // 获取LinkInfo中封装的所有连接点  
136.         List<Point> points = linkInfo.getLinkPoints();  
137.         // 依次遍历linkInfo中的每个连接点  
138.         for (int i = 0; i < points.size() - 1; i++) {  
139.             // 获取当前连接点与下一个连接点  
140.             Point currentPoint = points.get(i);  
141.             Point nextPoint = points.get(i + 1);  
142.             // 绘制连线  
143.             canvas.drawLine(currentPoint.x, currentPoint.y, nextPoint.x,  
144.                     nextPoint.y, this.paint);  
145.         }  
146.     }  
147.   
148.     // 开始游戏方法  
149.     public void startGame() {  
150.         this.gameService.start();  
151.         this.postInvalidate();  
152.     }  
153. }  

LinkInfo是一个非常简单的工具类，它用于封装两个方块之间的连接信息：其实就是封装了一个List,List里面保存了连接线所需要经过的点。两个方块之间最多只能用3条线段相连，也就是说最多只能2个拐点，加上这两个方块的中心，方块的连接信息最多只需要4个连接点。因此，LinkInfo最多需要封装4个连接点，最少需要封装2个连接点。

下面是LinkInfo的代码：cn\oyp\link\utils.LinkInfo.java

[java]  view plain copy

1. package cn.oyp.link.utils;  
2.   
3. import java.util.List;  
4. import java.util.ArrayList;  
5.   
6. import android.graphics.Point;  
7.   
8. /** 
9.  * 连接信息类<br/> 
10.  * <br/> 
11.  * 关于本代码介绍可以参考一下博客: <a href="http://blog.csdn.net/ouyang_peng">欧阳鹏的CSDN博客</a> <br/> 
12.  */  
13. public class LinkInfo {  
14.     /** 
15.      *  创建一个集合用于保存连接点 
16.      */  
17.     private List<Point> points = new ArrayList<Point>();  
18.   
19.     /** 
20.      *  提供第一个构造器, 表示两个Point可以直接相连, 没有转折点 
21.      * @param p1 
22.      * @param p2 
23.      */  
24.     public LinkInfo(Point p1, Point p2) {  
25.         // 加到集合中去  
26.         points.add(p1);  
27.         points.add(p2);  
28.     }  
29.   
30.     /** 
31.      *  提供第二个构造器, 表示三个Point可以相连, p2是p1与p3之间的转折点 
32.      * @param p1 
33.      * @param p2 
34.      * @param p3 
35.      */  
36.     public LinkInfo(Point p1, Point p2, Point p3) {  
37.         points.add(p1);  
38.         points.add(p2);  
39.         points.add(p3);  
40.     }  
41.   
42.     /** 
43.      *  提供第三个构造器, 表示四个Point可以相连, p2, p3是p1与p4的转折点 
44.      * @param p1 
45.      * @param p2 
46.      * @param p3 
47.      * @param p4 
48.      */  
49.     public LinkInfo(Point p1, Point p2, Point p3, Point p4) {  
50.         points.add(p1);  
51.         points.add(p2);  
52.         points.add(p3);  
53.         points.add(p4);  
54.     }  
55.   
56.     /** 
57.      * @return 连接集合 
58.      */  
59.     public List<Point> getLinkPoints() {  
60.         return points;  
61.     }  
62. }