怎么在Android中使用ViewDragHelper实现一个拼图游戏

本篇文章给大家分享的是有关怎么在Android中使用ViewDragHelper实现一个拼图游戏，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

ViewDragHelper

其实ViewDragHelper并不是第一个用于分析手势处理的类，gesturedetector也是，但是在和拖动相关的手势分析方面gesturedetector只能说是勉为其难。

关于ViewDragHelper有如下几点：

ViewDragHelper.Callback是连接ViewDragHelper与view之间的桥梁（这个view一般是指拥子view的容器即parentView）；

ViewDragHelper的实例是通过静态工厂方法创建的；

你能够指定拖动的方向；

 ViewDragHelper可以检测到是否触及到边缘；

ViewDragHelper并不是直接作用于要被拖动的View，而是使其控制的视图容器中的子View可以被拖动，如果要指定某个子view的行为，需要在Callback中想办法；

ViewDragHelper的本质其实是分析onInterceptTouchEvent和onTouchEvent的MotionEvent参数，然后根据分析的结果去改变一个容器中被拖动子View的位置（ 通过offsetTopAndBottom(int offset)和offsetLeftAndRight(int offset)方法 ），他能在触摸的时候判断当前拖动的是哪个子View；

虽然ViewDragHelper的实例方法 ViewDragHelper create(ViewGroup forParent, Callback cb) 可以指定一个被ViewDragHelper处理拖动事件的对象 。

实现思路

1. 自定义PuzzleLayout继承自RelativeLayout。

2. 将PuzzleLayout的onInterceptTouchEvent和onTouchEvent交给ViewDragHelper来处理。

3. 将拼图Bitmap按九宫格切割，生成ImageView添加到PuzzleLayout并进行排列。

4. 创建ImageView的对应数据模型。

5. ViewDragHelper.Callback控制滑动边界的实现。

6. 打乱ImageView的摆放位置。

下面介绍一下以上5步的具体实现细节。

创建一个PuzzleLayout继承自RelativeLayout。

public class PuzzleLayout extends RelativeLayout { public PuzzleLayout(Context context) {   super(context);  }   public PuzzleLayout(Context context, AttributeSet attrs) {   super(context, attrs);  }   public PuzzleLayout(Context context, AttributeSet attrs, int defStyleAttr) {  }}

将PuzzleLayout的onInterceptTouchEvent和onTouchEvent交给ViewDragHelper来处理。

这里我们会用到ViewDragHelper这个处理手势滑动的神器。
在使用之前我们先简单的了解一下它的相关函数。

public static ViewDragHelper create(ViewGroup forParent, float sensitivity, Callback cb)

上面这个是创建一个ViewDragHelper的静态函数，根据注释我们可以了解到:

1. 第一个参数是当前的ViewGroup。

2. 第二个参数是检测拖动开始的灵敏度，1.0f为正常值。

3. 第三个参数Callback，是ViewDragHelper给ViewGroup的回调。

这里我们主要来看看Callback这个参数，Callback会在手指触摸当前ViewGroup的过程中不断返回解析到的相关事件和状态，并获取ViewGroup返回给ViewDragHelper的状态，来决定接下来的操作是否需要执行，从而达到了在ViewGroup中管理和控制ViewDragHelper的目的。

Callback的方法很多，这里主要介绍本文用到的几个方法

public abstract boolean tryCaptureView(View child, int pointerId)

尝试捕获当前手指触摸到的子view， 返回true 允许捕获，false不捕获。

public int clampViewPositionHorizontal(View child, int left, int dx)

控制childView在水平方向的滑动，主要用来限定childView滑动的左右边界。

public int clampViewPositionVertical(View child, int top, int dy)

控制childView在垂直方向的滑动，主要用来限定childView滑动的上下边界。

public void onViewReleased(View releasedChild, float xvel, float yvel)

当手指从childView上离开时回调。

