安卓自定义View游戏篇-（拼图）

1、效果图：

运行时：

结束时：

2、PuzzleLayoutView：

public class PuzzleLayoutView extends RelativeLayout implements View.OnClickListener {

    //表示将其切成2*2拼图（默认4块）
    private int mColumn = 2;
    //容器的内边距
    private int mPadding;
    //每个块块的边距(横,纵   3:表示间距为3dp)
    private int mMargin = 3;
    //存储ImageView
    private ImageView[] mGamePintuItems;
    //Item的宽度(一致)
    private int mItemWidth;
    //游戏的图片
    private Bitmap mBitmap;
    //切图后的存储
    private List<ImagePieceBean> mItemBitmaps;
    //操作次数
    private boolean once;
    //容器宽度(游戏面板 高宽一致)
    private int mWidth;
    //设置游戏是否成功
    private boolean isGameSuccess;
    //设置游戏是否失败
    private boolean isGameOver;

    public GamePintuListner mListner;

    public PuzzleLayoutView(Context context) {
        this(context, null);
    }

    public PuzzleLayoutView(Context context, AttributeSet attrs) {
        this(context, attrs, 0);
    }

    public PuzzleLayoutView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
        init();
    }

    private void init() {
        mMargin = (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 3,
                getResources().getDisplayMetrics());//将dp转化为px,或xp转化为px
        mPadding = min(getPaddingLeft(), getPaddingRight(), getPaddingTop(), getPaddingBottom());
    }

    //接口方法
    public interface GamePintuListner {

        void nextLevel(int nextLevel);//下一关

        void timechanged(int currentTime);//关卡时间

        void gameover();//游戏结束
    }

    public void setOnGamePintuListner(GamePintuListner mListner) {
        this.mListner = mListner;
    }

    private int level = 1;
    private static final int TIME_CHANGED = 0X123;
    private static final int NEXT_LEVEL = 0X124;


    private Handler handler = new Handler() {
        public void handleMessage(android.os.Message msg) {
            switch (msg.what) {
                case TIME_CHANGED:
                    if (isGameSuccess || isGameOver)
                        return;
                    if (mListner != null) {
                        mListner.timechanged(mTime);
                        //时间结束后,游戏结束
                        if (mTime == 0) {
                            isGameOver = true;
                            mListner.gameover();
                        }
                    }
                    mTime--;
                    //延迟1秒发送
                    handler.sendEmptyMessageDelayed(TIME_CHANGED, 1000);
                    break;
                case NEXT_LEVEL:
                    level = level + 1;//切换到下一关
                    if (mListner != null) {
                        mListner.nextLevel(level);
                    } else {
                        nextLevel();
                    }
                default:
                    break;
            }
        }
    };


    private boolean isTimeEnabled = false;
    private int mTime;

    /**
     * 设置是否启动时间    (默认不启动)
     *
     * @param isTimeEnabled
     */
    public void setTimeEnabled(boolean isTimeEnabled) {
        this.isTimeEnabled = isTimeEnabled;
    }

    /**
     * 获取当前布局的大小(正方形)
     */
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        //取宽和高中的最小值
        mWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());
        if (!once) {
            //调用进行切图,以及排序(方法)
            initBitmap();
            //调用设置ImageView(Item)的宽高等属性(方法)
            initItem();
            //判断是否开启时间(方法调用)
            checkTimeEnable();
            once = true;
        }
        setMeasuredDimension(mWidth, mWidth);//强制调用使面板为正方形
    }

    /**
     * 判断是否开启时间
     */
    private void checkTimeEnable() {
        if (isTimeEnabled) {
            //根据当前等级设置时间
            countTimeBaseLevel();
            //通知线程更新关卡时间
            handler.sendEmptyMessage(TIME_CHANGED);
        }

    }

    private void countTimeBaseLevel() {
        mTime = (int) Math.pow(2, level) * 60;//第一关120秒 第二关:240 第三关:480
    }

    /**
     * 进行切图,以及排序方法
     */
    private void initBitmap() {
        //将图片引入
        if (mBitmap == null) {
            mBitmap = BitmapFactory.decodeResource(getResources(), R.drawable.pic_view);//注意此处的导包
        }
        mItemBitmaps = ImageSplitterUtil.sqlitImage(mBitmap, mColumn);//返回长度为4 (2*2)
        //使用sort进行乱排序
        Collections.sort(mItemBitmaps, new Comparator<ImagePieceBean>() {
            public int compare(ImagePieceBean a, ImagePieceBean b) {//注意此处的a,b
                //是否大于0.5具有不确定性
                return Math.random() > 0.5 ? 1 : -1;
            }
        });
    }

    /**
     * 设置ImageView(Item)的宽高等属性方法
     */
    private void initItem() {
        //容器的宽度-Item内边距 =所有小块块加起来的/Item个数(宽度)   2:左边和右边边距
        mItemWidth = (mWidth - mPadding * 2 - mMargin * (mColumn - 1)) / mColumn;
        mGamePintuItems = new ImageView[mColumn * mColumn];//界面块块个数相*
        //生成我们的Item,设置Rule(Item间的关系,高矮等)
        for (int i = 0; i < mGamePintuItems.length; i++) {
            ImageView item = new ImageView(getContext());
            /**
             * item点击事件
             */
            item.setOnClickListener(this);
            item.setImageBitmap(mItemBitmaps.get(i).getBitmap());//此前以进行过乱排序
            mGamePintuItems[i] = item;//保存Item
            item.setId(i + 1);
            //在Item的tag中存储了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, mGamePintuItems[i - 1].getId());
            }
            //如果不是第一行,设置topMargin和rule
            if (i + 1 > mColumn) {
                lp.topMargin = mMargin;
                lp.addRule(RelativeLayout.BELOW, mGamePintuItems[i - mColumn].getId());
            }
            addView(item, lp);//添加到RelativeLayout中
        }
    }

    /**
     * 当过关失败,时间停止时调用此方法(重新开始此关卡)
     */
    public void restart() {
        isGameOver = false;//重置当前关卡
        mColumn--;
        nextLevel();
    }

    public void nextLevel() {
        this.removeAllViews();//移除当前所有View
        mAnimLayout = null;
        mColumn++;//由2*2 变为3*3游戏面版
        isGameSuccess = false;//游戏未成功(新的开始)
        checkTimeEnable();//下一关时间重新计算
        initBitmap();
        initItem();
    }

    /**
     * 获取多个参数的最小值
     */
    private int min(int... params) {//...传多个参数
        int min = params[0];//获取最小的
        for (int param : params) {//发现最小的则赋值
            if (param < min) {
                min = param;
            }
        }
        return min;
    }

    /**
     * 点击事件
     */
    private ImageView mFirst;//点击的IItem
    private ImageView mSecond;

    public void onClick(View v) {
        if (isAniming)
            return;
        //两次点击同一个Item
        if (mFirst == v) {
            mFirst.setColorFilter(null);
            mFirst = null;
            return;
        }
        if (mFirst == null) {
            mFirst = (ImageView) v;
            mFirst.setColorFilter(Color.parseColor("#5551c4d4"));//设置选中Item时的颜色(55为半透明)
        } else {
            mSecond = (ImageView) v;
            //交换我们的Item
            exchangeView();
        }
    }

    /**
     * 动画层
     */
    private RelativeLayout mAnimLayout;
    //设置图片进行切换时用户疯狂点击
    private boolean isAniming;

    /**
     * 交换我们的Item
     */
    private void exchangeView() {
        mFirst.setColorFilter(null);//去除颜色状态(高亮)
        //调用构造我们的动画层方法
        setUpAnimLayout();
        //进行图片的交换
        ImageView first = new ImageView(getContext());
        final Bitmap firstBitmap = mItemBitmaps.get(getImageIdByTag((String) mFirst.getTag())).getBitmap();
        first.setImageBitmap(firstBitmap);
        LayoutParams lp = new LayoutParams(mItemWidth, mItemWidth);
        lp.leftMargin = mFirst.getLeft() - mPadding;
        lp.topMargin = mFirst.getTop() - mPadding;
        first.setLayoutParams(lp);
        mAnimLayout.addView(first);//添加至动画层
        ImageView second = new ImageView(getContext());
        final Bitmap secondBitmap = mItemBitmaps.get(getImageIdByTag((String) mSecond.getTag())).getBitmap();
        second.setImageBitmap(secondBitmap);
        LayoutParams lp2 = new LayoutParams(mItemWidth, mItemWidth);
        lp2.leftMargin = mSecond.getLeft() - mPadding;
        lp2.topMargin = mSecond.getTop() - mPadding;
        second.setLayoutParams(lp2);
        mAnimLayout.addView(second);//添加至动画层

        //设置动画
        TranslateAnimation animFirst = new TranslateAnimation(0, mSecond.getLeft() - mFirst.getLeft(),
                0, mSecond.getTop() - mFirst.getTop());
        animFirst.setDuration(500);//设置动画时间
        animFirst.setFillAfter(true);//设置动画结束的位置
        first.startAnimation(animFirst);//启动动画

        TranslateAnimation animSecond = new TranslateAnimation(0, -mSecond.getLeft() + mFirst.getLeft(),
                0, -mSecond.getTop() + mFirst.getTop());
        animSecond.setDuration(500);//设置动画时间
        animSecond.setFillAfter(true);//设置动画结束的位置
        second.startAnimation(animSecond);//启动动画

        /**
         * 监听动画事件
         */
        animFirst.setAnimationListener(new Animation.AnimationListener() {
            public void onAnimationStart(Animation animation) {
                mFirst.setVisibility(View.INVISIBLE);//隐藏动画
                mSecond.setVisibility(View.INVISIBLE);
                isAniming = true;
            }

            public void onAnimationRepeat(Animation animation) {
            }

            public void onAnimationEnd(Animation animation) {

                String firstTag = (String) mFirst.getTag();
                String secondTag = (String) mSecond.getTag();
                mFirst.setImageBitmap(secondBitmap);
                mSecond.setImageBitmap(firstBitmap);
                mFirst.setTag(secondTag);
                mSecond.setTag(firstTag);
                mFirst.setVisibility(View.VISIBLE);//显示隐藏的图片
                mSecond.setVisibility(View.VISIBLE);
                //此处为空,并不是将对象设置为null 而是将mFirst与Bitmap对象链接的线断开
                mFirst = mSecond = null;//回到初始状态
                mAnimLayout.removeAllViews();//移除动画层的两个View
                //调用判断游戏成功时的方法
                checkSuccess();
                isAniming = false;
            }
        });
    }

    /**
     * 判断游戏是否成功
     */
    private void checkSuccess() {

        boolean isSuccess = true;
        for (int i = 0; i < mGamePintuItems.length; i++) {
            ImageView imageView = mGamePintuItems[i];
            //getImageIndex:上面的方法名(注意此处方法名)
            if (getImageIndex((String) imageView.getTag()) != i) {
                isSuccess = false;
            }
        }
        if (isSuccess) {
            isGameSuccess = true;
            handler.removeMessages(TIME_CHANGED);//进入下一关时的时间
            Log.e("TAG", "SUCCESS");
            Toast.makeText(getContext(), "Success,level up 游戏升级!!!", Toast.LENGTH_LONG).show();
            handler.sendEmptyMessage(NEXT_LEVEL);
        }
    }

    /**
     * 根据tag获取Id
     */
    public int getImageIdByTag(String tag) {
        String[] split = tag.split("_");
        return Integer.parseInt(split[0]);//拿ID
    }

    public int getImageIndex(String tag) {
        String[] split = tag.split("_");
        return Integer.parseInt(split[1]);//拿ID
    }

    /**
     * 构造我们的动画层
     */
    private void setUpAnimLayout() {
        if (mAnimLayout == null) {
            mAnimLayout = new RelativeLayout(getContext());
            addView(mAnimLayout);//添加到游戏面板中
        }
    }
}

