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 + "]";  }}

使用方法：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圖片資源自行更換

關于“Android如何自定義View實現拼圖小游戲”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。