转载请标明出处：，本文出自：【张鸿洋的博客】1、概述
继2048之后，今天给大家带来一个拼图游戏，当然了不是很传统那个缺一块的拼图，那游戏我不会玩~~所有我们换个方式玩拼图，怎么玩呢，把图片且成很多份，点击交换拼成一张完整的；这样关卡也很容易设计，3*3；4*4；5*5；6*6；…一直下去….
博客产生的原因是，没事在网上逛看到一个图片切片的辅助类，类很简单，上面说了一句，如果做拼图游戏的话可以用到，然后，我们就用到了~~
至于效果是这样的：
加了个切换动画，效果还是不错的~~其实游戏就是自定义了一个控件，下面我们开始自定义之旅~~
2、游戏的设计
首先我们分析下如何设计这款游戏：
1、我们需要一个容器，可以放这些图片的块块，为了方便，我们准备使用RelativeLayout配合addRule实现
2、每个图片的块块，我们准备使用ImageView
3、点击交换，我们准备使用传统的TranslationAnimation来实现
有了初步的设计，感觉这游戏so easy~
3、游戏布局的实现
首先，我们准备实现能够把一张图片，切成n*n份，放在指定的位置；
我们只需要设置n这个数字，然后根据布局的宽或者高其中的小值，除以n，减去一些边距就可以得到我们ImageView的宽和高了~~
1、构造方法：/** * 设置Item的数量n*n；默认为3 */private int mColumn = 3;/** * 布局的宽度 */private int mWidth;/** * 布局的padding */private int mPadding;/** * 存放所有的Item */private ImageView[] mGamePintuItems;/** * Item的宽度 */private int mItemWidth;/** * Item横向与纵向的边距 */private int mMargin = 3;/** * 拼图的图片 */private Bitmap mBitmap;/** * 存放切完以后的图片bean */private List<ImagePiece> mItemBitmaps;private boolean once;public GamePintuLayout(Context context){this(context, null);}public GamePintuLayout(Context context, AttributeSet attrs){this(context, attrs, 0);}public GamePintuLayout(Context context, AttributeSet attrs, int defStyle){super(context, attrs, defStyle);mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,mMargin, getResources().getDisplayMetrics());// 设置Layout的内边距，四边一致，设置为四内边距中的最小值mPadding = min(getPaddingLeft(), getPaddingTop(), getPaddingRight(),getPaddingBottom());}构造方法里面，我们得到把设置的margin值转化为dp；获得布局的padding值；整体是个正方形，所以我们取padding四个方向中的最小值；
至于margin，作为Item之间的横向与纵向的间距，你喜欢的话可以抽取为自定义属性~~
2、onMeasure@Overrideprotected void onMeasure(int widthMeasureSpec, int heightMeasureSpec){super.onMeasure(widthMeasureSpec, heightMeasureSpec);// 获得游戏布局的边长mWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());if (!once){initBitmap();initItem();}once = true;setMeasuredDimension(mWidth, mWidth);}onMeasure里面主要就是获得到布局的宽度，然后进行图片的准备，以及初始化我们的Item，为Item设置宽度和高度
initBitmap自然就是准备图片了：
private void initBitmap(){if (mBitmap == null)mBitmap = BitmapFactory.decodeResource(getResources(),R.drawable.aa);mItemBitmaps = ImageSplitter.split(mBitmap, mColumn);Collections.sort(mItemBitmaps, new Comparator<ImagePiece>(){@Overridepublic int compare(ImagePiece lhs, ImagePiece rhs){return Math.random() > 0.5 ? 1 : -1;}});}我们这里如果没有设置mBitmap就准备一张备用图片，然后调用ImageSplitter.split将图片切成n * n 返回一个List<ImagePiece>
切完以后，我们需要将顺序打乱，所以我们调用了sort方法，至于比较器，我们使用random随机比较大小~~这样我们就完成了我们的乱序操作，赞不赞~~
public class ImageSplitter{/** * 将图片切成 , piece *piece * * @param bitmap * @param piece * @return */public static List<ImagePiece> split(Bitmap bitmap, int piece){List<ImagePiece> pieces = new ArrayList<ImagePiece>(piece * piece);int width = bitmap.getWidth();int height = bitmap.getHeight();Log.e("TAG", "bitmap Width = " + width + " , height = " + height);int pieceWidth = Math.min(width, height) / piece;for (int i = 0; i < piece; i++){for (int j = 0; j < piece; j++){ImagePiece imagePiece = new ImagePiece();imagePiece.index = j + i * piece;int xValue = j * pieceWidth;int yValue = i * pieceWidth;imagePiece.bitmap = Bitmap.createBitmap(bitmap, xValue, yValue,pieceWidth, pieceWidth);pieces.add(imagePiece);}}return pieces;}}public class ImagePiece{public int index = 0;public Bitmap bitmap = null;}没撒说的就是一个根据宽度高度，和n，来切图保存的过程~~
ImagePiece保存的图片以及索引~~话说这两个类还是我无意中在网上发现的~~
图片到此就准备好了，现在看Item的生成已经设置宽高，即initItems
private void initItem(){// 获得Item的宽度int childWidth = (mWidth – mPadding * 2 – mMargin * (mColumn – 1))/ mColumn;mItemWidth = childWidth;mGamePintuItems = new ImageView[mColumn * mColumn];// 放置Itemfor (int i = 0; i < mGamePintuItems.length; i++){ImageView item = new ImageView(getContext());item.setOnClickListener(this);item.setImageBitmap(mItemBitmaps.get(i).bitmap);mGamePintuItems[i] = item;item.setId(i + 1);item.setTag(i + "_" + mItemBitmaps.get(i).index);RelativeLayout.LayoutParams lp = new LayoutParams(mItemWidth,mItemWidth);// 设置横向边距,不是最后一列if ((i + 1) % mColumn != 0){lp.rightMargin = mMargin;}// 如果不是第一列if (i % mColumn != 0){lp.addRule(RelativeLayout.RIGHT_OF,//mGamePintuItems[i – 1].getId());}// 如果不是第一行，//设置纵向边距，非最后一行if ((i + 1) > mColumn){lp.topMargin = mMargin;lp.addRule(RelativeLayout.BELOW,//mGamePintuItems[i – mColumn].getId());}addView(item, lp);}}可以看到我们的Item宽的计算：childWidth = (mWidth – mPadding * 2 – mMargin * (mColumn – 1) )/ mColumn;
容器的宽度，除去自己的内边距，除去Item间的间距，然后除以Item一行的个数就得到了Item的宽~~
接下来，就是遍历生成Item，根据他们的位置设置Rule，自己仔细看下注释~~
注意两点：
我们为Item设置了setOnClickListener，这个当然，因为我们的游戏就是点Item么~
还有我们为Item设置了Tag：item.setTag(i + "_" + mItemBitmaps.get(i).index);
tag里面存放了index，也就是正确的位置；还有i，i 可以帮助我们在mItemBitmaps找到当前的Item的图片：（mItemBitmaps.get(i).bitmap）
到此，我们游戏的布局的代码就结束了~~~
当你见过了世界上最美丽的风景，
