Android自定义View之拼图小游戏

ImagePiece 模型

package com.example.win10.pintuapplication;

import android.graphics.Bitmap;

public class ImagePiece {
    private int index;
    private Bitmap bitmap;

    @Override
    public String toString() {
        return "ImagePiece{" +
                "index=" + index +
                ", bitmap=" + bitmap +
                '}';
    }

    public ImagePiece() {
    }

    public ImagePiece(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;
    }

}

ImageSplitterUtil 图片切片

package com.example.win10.pintuapplication;

import android.graphics.Bitmap;

import java.util.ArrayList;
import java.util.List;

public class ImageSplitterUtil {
    public static List<ImagePiece> splitImage(Bitmap bitmap, int piece) {
        List<ImagePiece> imagePieces = 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++) {

                int x = j * pieceWidth;
                int y = i * pieceWidth;

                ImagePiece imagePiece = new ImagePiece();
                imagePiece.setIndex(j + i * piece);
                imagePiece.setBitmap(Bitmap.createBitmap(bitmap, x, y, pieceWidth, pieceWidth));
                imagePieces.add(imagePiece);
            }
        }
        return imagePieces;
    }
}

GamePintuLayout2 游戏界面自定义view

package com.example.win10.pintuapplication;

import android.content.Context;
import android.graphics.Bitmap;
import android.graphics.BitmapFactory;
import android.util.AttributeSet;
import android.util.TypedValue;
import android.view.View;
import android.view.animation.Animation;
import android.view.animation.TranslateAnimation;
import android.widget.ImageView;
import android.widget.RelativeLayout;

import java.util.Collections;
import java.util.Comparator;
import java.util.List;

public class GamePintuLayout2 extends RelativeLayout implements View.OnClickListener {

    private int mColumn = 3;
    private int mMargin = 3;
    private int mPadding;
    private ImageView[] mGamePintuItems;
    private int mItemWidth;
    private Bitmap mBitmap;
    private List<ImagePiece> mItemBitmaps;
    private boolean isOnce = true;
    private int mWidth;
    private boolean isAniming;

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

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

    public GamePintuLayout2(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        mMargin = dp2px(getContext(), 3);
        mPadding = min(getPaddingLeft(), getPaddingTop(), getPaddingRight(), getPaddingBottom());
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        mWidth = Math.min(getMeasuredHeight(), getMeasuredWidth());
        if (isOnce) {
            isOnce = false;
            initBitmap();
            initItem();
        }
        setMeasuredDimension(mWidth, mWidth);
    }

    private void initBitmap() {
        if (mBitmap == null) {
            mBitmap = BitmapFactory.decodeResource(getResources(), R.mipmap.ababy);
        }
        mItemBitmaps = ImageSplitterUtil.splitImage(mBitmap, mColumn);
        /**
         * 乱序排序
         */
        Collections.sort(mItemBitmaps, new Comparator<ImagePiece>() {
            @Override
            public int compare(ImagePiece o1, ImagePiece o2) {
                return Math.random() > 0.5 ? 1 : -1;
            }
        });
    }

    private void initItem() {
        mItemWidth = (mWidth - mPadding * 2 - mMargin * (mColumn - 1)) / mColumn;
        mGamePintuItems = new ImageView[mColumn * mColumn];
        for (int i = 0; i < mGamePintuItems.length; i++) {
            ImageView item = new ImageView(getContext());
            item.setOnClickListener(this);
            item.setImageBitmap(mItemBitmaps.get(i).getBitmap());
            mGamePintuItems[i] = item;
            item.setId(i + 1);
            item.setTag(i + "_" + mItemBitmaps.get(i).getIndex());

            RelativeLayout.LayoutParams lp = new LayoutParams(mItemWidth, mItemWidth);
            //不是第一列
            if (i % mColumn != 0) {
                lp.leftMargin = mMargin;
                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);

        }
    }

    private ImageView mFirst;
    private ImageView mSecond;

