学习制作拼图小游戏总结

�hyman的拼图小游戏传送

类的简介

---

---

ImagePiece类

public class ImagePiece {
private int index;
private Bitmap bitmap;

public int getIndex() {
    return index;
}

public void setIndex(int index) {
    this.index = index;
}

public Bitmap getBitmap() {
    return bitmap;
}

public void setBitmap(Bitmap bitmap) {
    this.bitmap = bitmap;
}

public ImagePiece(int index, Bitmap bitmap) {
    this.bitmap = bitmap;
    this.index = index;
}
public  ImagePiece(){}

}

没太多代码很简单，包含两个属性以及对应的Getter和Setter

其中变量index的意义是图片在原来完整图片中的固定位置

---

---

ImageSplitterUtils切图工具类

public class ImageSplitterUtils {

public static List<ImagePiece> splitte(Bitmap bitmap, int piece) {
    //对象集合
    List<ImagePiece> imagePieces = new ArrayList<ImagePiece>();
    //得到宽高
    int width = bitmap.getWidth();
    int height = bitmap.getHeight();
    //取宽高的最小值做小图片的宽
    int piecewidth = Math.min(width, height) / piece;
    //开始切图
    for (int i = 0; i < piece; i++) {
        for (int j = 0; j < piece; j++) {
            //new一个imagePiece对象
            ImagePiece imagePiece = new ImagePiece();
            //记下图片的顺序
            imagePiece.setIndex(j + i * piece);
            //每个小块的坐标
            int x = j * piecewidth;
            int y = i * piecewidth;
            //设置图片
            imagePiece.setBitmap(Bitmap.createBitmap(bitmap, x, y, piecewidth, piecewidth));
            //加到集合中
            imagePieces.add(imagePiece);
        }
    }
    return imagePieces;
}
}

静态的切图工具方法splitte：传入要切的Bitmap参数，以及传入切成多少宫格的数字参数。

imagePiece.setIndex(j + i * piece);

int x = j * piecewidth;
int y = i * piecewidth;

index, x ,y 按照规律变化，不难总结；
假设将图片切成切成4x4的，原图片宽高为800
如下图：

imagePiece.setBitmap(Bitmap.createBitmap(bitmap, x, y, piecewidth, piecewidth));

将传入的Bitmap 按照坐标x，y以及piecewidth进行Bitmap.createBitmap操作

imagePieces.add(imagePiece);
return imagePieces;

并且将每个小块bitmap 设置给每个imagePiece对象，然后imagePiece对象添加到集合中，将此集合返回。

至此完成图片切割。

---

---

GameLayout游戏逻辑实现类

private void initBitmap() {
    if (mBitmap == null) {
        mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.image);
    }
    //调用静态工具类将Bitmap传进去，初始分割数目传进去，返回一个集合
    mItemBitmaps = ImageSplitterUtils.splitte(mBitmap, mColumn);
    // 使用sort完成我们的乱序
    Collections.sort(mItemBitmaps, new Comparator<ImagePiece>() {
        @Override
        public int compare(ImagePiece a, ImagePiece b) {
            return Math.random() > 0.5 ? 1 : -1;
        }
    });

}

首先看�初始化方法，首先是判断mBitmap是否为空，然后
BitmapFactory.decodeResource(getResources(),R.drawable.image); 找到资源接着调用静态方法ImageSplitterUtils.splitte(mBitmap, mColumn);进行切割并返回一个imagePiece对象的集合。

---

      public int compare(ImagePiece a, ImagePiece b) {
      return ;
        }

接着使用Collections.sort将将集合内 原本按照顺序的对象实现乱序
对于Comparator接口的重写 此方法的主要排序原理
关于Collections.sort详解
将a与b比较若

a > b 返回1
a < b 返回-1
a = b 返回0

这里取一个随机数
Math.random() > 0.5 ? 1 : -1;
在排序过程中就无法按照正常方式排序，而是根据返回值进行胡乱排序从而实现乱序
下面利用断点查看乱序效果
乱序前

乱序后

很明显集合中的元素index已经乱序

---

接着就是将每小个图片排列位置

 private void initItem() {
    //每个图片的宽度
    mItemWidth = (mWidth - mMargin * (mColumn - 1)) / mColumn;
    //设置ImageView数组元素数目；
    mGameImgItems = new ImageView[mColumn * mColumn];
    // 生成我们的Item，设置Rule
    for (int i = 0; i < mGameImgItems.length; i++) {
        ImageView item = new ImageView(getContext());
        item.setOnClickListener(this);
        item.setImageBitmap(mItemBitmaps.get(i).getBitmap());
        mGameImgItems[i] = item;
        item.setId(i + 1);
        // 在Item的tag中存储了i 以及index
        item.setTag(i + "_" + mItemBitmaps.get(i).getIndex());
        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(mItemWidth, mItemWidth);
        // 设置Item间横向间隙，通过rightMargin
        // 不是最后一列
        if ((i + 1) % mColumn != 0) {
            lp.rightMargin = mMargin;
        }
        // 不是第一列
        if (i % mColumn != 0) {
            lp.addRule(RelativeLayout.RIGHT_OF, mGameImgItems[i - 1].getId());
        }
        // 如果不是第一行 , 设置topMargin和rule
        if ((i + 1) > mColumn) {
            lp.topMargin = mMargin;
            lp.addRule(RelativeLayout.BELOW, mGameImgItems[i - mColumn].getId());
        }
        addView(item, lp);
    }
}

ItemWidth = (mWidth - mMargin * (mColumn - 1)) / mColumn;

关卡在往下走的时候，宫格的数目的mColumn也在增加，每张小图的宽高在减小，�不难得出上面的规律。

ImageView item = new ImageView(getContext()); item.setOnClickListener(this); item.setImageBitmap(mItemBitmaps.get(i).getBitmap()); mGameImgItems[i] = item;

将集合中按集合的顺序取出并将Bitmap设置给ImageView对象 ，并给item添加点击事件，接着放在一个ImageView数组中。
item.setId(i + 1);
给每个item设置一个id

        // 不是最后一列
        if ((i + 1) % mColumn != 0) {
            lp.rightMargin = mMargin;
        }
        // 不是第一列
        if (i % mColumn != 0) {
            lp.addRule(RelativeLayout.RIGHT_OF, mGameImgItems[i - 1].getId());
        }
        // 如果不是第一行 , 设置topMargin和rule
        if ((i + 1) > mColumn) {
            lp.topMargin = mMargin;
            lp.addRule(RelativeLayout.BELOW, mGameImgItems[i - mColumn].getId());

这段代码也不复杂给每个item设置布局参数，

将小图片排列 排列后的ImageView数组

addView(item, lp);
最后将每个item都添加到view中。

未完......