| 关键词: nbsp private Context 布局 图片 int GamePintuLayout 准备 padding Item |
1、概述继2048之后,今天给大家带来一个拼图游戏,当然了不是很传统那个缺一块的拼图,那游戏我不会玩~~所有我们换个方式玩拼图,怎么玩呢,把图片且成很多份,点击交换拼成一张完整的;这样关卡也很容易设计,3*3;4*4;5*5;6*6;...一直下去....博客产生的原因是,没事在网上逛看到一个图片切片的辅助类,类很简单,上面说了一句,如果做拼图游戏的话可以用到,然后,我们就用到了~~至于效果是这样的:加了个切换动画,效果还是不错的~~其实游戏就是自定义了一个控件,下面我们开始自定义之旅~~2、游戏的设计首先我们分析下如何设计这款游戏:1、我们需要一个容器,可以放这些图片的块块,为了方便,我们准备使用RelativeLayout配合addRule实现2、每个图片的块块,我们准备使用ImageView3、点击交换,我们准备使用传统的TranslationAnimation来实现有了初步的设计,感觉这游戏so easy~3、游戏布局的实现首先,我们准备实现能够把一张图片,切成n*n份,放在指定的位置;我们只需要设置n这个数字,然后根据布局的宽或者高其中的小值,除以n,减去一些边距就可以得到我们ImageView的宽和高了~~1、构造方法:[java] view plaincopy/** * 设置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[java] view plaincopy@Override protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) { super.onMeasure(widthMeasureSpec, heightMeasureSpec); // 获得游戏布局的边长 声明:文章版权归原作者所有 部分文章转自互联网 如有侵权请联系 [邮箱地址] 删除 |