工具类：ImageSplitterUtil

public class ImageSplitterUtil {

    /**
     * 传入bitmap,切成piece*piece块
     */
    public static List<ImagePieceBean> sqlitImage(Bitmap bitmap, int piece) {
        List<ImagePieceBean> ImagePieceBeans = new ArrayList<>();

        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++) {//循环切第二,三行
                ImagePieceBean ImagePieceBean = new ImagePieceBean();
                ImagePieceBean.setIndex(j + i * piece);//第一次i为0,第0行 j++递增 0-6
                int x = j * pieceWidth;//第一次循环X,Y为0
                int y = i * pieceWidth;
                ImagePieceBean.setBitmap(Bitmap.createBitmap(bitmap, x, y, pieceWidth, pieceWidth));
                ImagePieceBeans.add(ImagePieceBean);
            }
        }
        return ImagePieceBeans;
    }
}

实体类：ImagePieceBean

public class ImagePieceBean {

    private int index;    //表示当前第几块
    private Bitmap bitmap;    //当前图片

    public ImagePieceBean() {
    }

    //快捷键构造方法 Source 倒3
    public ImagePieceBean(int index, Bitmap bitmap) {
        this.index = index;
        this.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 String toString() {
        return "ImagePiece [index=" + index + ", bitmap=" + bitmap + "]";
    }
}

3、使用方法：GameActivity

/**
 * 总结:
 * 1.自定义控件选择,九宫格,RelativeLayout, id+Rule
 * 2.切图
 * 3.动画图层
 * 4.pause resume restart
 * 5.游戏时间 Handler  sendMessageDelayed() 延迟一秒发送线程
 */
public class GameActivity extends AppCompatActivity {

