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、构造方法:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 |
/** * 设置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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
@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自然就是准备图片了: