本Demo主要目的為學習及研究自定義ViewGroup,通過實現(xiàn)一種拼圖游戲而熟悉ViewGroup的onMeasure,onLayout及onTouchEvent的處理
image
- demo展示
image
實現(xiàn)說明及注意點
- 使用RelaytiveLayout挑豌，通過addView(ImageView.setImageBitmap(Bitmap))方式添加所有小方塊惭嚣，其中添加的View需設置合適的LayoutParams
1.根據RelaytiveLayout及所選擇圖片的寬高選擇游戲區(qū)域铸董，并創(chuàng)建各個小滑塊
private List<Units> calcBitmap() {
if (TextUtils.isEmpty(mImagePath)) {
return null;
}
mBitmap = BitmapFactory.decodeFile(mImagePath);
List<Units> bms = new ArrayList<>();
int bw = mBitmap.getWidth();
int bh = mBitmap.getHeight();
float scale = 1;
if ((getWidth() * 1.0f) / (bw * 1.0f) > (getHeight() * 1.0f) / (bh * 1.0f)) {
scale = (getWidth() * 1.0f) / (bw * 1.0f);
} else {
scale = (getHeight() * 1.0f) / (bh * 1.0f);
}
Matrix matrix = new Matrix();
matrix.setScale(scale, scale);
mBitmap = Bitmap.createBitmap(mBitmap, 0, 0, mBitmap.getWidth(),
mBitmap.getHeight(), matrix, true);
bw = mBitmap.getWidth();
bh = mBitmap.getHeight();
if (bw * 1.f / bh > getWidth() * 1.f / getHeight()) {
mBitmap = Bitmap.createBitmap(mBitmap, (bw - getWidth()) / 2, 0, getWidth(), getHeight());
} else {
mBitmap = Bitmap.createBitmap(mBitmap, 0, (bh - getHeight()) / 2, getWidth(), getHeight());
}
for (int i = 0; i < mColumns * mColumns; i++) {
if (i != mColumns * mColumns - 1) {
bms.add(new Units(Bitmap.createBitmap(mBitmap, i % mColumns * getWidth() / mColumns, i / mColumns * getHeight() / mColumns, getWidth() / mColumns, getHeight() / mColumns), i));
} else {
sortBlocks(bms); //排序滑塊
bms.add(new Units(Bitmap.createBitmap(getWidth() / mColumns, getHeight() / mColumns, Bitmap.Config.ALPHA_8), i));
}
}
return bms;
}
class Units {
Bitmap bm;
//用于判斷滑塊所在位置是否正確
int tag;
Units(Bitmap bm, int tag) {
this.bm = bm;
this.tag = tag;
}
}
2.計算所有滑塊的所處的ViewGroup區(qū)域
private void initRects() {
mRects = new ArrayList<>();
int unitWidth = getWidth() / mColumns;
int unitHeight = getHeight() / mColumns;
for (int i = 0; i < mColumns * mColumns; i++) {
mRects.add(new Rect(i % mColumns * unitWidth
, i / mColumns * unitHeight
, i % mColumns * unitWidth + unitWidth
, i / mColumns * unitHeight + unitHeight));
}
}
3.創(chuàng)建ImageView并添加到ViewGroup中
for (int i = 0; i < mBms.size(); i++) {
ImageView imageView = new ImageView(getContext());
imageView.setImageBitmap(mBms.get(i).bm);
RelativeLayout.LayoutParams lp = new LayoutParams(getWidth() / mColumns, getHeight() / mColumns);
imageView.setLayoutParams(lp);
addView(imageView);
}
4.處理onTouchEvent
public boolean onTouchEvent(MotionEvent event) {
if (event.getPointerCount() > 1 || TextUtils.isEmpty(mImagePath) || finished) {
return false;
}
mX = event.getX();
mY = event.getY();
switch (event.getAction()) {
case MotionEvent.ACTION_DOWN:
mDownX = event.getX();
mDownY = event.getY();
calcCurrentItem(); //計算當前觸摸條目
break;
case MotionEvent.ACTION_MOVE:
calcOrientation(); //計算滑動方向
calcMoveAble(); //根據游戲規(guī)則判斷觸摸滑塊是否可滑動
calcMoveFinish(); //判斷滑塊是否完成了滑動
if (!mMoveAble) {
return false;
}
requestLayout();
break;
case MotionEvent.ACTION_UP:
if (!mMoveAble) {
return false;
}
if (isMoveFinish) {
Collections.swap(mBms, mCurrentItem, mBlankItem);
resetChild();
} else {
calcNeedMoveBlock(); //根據手指移動距離判斷是否需要在手指抬起時移動滑塊
}
calcResult();
requestLayout();
break;
default:
break;
}
return true;
}
private void calcCurrentItem() {
if (TextUtils.isEmpty(mImagePath)) {
return;
}
for (int i = 0; i < mRects.size(); i++) {
if (mRects.get(i).contains((int) mDownX, (int) mDownY)) {
mCurrentItem = i;
return;
}
}
}
private void calcOrientation() {
if (Math.abs(mX - mDownX) > Math.abs(mY - mDownY) && mX - mDownX < 0) {
mMoveOrientation = 1;
} else if (Math.abs(mX - mDownX) > Math.abs(mY - mDownY) && mX - mDownX > 0) {
mMoveOrientation = 3;
} else if (Math.abs(mX - mDownX) < Math.abs(mY - mDownY) && mY - mDownY > 0) {
mMoveOrientation = 4;
} else {
mMoveOrientation = 2;
}
}
private void calcMoveAble() {
for (int i = 0; i < mBms.size(); i++) {
if (mBms.get(i).tag == mColumns * mColumns - 1) {
mBlankItem = i;
break;
}
}
if ((mBlankItem + 1) % mColumns == 0) {
switch (mMoveOrientation) {
case 2:
mMoveAble = mCurrentItem - mColumns == mBlankItem;
break;
case 3:
mMoveAble = mCurrentItem + 1 == mBlankItem;
break;
case 4:
mMoveAble = mCurrentItem + mColumns == mBlankItem;
break;
case 1:
default:
mMoveAble = false;
break;
}
} else if ((mBlankItem + 1) % mColumns == 1) {
switch (mMoveOrientation) {
case 1:
mMoveAble = mCurrentItem - 1 == mBlankItem;
break;
case 2:
mMoveAble = mCurrentItem - mColumns == mBlankItem;
break;
case 4:
mMoveAble = mCurrentItem + mColumns == mBlankItem;
break;
case 3:
default:
mMoveAble = false;
break;
}
} else {
switch (mMoveOrientation) {
case 1:
mMoveAble = mCurrentItem - 1 == mBlankItem;
break;
case 2:
mMoveAble = mCurrentItem - mColumns == mBlankItem;
break;
case 3:
mMoveAble = mCurrentItem + 1 == mBlankItem;
break;
case 4:
mMoveAble = mCurrentItem + mColumns == mBlankItem;
break;
default:
mMoveAble = false;
break;
}
}
}
private void calcMoveFinish() {
switch (mMoveOrientation) {
case 1:
case 3:
isMoveFinish = Math.abs(mX - mDownX) > mRects.get(mBlankItem).right - mRects.get(mBlankItem).left;
break;
case 2:
case 4:
isMoveFinish = Math.abs(mY - mDownY) > mRects.get(mBlankItem).bottom - mRects.get(mBlankItem).top;
break;
default:
break;
}
}
private void calcNeedMoveBlock() {
switch (mMoveOrientation) {
case 1:
case 3:
isMoveFinish = Math.abs(mX - mDownX) * 3 > Math.abs(mRects.get(mCurrentItem).right - mRects.get(mCurrentItem).left);
break;
case 2:
case 4:
isMoveFinish = Math.abs(mY - mDownY) * 3 > Math.abs(mRects.get(mCurrentItem).bottom - mRects.get(mCurrentItem).top);
break;
default:
break;
}
if (isMoveFinish) {
Collections.swap(mBms, mCurrentItem, mBlankItem);
resetChild();
} else {
resetChild();
}
}
5.重寫onMeasure及onLayout
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
super.onMeasure(widthMeasureSpec, heightMeasureSpec);
int widthSpecMode = MeasureSpec.getMode(widthMeasureSpec);
int widthSpecSize = MeasureSpec.getSize(widthMeasureSpec);
int heightSpecMode = MeasureSpec.getMode(heightMeasureSpec);
int heightSpecSize = MeasureSpec.getSize(heightMeasureSpec);
if (widthSpecMode == AT_MOST && heightSpecMode == AT_MOST) {
setMeasuredDimension(mMinSize, mMinSize);
} else if (widthMeasureSpec == AT_MOST) {
setMeasuredDimension(mMinSize, heightSpecSize);
} else if (heightMeasureSpec == AT_MOST) {
setMeasuredDimension(widthSpecSize, mMinSize);
}
measureChild();
}
private void measureChild() {
for (int i = 0; i < getChildCount(); i++) {
if (i == mColumns * mColumns) {
getChildAt(i).measure(getWidth(), getHeight());
return;
}
getChildAt(i).measure(getWidth() / mColumns - mSeparatorWidth, getHeight() / mColumns - mSeparatorWidth);
}
}
@Override
protected void onLayout(boolean changed, int l, int t, int r, int b) {
super.onLayout(changed, l, t, r, b);
for (int i = 0; i < getChildCount(); i++) {
if (i == mColumns * mColumns) {
getChildAt(i).layout(0, 0, getWidth(), getHeight());
return;
}
if (mCurrentItem == i) {
if (isMoveFinish) {
getChildAt(i).layout(mRects.get(mBlankItem).left + mSeparatorWidth / 2
, mRects.get(mBlankItem).top + mSeparatorWidth / 2
, mRects.get(mBlankItem).right - mSeparatorWidth / 2
, mRects.get(mBlankItem).bottom - mSeparatorWidth / 2);
} else {
switch (mMoveOrientation) {
case 1:
getChildAt(i).layout((int) (mX - mDownX + mRects.get(mCurrentItem).left) + mSeparatorWidth / 2
, mRects.get(mCurrentItem).top + mSeparatorWidth / 2
, (int) (mX - mDownX + mRects.get(mCurrentItem).right) - mSeparatorWidth / 2
, mRects.get(mCurrentItem).bottom - mSeparatorWidth / 2);
break;
case 3:
getChildAt(i).layout((int) (mX - mDownX + mRects.get(mCurrentItem).left) + mSeparatorWidth / 2
, mRects.get(mCurrentItem).top + mSeparatorWidth / 2
, (int) (mX - mDownX + mRects.get(mCurrentItem).right) - mSeparatorWidth / 2
, mRects.get(mCurrentItem).bottom - mSeparatorWidth / 2);
break;
case 2:
getChildAt(i).layout(mRects.get(mCurrentItem).left + mSeparatorWidth / 2
, (int) (mY - mDownY + mRects.get(mCurrentItem).top) + mSeparatorWidth / 2
, mRects.get(mCurrentItem).right - mSeparatorWidth / 2
, (int) (mY - mDownY + mRects.get(mCurrentItem).bottom) - mSeparatorWidth / 2);
break;
case 4:
getChildAt(i).layout(mRects.get(mCurrentItem).left + mSeparatorWidth / 2
, (int) (mY - mDownY + mRects.get(mCurrentItem).top) + mSeparatorWidth / 2
, mRects.get(mCurrentItem).right - mSeparatorWidth / 2
, (int) (mY - mDownY + mRects.get(mCurrentItem).bottom) - mSeparatorWidth / 2);
break;
default:
getChildAt(i).layout(mRects.get(i).left + mSeparatorWidth / 2
, mRects.get(i).top + mSeparatorWidth / 2
, mRects.get(i).right - mSeparatorWidth / 2
, mRects.get(i).bottom - mSeparatorWidth / 2);
break;
}
}
} else {
getChildAt(i).layout(mRects.get(i).left + mSeparatorWidth / 2
, mRects.get(i).top + mSeparatorWidth / 2
, mRects.get(i).right - mSeparatorWidth / 2
, mRects.get(i).bottom - mSeparatorWidth / 2);
}
}
}
6.對外暴露的接口
public void showResult() {
int childCount = getChildCount();
if (childCount == mColumns * mColumns + 1 || TextUtils.isEmpty(mImagePath)) {
return;
}
ImageView imageView = new ImageView(getContext());
imageView.setImageBitmap(mBitmap);
RelativeLayout.LayoutParams lp = new LayoutParams(RelativeLayout.LayoutParams.MATCH_PARENT, RelativeLayout.LayoutParams.MATCH_PARENT);
imageView.setLayoutParams(lp);
addView(imageView);
invalidate();
}
public void hideResult() {
if (TextUtils.isEmpty(mImagePath)) {
return;
}
removeViewAt(getChildCount() - 1);
invalidate();
}
public void setEasier() {
if (TextUtils.isEmpty(mImagePath) || mColumns <= 3) {
return;
}
mColumns -= 1;
setImage(mImagePath);
}
public void setHarder() {
if (TextUtils.isEmpty(mImagePath) || mColumns >= 5) {
return;
}
mColumns += 1;
setImage(mImagePath);
}
public interface FinishListener {
void finish(long mills);
}
public void addFinishListener(FinishListener listener) {
mListener = listener;
}
- 難點:簡單的使用ColleCtions.suffle()打亂各個方塊將有一半的幾率導致游戲無法完成俯邓，需使用Collections.swap(int i,int j)方式打亂各模塊
private void sortBlocks(List<Units> bms) {
if (mColumns % 2 == 0) {
for (int i = 0; i < 40; i++) {
int index = (int) (Math.random() * bms.size());
if (index % mColumns + 2 > mColumns) {
if (index - 2 >= 0) {
Collections.swap(bms, index, index - 2);
} else {
Collections.swap(bms, index, index + mColumns * 2);
}
} else {
if (index + 2 < bms.size()) {
Collections.swap(bms, index, index + 2);
} else {
Collections.swap(bms, index, index - mColumns * 2);
}
}
}
} else {
for (int i = 0; i < 60; i++) {
int index = (int) (Math.random() * bms.size());
if (index + 2 >= bms.size()) {
Collections.swap(bms, index, index - 2);
} else {
Collections.swap(bms, index, index + 2);
}
}
}
}
- 錯誤示例(相鄰兩個滑塊直接進行奇數數次交換位置市俊，最后將會剩下兩個滑塊位置顛倒逛球，且無法通過移動滑塊位置還原)
image
- 正確示例
image
游戲說明
- 可以通過easy和hard減少和增加游戲難度（最易為3x3難度轧房，最難為5x5難度）
- 可以通過按住showpic按鈕顯示完成后效果圖片
其他說明
- 使用了RxPermission對不同版本手機進行了拍照及文件讀取權限處理
- 使用了ImagePicker圖片選擇框架選擇手機內存圖片或拍照
