怎么在Android中通過自定義View實現一個拼圖小游戲

怎么在Android中通過自定義View實現一個拼圖小游戲？相信很多沒有經驗的人對此束手無策，為此本文總結了問題出現的原因和解決方法，通過這篇文章希望你能解決這個問題。

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>

看完上述內容，你們掌握怎么在Android中通過自定義View實現一個拼圖小游戲的方法了嗎？如果還想學到更多技能或想了解更多相關內容，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！