有了以上这些函数，我们的拼图游戏大致就可以做出来了，通过ViewDragHelper.create()来创建一个ViewDragHelper，通过Callback中tryCaptureView来控制当前触摸的子view是否可以滑动，clampViewPositionHorizontal、clampViewPositionVertical来控制水平方向和垂直方向的移动边界，具体的方法实现会在后面讲到。

public class PuzzleLayout extends RelativeLayout {  private ViewDragHelper viewDragHelper;  public PuzzleLayout(Context context) {    super(context);    init();  }  public PuzzleLayout(Context context, AttributeSet attrs) {    super(context, attrs);    init();  }  public PuzzleLayout(Context context, AttributeSet attrs, int defStyleAttr) {    super(context, attrs, defStyleAttr);    init();  }  private void init() {    getViewTreeObserver().addOnPreDrawListener(new ViewTreeObserver.OnPreDrawListener() {      @Override      public boolean onPreDraw() {        mHeight = getHeight();        mWidth = getWidth();        getViewTreeObserver().removeOnPreDrawListener(this);        if(mDrawableId != 0 && mSquareRootNum != 0){          createChildren();        }        return false;      }    });    viewDragHelper = ViewDragHelper.create(this, 1.0f, new ViewDragHelper.Callback() {      @Override      public boolean tryCaptureView(View child, int pointerId) {        return true；      }      @Override      public int clampViewPositionHorizontal(View child, int left, int dx) {        return left；      }      @Override      public int clampViewPositionVertical(View child, int top, int dy) {        return top;      }      @Override      public void onViewReleased(View releasedChild, float xvel, float yvel) {      }    });  }  @Override  public boolean onInterceptTouchEvent(MotionEvent event){    return viewDragHelper.shouldInterceptTouchEvent(event);  }  @Override  public boolean onTouchEvent(MotionEvent event) {    viewDragHelper.processTouchEvent(event);    return true;  }}

第三步，将拼图Bitmap按九宫格切割，生成ImageView添加到PuzzleLayout并进行排列。

首先，外界需要传入一个切割参数mSquareRootNum做为宽和高的切割份数，我们需要获取PuzzleLayout的宽和高，然后计算出每一块的宽mItemWidth和高mItemHeight， 将Bitmap等比例缩放到和PuzzleLayout大小相等，然后将图片按照类似上面这张图所标的形式进行切割，生成mSquareRootNum*mSquareRootNum份Bitmap，每个Bitmap对应创建一个ImageView载体添加到PuzzleLayout中，并进行布局排列。

创建子view， mHelper是封装的用来操作对应数据模型的帮助类DataHelper。

private void createChildren(){  mHelper.setSquareRootNum(mSquareRootNum);  DisplayMetrics dm = getResources().getDisplayMetrics();  BitmapFactory.Options options = new BitmapFactory.Options();  options.inDensity = dm.densityDpi;  Bitmap resource = BitmapFactory.decodeResource(getResources(), mDrawableId, options);  Bitmap bitmap = BitmapUtil.zoomImg(resource, mWidth, mHeight);  resource.recycle();  mItemWidth = mWidth / mSquareRootNum;  mItemHeight = mHeight / mSquareRootNum;  for (int i = 0; i < mSquareRootNum; i++){    for (int j = 0; j < mSquareRootNum; j++){      Log.d(TAG, "mItemWidth * x " + (mItemWidth * i));      Log.d(TAG, "mItemWidth * y " + (mItemWidth * j));      ImageView iv = new ImageView(getContext());      iv.setScaleType(ImageView.ScaleType.FIT_XY);      LayoutParams lp = new LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);      lp.leftMargin = j * mItemWidth;      lp.topMargin = i * mItemHeight;      iv.setLayoutParams(lp);      Bitmap b = Bitmap.createBitmap(bitmap, lp.leftMargin, lp.topMargin, mItemWidth, mItemHeight);      iv.setImageBitmap(b);      addView(iv);    }  }}

第四步，创建ImageView的对应数据模型。

