当前位置: 开发笔记 > 运维 > 正文

Android利用ViewDragHelper轻松实现拼图游戏的示例

作者：zwliang19 | 来源：互联网 | 2022-10-03 21:13

前言最近一段时间看了一些介绍ViewDragHelper的博客，感觉这是一个处理手势滑动的神奇，看完以后就想做点东西练练手，于是就做了这

前言

最近一段时间看了一些介绍ViewDragHelper的博客，感觉这是一个处理手势滑动的神奇，看完以后就想做点东西练练手，于是就做了这个Android拼图小游戏。

先上个效果图

源码 https://github.com/kevin-mob/Puzzle

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处理拖动事件的对象。

实现思路

自定义PuzzleLayout继承自RelativeLayout。
将PuzzleLayout的onInterceptTouchEvent和onTouchEvent交给ViewDragHelper来处理。
将拼图Bitmap按九宫格切割，生成ImageView添加到PuzzleLayout并进行排列。
创建ImageView的对应数据模型。
ViewDragHelper.Callback控制滑动边界的实现。
打乱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这个处理手势滑动的神器。
在使用之前我们先简单的了解一下它的相关函数。

/**
 * Factory method to create a new ViewDragHelper.
 *
 * @param forParent Parent view to monitor
 * @param sensitivity Multiplier for how sensitive the helper
 * should be about detecting the start of a drag. 
 * Larger values are more sensitive. 1.0f is normal.
 * @param cb Callback to provide information and receive events
 * @return a new ViewDragHelper instance
 */
public static ViewDragHelper create(ViewGroup forParent, float sensitivity, Callback cb)

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

第一个参数是当前的ViewGroup。
第二个参数是检测拖动开始的灵敏度，1.0f为正常值。
第三个参数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。

/**
 * 将子View index与mHelper中models的index一一对应，
 * 每次在交换子View位置的时候model同步更新currentPosition。
 */
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