    private PuzzleLayoutView puzzleLayoutView;
    private TextView mLevel, mTime;

    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        requestWindowFeature(Window.FEATURE_NO_TITLE);
        setContentView(R.layout.activity_game);

        mLevel = this.findViewById(R.id.id_level);
        mTime = this.findViewById(R.id.id_time);
        puzzleLayoutView = this.findViewById(R.id.puzzle_layout_view);
        puzzleLayoutView.setTimeEnabled(true);
        //监听事件
        puzzleLayoutView.setOnGamePintuListner(new PuzzleLayoutView.GamePintuListner() {
            public void timechanged(int currentTime) {
                //此处为int 注意加""
                mTime.setText(currentTime + "秒");
            }

            public void nextLevel(final int nextLevel) {
                //弹出提示框
                new AlertDialog.Builder(GameActivity.this).setTitle("游戏信息")
                        .setMessage("游戏升级").setPositiveButton("进入下一关",
                        new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog, int which) {
                                //游戏结束后,调用下一关
                                puzzleLayoutView.nextLevel();
                                mLevel.setText("第" + +nextLevel + "关");
                            }
                        }).show();
            }

            public void gameover() {
                //弹出提示框
                new AlertDialog.Builder(GameActivity.this).setTitle("游戏信息")
                        .setMessage("游戏结束!").setPositiveButton("是否继续该关卡?",
                        new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog, int which) {
                                puzzleLayoutView.restart();//重新启动
                            }
                        }).setNegativeButton("是否放弃该游戏!", new DialogInterface.OnClickListener() {
                    public void onClick(DialogInterface dialog, int which) {
                        finish();
                    }
                }).show();
            }
        });
    }
}

对应布局：activity_game

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp"
    android:gravity="center_horizontal"
    android:orientation="vertical">

    <RelativeLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <TextView
            android:id="@+id/id_level"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="1"
            android:textSize="25sp"
            android:textStyle="bold" />

        <TextView
            android:id="@+id/id_time"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignParentRight="true"
            android:gravity="center"
            android:text="120"
            android:textColor="#ea7821"
            android:textSize="25sp"
            android:textStyle="bold" />
    </RelativeLayout>

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="10dp"
        android:src="@drawable/pic_view" />

    <com.helloworld.game.utils.PuzzleLayoutView
        android:id="@+id/puzzle_layout_view"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:padding="3dp" />

</LinearLayout>

注意：pic_view图片资源自行更换