Android实现美女拼图游戏详解
先来看看效果：
图片切分很多份，点击交换拼成一张完整的；这样关卡也很容易设计，3 3；4 4；5 5；6 6；一直下去
加了个切换动画，效果还是不错的，其实游戏就是自定义了一个控件，下面我们开始自定义之旅。
游戏的设计
首先我们分析下如何设计这款游戏：
1、我们需要一个容器，可以放这些图片的块块，为了方便，我们准备使用relativelayout配合addrule实现
2、每个图片的块块，我们准备使用imageview
3、点击交换，我们准备使用传统的translationanimation来实现
有了初步的设计，感觉这游戏so easy~
游戏布局的实现
首先，我们准备实现能够把一张图片，切成n*n份，放在指定的位置；我们只需要设置n这个数字，然后根据布局的宽或者高其中的小值，除以n，减去一些边距就可以得到我们imageview的宽和高了~~
构造方法
/**
* 设置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);
}
/**
* 构造函数，用来初始化
* @param context the context
* @param attrs the attrs
* @param defstyle the def style
* @author qiu 博客：www.qiuchengjia.cn 时间：2016-09-12
*/
public gamepintulayout(context context, attributeset attrs, int defstyle) {
super(context, attrs, defstyle);
//把设置的margin值转换为dp
mmargin = (int) typedvalue.applydimension(typedvalue.complex_unit_dip,
mmargin, getresources().getdisplaymetrics());
// 设置layout的内边距，四边一致，设置为四内边距中的最小值
mpadding = min(getpaddingleft(), getpaddingtop(), getpaddingright(),
getpaddingbottom());
}
构造方法里面，我们得到把设置的margin值转化为dp；获得布局的padding值；整体是个正方形，所以我们取padding四个方向中的最小值；至于margin，作为item之间的横向与纵向的间距，你喜欢的话可以抽取为自定义属性~~
onmeasure
/**
* 用来设置设置自定义的view的宽高，
* @param widthmeasurespec the width measure spec
* @param heightmeasurespec the height measure spec
* @author qiu 博客：www.qiuchengjia.cn 时间：2016-09-12
*/
@override
protected 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自然就是准备图片了：
/**
* 初始化bitmap
* @author qiu 博客：www.qiuchengjia.cn 时间：2016-09-12
*/
private void initbitmap() {
if (mbitmap == null)
mbitmap = bitmapfactory.decoderesource(getresources(),
r.drawable.aa);
mitembitmaps = imagesplitter.split(mbitmap, mcolumn);
//对图片进行排序
collections.sort(mitembitmaps, new comparator<imagepiece>(){
@override
public int compare(imagepiece lhs, imagepiece rhs){
//我们使用random随机比较大小
return math.random() > 0.5 ? 1 : -1;
}
});
}
我们这里如果没有设置mbitmap就准备一张备用图片，然后调用imagesplitter.split将图片切成n * n 返回一个list<imagepiece> 。切完以后，我们需要将顺序打乱，所以我们调用了sort方法，至于比较器，我们使用random随机比较大小，这样我们就完成了我们的乱序操作，赞不赞~~
/**
* description: 图片切片类
* data：2016/9/11-19:53
* blog：www.qiuchengjia.cn
* author: qiu
*/
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;
}
}
/**
* description: 图片bean
* data：2016/9/11-19:54
* blog：www.qiuchengjia.cn
* author: qiu
*/
public class imagepiece
{
public int index = 0;
public bitmap bitmap = null;
}
总说的就是一个根据宽度高度，和n，来切图保存的过程~~
imagepiece保存的图片以及索引，话说这两个类还是我无意中在网上发现的~~
图片到此就准备好了，现在看item的生成已经设置宽高，即inititems
/**
* 初始化每一个item
* @author qiu 博客：www.qiuchengjia.cn 时间：2016-09-12
*/
private void inititem() {
// 获得item的宽度
int childwidth = (mwidth - mpadding * 2 - mmargin *
(mcolumn - 1)) / mcolumn;
mitemwidth = childwidth;
mgamepintuitems = new imageview[mcolumn * mcolumn];
// 放置item
for (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，自己仔细看下注释~~
注意两点：
1、我们为item设置了setonclicklistener，这个当然，因为我们的游戏就是点item么~
2、还有我们为item设置了tag：item.settag(i + "_" + mitembitmaps.get(i).index);
tag里面存放了index，也就是正确的位置；还有i，i 可以帮助我们在mitembitmaps找到当前的item的图片： （mitembitmaps.get(i).bitmap）
到此，我们游戏的布局的代码就结束了~~~
然后我们在布局文件里面声明下：
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="fill_parent" android:layout_height="fill_parent" > <game.qiu.com.beautygame.gamepintulayout android:id="@+id/id_gameview" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_centerinparent="true" android:padding="5dp" > </game.qiu.com.beautygame.gamepintulayout> </relativelayout>
activity里面记得设置这个布局~~
现在的效果是：
游戏的切换效果
初步的切换
还记得我们都给item添加了onclick的监听么~~
现在我们需要实现，点击两个item，他们的图片能够发生交换~
那么，我们需要两个成员变量来存储这两个item，然后再去交换
/**
* 记录第一次点击的imageview
*/
private imageview mfirst;
/**
* 记录第二次点击的imageview
*/
private imageview msecond;
/**
* 点击事件
* @param view the view
* @author qiu 博客：www.qiuchengjia.cn 时间：2016-09-12
*/
@override
public void onclick(view v) {
/**
* 如果两次点击是同一个
*/
if (mfirst == v) {
mfirst.setcolorfilter(null);
mfirst = null;
return;
}
//点击第一个item
if (mfirst == null) {
mfirst = (imageview) v;
mfirst.setcolorfilter(color.parsecolor("#55ff0000"));
} else//点击第二个item
{
msecond = (imageview) v;
exchangeview();
}
}
点击第一个，通过setcolorfilter设置下选中效果，再次点击另一个，那我们就准备调用exchangeview进行交换图片了，当然这个方法我们还没写，先放着~
如果两次点击同一个，去除选中效果，我们就当什么都没发生
接下来，我们来实现exchangeview：
/**
* 交换两个item图片
* @author qiu 博客：www.qiuchengjia.cn 时间：2016-09-12
*/
private void exchangeview() {
mfirst.setcolorfilter(null);
string firsttag = (string) mfirst.gettag();
string secondtag = (string) msecond.gettag();
//得到在list中索引位置
string[] firstimageindex = firsttag.split("_");
string[] secondimageindex = secondtag.split("_");
mfirst.setimagebitmap(mitembitmaps.get(integer
.parseint(secondimageindex[0])).bitmap);
msecond.setimagebitmap(mitembitmaps.get(integer
.parseint(firstimageindex[0])).bitmap);
mfirst.settag(secondtag);
msecond.settag(firsttag);
mfirst = msecond = null;
}
应该还记得我们之前的settag吧，忘了，返回去看看，我们还说注意来着~
通过gettag，拿到在list中是索引，然后得到bitmap进行交换设置，最后交换tag；
到此我们的交换效果写完了，我们的游戏可以完了~~
效果是这样的：
可以看到我们已经可以玩了，至于为什么不用清爽的风景图，是因为，实在是看不出来那块对那块，还是妹子直观~
大家肯定会吐槽，我擦，动画切换呢，明明不是两个飞过去交换位置么，尼玛这算什么
也是，对与程序我们要有追求，下面我们来添加动画切换效果~~
无缝的动画切换
我们先聊聊怎么添加，我准备使用translationanimation，然后两个item的top，left也很容器获取；
但是，要明白，我们实际上，item只是setimage发生了变化，item的位置没有变；
我们现在需要动画移动效果，比如a移动到b，没问题，移动完成以后，item得回去吧，但是图片并没有发生变化，我们还是需要手动setimage
这样造成了一个现象，动画切换效果有了，但是最后还是会有一闪，是我们切换图片造成的；
为了避免上述现象，能够完美的做到切换效果，这里我们引入一个动画图层，专门做动画效果，有点类似ps的图层，下面看我们怎么做；
/**
* 动画运行的标志位
*/
private boolean isaniming;
/**
* 动画层
*/
private relativelayout manimlayout;
/**
* 交换两个item图片
* @author qiu 博客：www.qiuchengjia.cn 时间：2016-09-12
*/
private void exchangeview(){
mfirst.setcolorfilter(null);
setupanimlayout();
// 添加firstview
imageview first = new imageview(getcontext());
first.setimagebitmap(mitembitmaps
.get(getimageindexbytag((string) mfirst.gettag())).bitmap);
layoutparams lp = new layoutparams(mitemwidth, mitemwidth);
lp.leftmargin = mfirst.getleft() - mpadding;
lp.topmargin = mfirst.gettop() - mpadding;
first.setlayoutparams(lp);
manimlayout.addview(first);
// 添加secondview
imageview second = new imageview(getcontext());
second.setimagebitmap(mitembitmaps
.get(getimageindexbytag((string) msecond.gettag())).bitmap);
layoutparams lp2 = new layoutparams(mitemwidth, mitemwidth);
lp2.leftmargin = msecond.getleft() - mpadding;
lp2.topmargin = msecond.gettop() - mpadding;
second.setlayoutparams(lp2);
manimlayout.addview(second);
// 设置动画
translateanimation anim = new translateanimation(0, msecond.getleft()
- mfirst.getleft(), 0, msecond.gettop() - mfirst.gettop());
anim.setduration(300);
anim.setfillafter(true);
first.startanimation(anim);
translateanimation animsecond = new translateanimation(0,
mfirst.getleft() - msecond.getleft(), 0, mfirst.gettop()
- msecond.gettop());
animsecond.setduration(300);
animsecond.setfillafter(true);
second.startanimation(animsecond);
// 添加动画监听
anim.setanimationlistener(new animationlistener(){
@override
public void onanimationstart(animation animation){
isaniming = true;
mfirst.setvisibility(invisible);
msecond.setvisibility(invisible);
}
@override
public void onanimationrepeat(animation animation){
}
@override
public void onanimationend(animation animation){
string firsttag = (string) mfirst.gettag();
string secondtag = (string) msecond.gettag();
string[] firstparams = firsttag.split("_");
string[] secondparams = secondtag.split("_");
mfirst.setimagebitmap(mitembitmaps.get(integer
.parseint(secondparams[0])).bitmap);
msecond.setimagebitmap(mitembitmaps.get(integer
.parseint(firstparams[0])).bitmap);
mfirst.settag(secondtag);
msecond.settag(firsttag);
mfirst.setvisibility(visible);
msecond.setvisibility(visible);
mfirst = msecond = null;
manimlayout.removeallviews();
//checksuccess();
isaniming = false;
}
});
}
/**
* 创建动画层
*/
private void setupanimlayout(){
if (manimlayout == null){
manimlayout = new relativelayout(getcontext());
addview(manimlayout);
}
}
private int getimageindexbytag(string tag){
string[] split = tag.split("_");
return integer.parseint(split[0]);
}
开始交换时，我们创建一个动画层，然后在这一层上添加上两个一模一样的item，把原来的item隐藏了，然后尽情的进行动画切换，setfillafter为true~
动画完毕，我们已经悄悄的把item的图片交换了，直接显示出来。这样就完美的切换了：
大致过程：
1、a ，b隐藏
2、a副本动画移动到b的位置；b副本移动到a的位置
3、a把图片设置为b，把b副本移除，a显示，这样就完美切合了，用户感觉是b移动过去的
4、b同上
现在我们的效果：
现在效果满意了把~~为了防止用户狂点，在onclick里面添加一句：
@override
public void onclick(view v)
{
// 如果正在执行动画，则屏蔽
if (isaniming)
return;
到此我们的动画的切换，已经完美结束了~~
切换时，我们是不是应该判断是否成功了~~
游戏胜利的判断
我们在切换完成，进行checksuccess();的判断；好在我们把图片的正确的顺序存在tag里面~~
/**
* 用来判断游戏是否成功
* @author qiu 博客：www.qiuchengjia.cn 时间：2016-09-12
*/
private void checksuccess(){
boolean issuccess = true;
for (int i = 0; i < mgamepintuitems.length; i++){
imageview first = mgamepintuitems[i];
log.e("tag", getindexbytag((string) first.gettag()) + "");
if (getindexbytag((string) first.gettag()) != i){
issuccess = false;
}
}
if (issuccess){
toast.maketext(getcontext(), "success , level up !",
toast.length_long).show();
// nextlevel();
}
}
/**
* 获得图片的真正索引
* @param tag
* @return
*/
private int getindexbytag(string tag){
string[] split = tag.split("_");
return integer.parseint(split[1]);
}
很简单，遍历所有的item，根据tag拿到真正的索引和当然顺序比较，完全一致则胜利~~胜利以后进入下一关
至于下一关的代码：
public void nextlevel(){
this.removeallviews();
manimlayout = null;
mcolumn++;
initbitmap();
inititem();
}
总结
好了，到此我们本文介绍的内容就基本结束了，感兴趣的朋友们可以自己动手操作起来，这样会对大家理解学习更有帮助，如果有疑问大家可以留言交流。