public class Block {  public Block(int position, int vPosition, int hPosition){    this.position = position;    this.vPosition = vPosition;    this.hPosition = hPosition;  }  public int position;  public int vPosition;  public int hPosition;}

DataHelper.class

子View在父类的index与mHelper中model在models的index一一对应

class DataHelper {  static final int N = -1;  static final int L = 0;  static final int T = 1;  static final int R = 2;  static final int B = 3;  private static final String TAG = DataHelper.class.getSimpleName();  private int squareRootNum;  private List<Block> models;  DataHelper(){    models = new ArrayList<>();  }  private void reset() {    models.clear();    int position = 0;    for (int i = 0; i< squareRootNum; i++){      for (int j = 0; j < squareRootNum; j++){        models.add(new Block(position, i, j));        position ++;      }    }  }  void setSquareRootNum(int squareRootNum){    this.squareRootNum = squareRootNum;    reset();  }}

第五步，ViewDragHelper.Callback控制滑动边界的实现。

tryCaptureView的实现

public boolean tryCaptureView(View child, int pointerId) {      int index = indexOfChild(child);      return mHelper.getScrollDirection(index) != DataHelper.N;    }

DataHelper的getScrollDirection函数

int getScrollDirection(int index){  Block model = models.get(index);  int position = model.position;  //获取当前view所在位置的坐标 x y    int x = position % squareRootNum;  int y = position / squareRootNum;  int invisibleModelPosition = models.get(0).position;    if(x != 0 && invisibleModelPosition == position - 1)    return L;  if(x != squareRootNum - 1 && invisibleModelPosition == position + 1)    return R;  if(y != 0 && invisibleModelPosition == position - squareRootNum)    return T;  if(y != squareRootNum - 1 && invisibleModelPosition == position + squareRootNum)    return B;  return N;}

clampViewPositionHorizontal的实现细节，获取滑动方向左或右，再控制对应的滑动区域。

public int clampViewPositionHorizontal(View child, int left, int dx) {      int index = indexOfChild(child);      int position = mHelper.getModel(index).position;      int selfLeft = (position % mSquareRootNum) * mItemWidth;      int leftEdge = selfLeft - mItemWidth;      int rightEdge = selfLeft + mItemWidth;      int direction = mHelper.getScrollDirection(index);      //Log.d(TAG, "left " + left + " index" + index + " dx " + dx + " direction " + direction);      switch (direction){        case DataHelper.L:          if(left <= leftEdge)            return leftEdge;          else if(left >= selfLeft)            return selfLeft;          else            return left;        case DataHelper.R:          if(left >= rightEdge)            return rightEdge;          else if (left <= selfLeft)            return selfLeft;          else            return left;        default:          return selfLeft;      }    }

clampViewPositionVertical的实现细节，获取滑动方向上或下，再控制对应的滑动区域。

public int clampViewPositionVertical(View child, int top, int dy) {      int index = indexOfChild(child);      Block model = mHelper.getModel(index);      int position = model.position;      int selfTop = (position / mSquareRootNum) * mItemHeight;      int topEdge = selfTop - mItemHeight;      int bottomEdge = selfTop + mItemHeight;      int direction = mHelper.getScrollDirection(index);      //Log.d(TAG, "top " + top + " index " + index + " direction " + direction);      switch (direction){        case DataHelper.T:          if(top <= topEdge)            return topEdge;          else if (top >= selfTop)            return selfTop;          else            return top;        case DataHelper.B:          if(top >= bottomEdge)            return bottomEdge;          else if (top <= selfTop)            return selfTop;          else            return top;        default:          return selfTop;      }    }

onViewReleased的实现，当松手时，不可见View和松开的View之间进行布局参数交换，同时对应的model之间也需要通过swapValueWithInvisibleModel函数进行数据交换。

public void onViewReleased(View releasedChild, float xvel, float yvel) {      Log.d(TAG, "xvel " + xvel + " yvel " + yvel);      int index = indexOfChild(releasedChild);      boolean isCompleted = mHelper.swapValueWithInvisibleModel(index);      Block item = mHelper.getModel(index);      viewDragHelper.settleCapturedViewAt(item.hPosition * mItemWidth, item.vPosition * mItemHeight);      View invisibleView = getChildAt(0);      ViewGroup.LayoutParams layoutParams = invisibleView.getLayoutParams();      invisibleView.setLayoutParams(releasedChild.getLayoutParams());      releasedChild.setLayoutParams(layoutParams);      invalidate();      if(isCompleted){        invisibleView.setVisibility(VISIBLE);        mOnCompleteCallback.onComplete();      }    }

viewDragHelper.settleCapturedViewAt和viewDragHelper.continueSettling配合实现松手后的动画效果。

PuzzleLayout重写computeScroll函数。

@Overridepublic void computeScroll() {  if(viewDragHelper.continueSettling(true)) {    invalidate();  }}

swapValueWithInvisibleModel函数，每次交换完成后会return拼图是否完成

boolean swapValueWithInvisibleModel(int index){  Block fORMModel = models.get(index);  Block invisibleModel = models.get(0);  swapValue(formModel, invisibleModel);  return isCompleted();}private void swapValue(Block formModel, Block invisibleModel) {  int position = formModel.position;  int hPosition = formModel.hPosition;  int vPosition = formModel.vPosition;  formModel.position = invisibleModel.position;  formModel.hPosition = invisibleModel.hPosition;  formModel.vPosition = invisibleModel.vPosition;  invisibleModel.position = position;  invisibleModel.hPosition = hPosition;  invisibleModel.vPosition = vPosition;}private boolean isCompleted(){  int num = squareRootNum * squareRootNum;  for (int i = 0; i < num; i++){    Block model = models.get(i);    if(model.position != i){      return false;    }  }  return true;}

第六步，打乱ImageView的摆放位置。

这里不能随意打乱顺序，否则你可能永远也不能复原拼图了，这里使用的办法是每次在不可见View附近随机找一个View与不可见View进行位置交换，这里的位置交换指的是布局参数的交换，同时对应的数据模型也需要进行数据交换。

public void randomOrder(){  int num = mSquareRootNum * mSquareRootNum * 8;  View invisibleView = getChildAt(0);  View neighbor;  for (int i = 0; i < num; i ++){    int neighborPosition = mHelper.findNeighborIndexOfInvisibleModel();    ViewGroup.LayoutParams invisibleLp = invisibleView.getLayoutParams();    neighbor = getChildAt(neighborPosition);    invisibleView.setLayoutParams(neighbor.getLayoutParams());    neighbor.setLayoutParams(invisibleLp);    mHelper.swapValueWithInvisibleModel(neighborPosition);  }  invisibleView.setVisibility(INVISIBLE);}

DataHelper中findNeighborIndexOfInvisibleModel函数

public int findNeighborIndexOfInvisibleModel() {  Block invisibleModel = models.get(0);  int position = invisibleModel.position;  int x = position % squareRootNum;  int y = position / squareRootNum;  int direction = new Random(System.nanoTime()).nextInt(4);  Log.d(TAG, "direction " + direction);  switch (direction){    case L:      if(x != 0)        return getIndexByCurrentPosition(position - 1);    case T:      if(y != 0)        return getIndexByCurrentPosition(position - squareRootNum);    case R:      if(x != squareRootNum - 1)        return getIndexByCurrentPosition(position + 1);    case B:      if(y != squareRootNum - 1)        return getIndexByCurrentPosition(position + squareRootNum);  }  return findNeighborIndexOfInvisibleModel();}private int getIndexByCurrentPosition(int currentPosition){  int num = squareRootNum * squareRootNum;  for (int i = 0; i < num; i++) {    if(models.get(i).position == currentPosition)      return i;  }  return -1;}

以上就是怎么在Android中使用ViewDragHelper实现一个拼图游戏，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注编程网精选频道。