第四步，创建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 models;

  DataHelper(){
    models = new ArrayList<>();
  }

  private void reset() {
    models.clear();
    int position = 0;
    for (int i = 0; i

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

tryCaptureView的实现

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

DataHelper的getScrollDirection函数

/**
 * 获取索引处model的可移动方向，不能移动返回 -1。
 */
int getScrollDirection(int index){

  Block model = models.get(index);
  int position = model.position;

  //获取当前view所在位置的坐标 x y
  /*
   *   * * * *
   *   * o * *
   *   * * * *
   *   * * * *
   */
  int x = position % squareRootNum;
  int y = position / squareRootNum;
  int invisibleModelPosition = models.get(0).position;

  /*
   * 判断当前位置是否可以移动，如果可以移动就return可移动的方向。
   */

  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函数。

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

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


/**
 * 将索引出的model的值与不可见
 * model的值互换。
 */
boolean swapValueWithInvisibleModel(int index){
  Block formModel = models.get(index);
  Block invisibleModel = models.get(0);
  swapValue(formModel, invisibleModel);
  return isCompleted();
}

/**
 * 交换两个model的值
 */
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

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

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

public void randomOrder(){
  int num = mSquareRootNum * mSquareRootNum * 8;
  View invisibleView = getChildAt(0);
  View neighbor;
  for (int i = 0; i

DataHelper中findNeighborIndexOfInvisibleModel函数

/**
 * 随机查询出不可见
 * 位置周围的一个model的索引。
 */
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();
}

/**
 * 通过给定的位置获取model的索引
 */
private int getIndexByCurrentPosition(int currentPosition){
  int num = squareRootNum * squareRootNum;
  for (int i = 0; i

以上为主要的代码实现，全部工程已上传Github，欢迎学习，欢迎star,传送门
https://github.com/kevin-mob/Puzzle

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

推荐阅读

服务器
深入理解SAP Fiori及其核心概念

本文详细介绍了SAP Fiori的基本概念、发展历程、核心特性、应用类型、运行环境以及开发工具等，旨在帮助读者全面了解SAP Fiori的技术框架和应用场景。 ... [详细]

蜡笔小新 2024-11-28 22:05:47
nginx
深入探讨：从代码到Kubernetes部署的微服务实践——网关篇

本文详细介绍了如何利用go-zero框架从需求分析到最终部署至Kubernetes的全过程，特别聚焦于微服务架构中的网关设计与实现。项目采用了go-zero及其生态组件，涵盖了从API设计到RPC调用，再到生产环境下的监控与维护等多方面内容。 ... [详细]

蜡笔小新 2024-11-28 17:56:12
nginx
开发日志：Git连接异常处理

记录了一次多台开发机（Windows与MacOS）同时出现GitHub SSH连接超时及权限拒绝的问题，并详细描述了解决过程及最终解决方案。 ... [详细]

蜡笔小新 2024-11-29 09:53:07
nginx
电子与正电子的相互作用

本文探讨了电子与正电子之间的基本物理特性及其在现代物理学中的应用，包括它们的产生、湮灭过程以及在粒子加速器和宇宙射线中的表现。 ... [详细]

蜡笔小新 2024-11-29 09:09:04
dns
Python安全实践：Web安全与SQL注入防御

本文旨在介绍Web安全的基础知识，特别是如何使用Python和相关工具来识别和防止SQL注入攻击。通过实际案例分析，帮助读者理解SQL注入的危害，并掌握有效的防御策略。 ... [详细]

蜡笔小新 2024-11-28 19:57:23
dns
Manta Network 携手 Axelar 推动跨链隐私保护

Web3隐私协议Manta Network与区块链互操作性平台Axelar达成战略合作，共同推进跨链资产的隐私保护。 ... [详细]

蜡笔小新 2024-11-28 18:20:12
服务器
深入解析 Git 代码提交流程及常见问题处理

本文详细阐述了使用 Git 进行代码提交的具体步骤，并提供了遇到常见问题时的解决方案，旨在帮助开发者更加高效地管理代码。 ... [详细]

蜡笔小新 2024-11-28 17:06:39
运维
匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾（上）

匠心|传统_2021年度总结 | 葡萄城软件开发技术回顾（上） ... [详细]

蜡笔小新 2024-11-28 16:47:46
运维
Git 提交时如何忽略已提交或从远程仓库拉取但本地已修改的文件

本文介绍了如何使用 Git 命令来忽略那些已经提交或者从远程仓库拉取但在本地进行了修改的文件，避免这些文件在不必要的时候被再次提交。 ... [详细]

蜡笔小新 2024-11-28 16:13:24
运维
Swoole 扩展升级指南

本文介绍了如何通过源码编译和PECL命令来升级Swoole扩展，详细记录了可能遇到的问题及解决方案。 ... [详细]

蜡笔小新 2024-11-28 15:13:48
容器
Java实现AC自动机进行高效多模式匹配

本文介绍如何使用Java实现AC自动机（Aho-Corasick算法），以实现高效的多模式字符串匹配。文章涵盖了Trie树和KMP算法的基础知识，并提供了一个详细的代码示例，包括构建Trie树、设置失败指针以及执行搜索的过程。 ... [详细]

蜡笔小新 2024-11-28 14:52:17
容器
图神经网络模型综述

本文综述了图神经网络（Graph Neural Networks, GNN）的发展，从传统的数据存储模型转向图和动态模型，探讨了模型中的显性和隐性结构，并详细介绍了GNN的关键组件及其应用。 ... [详细]

蜡笔小新 2024-11-28 13:27:43
容器
Git 中文语言包安装指南

本文提供了详细的步骤，指导用户如何下载并安装 Git 的中文语言包，以提升用户体验。 ... [详细]

蜡笔小新 2024-11-27 19:56:48
容器
python 类class学习总结（程序验证，超详细，包括多继承、循环、super（）.xxx等）

python 类class学习总结（程序验证，超详细，包括多继承、循环、super（）.xxx等） ... [详细]

蜡笔小新 2024-11-27 17:34:00
容器
美国网络安全：MITRE Shield 积极防御知识库解析

本文深入解析了MITRE Shield积极防御知识库，探讨其在网络安全领域的应用及意义。 ... [详细]

蜡笔小新 2024-11-27 17:06:27

zwliang19

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章