技术开发 频道

不可或缺疯狂连连看开发实战教程

  【IT168技术】本程序将会使用一个RelativeLayout作为整体的界面布局元素,界面布局的上面是一个自定义组件,下面是一个水平排列的LinearLayout。

  程序清单:codes\18\Link\res\layout\main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android
="http://schemas.android.com/apk/res/android"
    android:layout_width
="fill_parent"
    android:layout_height
="fill_parent"
    android:background
="@drawable/room">
<!-- 游戏主界面的自定义组件 -->
<org.crazyit.link.view.GameView
    android:id
="@+id/gameView"
    android:layout_width
="fill_parent"
    android:layout_height
="fill_parent" />
<!-- 水平排列的LinearLayout -->
<LinearLayout
    android:layout_width
="fill_parent"
    android:layout_height
="fill_parent"
    android:orientation
="horizontal"
    android:layout_marginTop
="380px"
    android:background
="#1e72bb"
    android:gravity
="center">
<!-- 控制游戏开始的按钮 -->
<Button
    android:id
="@+id/startButton"
    android:layout_width
="wrap_content"
    android:layout_height
="wrap_content"
    android:background
="@drawable/button_selector" />
<!-- 显示游戏剩余时间的文本框 -->
<TextView
    android:id
="@+id/timeText"
    android:layout_width
="wrap_content"
    android:layout_height
="wrap_content"
    android:gravity
="center"
    android:textSize
="20dip"
    android:width
="150px"
    android:textColor
="#ff9" />
</LinearLayout>
</RelativeLayout>

  这个界面布局很简单,指定按钮的背景色时使用了@drawable/button_selector,这是一个在res\drawable目录下配置的StateListDrawable对象,配置文件代码如下。

  程序清单:codes\18\Link\res\drawable-mdpi\button_selector.xml

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

  其中GameView只是一个View的普通子类,开发了上面的界面布局文件之后,运行该程序将可以看到如图18.3所示的界面。


▲游戏界面显示

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

  为了开发这个GameView,本程序还提供了一个Piece类,一个Piece对象代表游戏界面上的一个方块,它除了封装方块上的图片之外,还需要封装该方块代表二维数组中的哪个元素;也需要封装它的左上角在游戏界面中X、Y坐标。图18.4示意了方块左上角的X、Y坐标的作用。


▲图18.4 方块的左上角

  方块左上角的X、Y坐标可决定它的绘制位置,GameView根据这两个坐标值绘制全部方块即可。下面是该程序中Piece类的代码。

  程序清单:codes\18\Link\src\org\crazyit\link\view\Piece.java

public class Piece
{
    
// 保存方块对象的所对应的图片
    
private PieceImage image;
    
// 该方块的左上角的x坐标
    
private int beginX;
    
// 该方块的左上角的y坐标
    
private int beginY;
    
// 该对象在Piece[][]数组中第一维的索引值
    
private int indexX;
    
// 该对象在Piece[][]数组中第二维的索引值
    
private int indexY;
    
// 只设置该Piece对象在棋盘数组中的位置
    
public Piece(int indexX , int indexY)
    {
        this.indexX
= indexX;
        this.indexY
= indexY;
    }
    
public int getBeginX()
    {
        return beginX;
    }
    
public void setBeginX(int beginX)
    {
        this.beginX
= beginX;
    }
    
// 下面省略了各属性的setter和getter方法
    ...
    
// 判断两个Piece上的图片是否相同
    
public boolean isSameImage(Piece other)
    {
        
if (image == null)
        {
            
if (other.image != null)
                return
false;
        }
        
// 只要Piece封装图片ID相同,即可认为两个Piece相等
        return image.getImageId()
== other.image.getImageId();
    }
}

  上面的Piece类中封装的PieceImage代表了该方块上的图片,但此处并未直接使用Bitmap对象来代表方块上的图片——因为我们需要使用PieceImage来封装两个信息:

  1、Bitmap对象。

  2、图片资源的ID。

  其中Bitmap对象用于在游戏界面上绘制方块;而图片资源的ID则代表了该Piece对象的标识,当两个Piece所封装的图片资源的ID相等时,即可认为这两个Piece上的图片相同。如以上程序中粗体字代码所示。

  下面是PieceImage类的代码。

  程序清单:codes\18\Link\src\org\crazyit\link\view\PieceImage.java

public class PieceImage
{
    
private Bitmap image;
    
private int imageId;
    
// 有参数的构造器
    
public PieceImage(Bitmap image, int imageId)
    {
        super();
        this.image
= image;
        this.imageId
= imageId;
    }
    
// 省略了各属性的setter和getter方法
    ...
}

疯狂连连看开发实战之:页面布局

 

0
相关文章