    @Override
    public void onClick(View v) {
        if (isAniming) {
            return;
        }
        //两次点击同一个view，取消选中
        if (mFirst == v) {
            mFirst.setColorFilter(null);
            mFirst = null;
            return;
        }
        //
        if (mFirst == null) {
            mFirst = (ImageView) v;
            mFirst.setColorFilter(getResources().getColor(R.color.colorAccent_Trans55));
        } else {
            mSecond = (ImageView) v;
            exchangeView();
        }
    }

    private RelativeLayout mAnimLayout;

    private void exchangeView() {
        mFirst.setColorFilter(null);

        String firstTag = (String) mFirst.getTag();
        String secondTag = (String) mSecond.getTag();
        String[] firstParams = firstTag.split("_");
        String[] secondParams = secondTag.split("_");

        final Bitmap firstBitmap = mItemBitmaps.get(Integer.parseInt(firstParams[0])).getBitmap();
        final Bitmap secondBitmap = mItemBitmaps.get(Integer.parseInt(secondParams[0])).getBitmap();
        mFirst.setImageBitmap(secondBitmap);
        mSecond.setImageBitmap(firstBitmap);


        /**
         * 构造我们的动画层
         */
        if (mAnimLayout == null) {
            mAnimLayout = new RelativeLayout(getContext());
            addView(mAnimLayout);
        }
        ImageView first = new ImageView(getContext());
        first.setImageBitmap(firstBitmap);
        ImageView second = new ImageView(getContext());
        second.setImageBitmap(secondBitmap);
        //
        LayoutParams lp = new LayoutParams(mItemWidth, mItemWidth);
        lp.leftMargin = mFirst.getLeft() - mPadding;
        lp.topMargin = mFirst.getTop() - mPadding;
        first.setLayoutParams(lp);

        LayoutParams lp2 = new LayoutParams(mItemWidth, mItemWidth);
        lp2.leftMargin = mSecond.getLeft() - mPadding;
        lp2.topMargin = mSecond.getTop() - mPadding;
        second.setLayoutParams(lp2);
        //
        mAnimLayout.addView(first);
        mAnimLayout.addView(second);
        /**
         * 设置动画
         * TranslateAnimation(float fromXDelta, float toXDelta, float fromYDelta, float toYDelta)
         * 如果view在A(x,y)点 那么动画就是从B点(x+fromXDelta, y+fromYDelta)点移动到C 点(x+toXDelta,y+toYDelta)点.
         */
        TranslateAnimation animation = new TranslateAnimation(
                0, mSecond.getLeft() - mFirst.getLeft(), 0, mSecond.getTop() - mFirst.getTop());
        animation.setDuration(300);
        animation.setFillAfter(true);
        first.startAnimation(animation);

        TranslateAnimation animation2 = new TranslateAnimation(
                0, mFirst.getLeft() - mSecond.getLeft(), 0, mFirst.getTop() - mSecond.getTop());
        animation2.setDuration(300);
        animation2.setFillAfter(true);
        second.startAnimation(animation2);
        /**
         * 监听动画
         */
        animation.setAnimationListener(new Animation.AnimationListener() {
            @Override
            public void onAnimationStart(Animation animation) {
                mFirst.setVisibility(INVISIBLE);
                mSecond.setVisibility(INVISIBLE);
                isAniming = true;//正在动画
            }

            @Override
            public void onAnimationEnd(Animation animation) {
                mFirst.setImageBitmap(secondBitmap);
                mSecond.setImageBitmap(firstBitmap);
                String firstTag = (String) mFirst.getTag();
                String secondTag = (String) mSecond.getTag();
                mFirst.setTag(secondTag);
                mSecond.setTag(firstTag);
                mFirst.setVisibility(VISIBLE);
                mSecond.setVisibility(VISIBLE);
                mFirst = mSecond = null;
                mAnimLayout.removeAllViews();
                isAniming = false;//动画停止
            }

            @Override
            public void onAnimationRepeat(Animation animation) {

            }
        });

    }

    private int min(int... params) {
        int min = params[0];
        for (int param :
                params) {
            if (param < min) {
                min = param;
            }
        }
        return min;
    }

    /**
     * dp转px
     *
     * @param context
     * @param dpVal
     * @return
     */
    public static int dp2px(Context context, float dpVal) {
        return (int) TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP,
                dpVal, context.getResources().getDisplayMetrics());
    }

}