广告
返回顶部
首页 > 资讯 > 移动开发 >Android实现手势滑动多点触摸放大缩小图片效果
  • 361
分享到

Android实现手势滑动多点触摸放大缩小图片效果

小图图片手势Android 2022-06-06 09:06:02 361人浏览 泡泡鱼
摘要

网上文章虽多,但是这种效果少之又少,我真诚的献上以供大家参考 实现原理:自定义ImageView对此控件进行相应的layout(动态布局). 这里你要明白几个方法执行的流程:

网上文章虽多,但是这种效果少之又少,我真诚的献上以供大家参考

实现原理:自定义ImageView对此控件进行相应的layout(动态布局).

这里你要明白几个方法执行的流程:

首先ImageView是继承自View的子类.
onLayout方法:是一个回调方法.该方法会在在View中的layout方法中执行,在执行layout方法前面会首先执行setFrame方法.
setFrame方法:判断我们的View是否发生变化,如果发生变化,那么将最新的l,t,r,b传递给View,然后刷新进行动态更新UI. 并且返回ture.没有变化返回false.
在介绍自定义控件之前,我们先要明白我们要获取哪些数据:屏幕的宽度,屏幕的高度.(这里其实你也可以对LinerLayout进行ViewTreeObserver监听获取其宽高度.),原始图片本身的宽度及高度.以及我们缩放的最大最小值.
首先我们要重写setImageBitmap方法.作用:获取图片的宽高,求出缩放极限值.


 
  @Override 
  public void setImageBitmap(Bitmap bm) { 
    super.setImageBitmap(bm); 
     
    bitmap_W = bm.getWidth(); 
    bitmap_H = bm.getHeight(); 
    MAX_W = bitmap_W * 3; 
    MAX_H = bitmap_H * 3; 
    MIN_W = bitmap_W / 2; 
    MIN_H = bitmap_H / 2; 
  }

接着我们在onLayout方法中我们获取最初的l,t,r,b.


@Override 
  protected void onLayout(boolean changed, int left, int top, int right, 
      int bottom) { 
    super.onLayout(changed, left, top, right, bottom); 
    if (start_Top == -1) { 
      start_Top = top; 
      start_Left = left; 
      start_Bottom = bottom; 
      start_Right = right; 
    } 
  } 

下面我们说下重点Touch方法.其实原来大家都明白,要说难的话估计就是逻辑实现了.
说之前大家要明白单点与多点的区别:
单手指操作:ACTioN_DOWN---ACTION_MOVE----ACTION_UP
多手指操作:ACTION_DOWN---ACTION_POINTER_DOWN---ACTION_MOVE--ACTION_POINTER_UP---ACTION_UP.

上面只是简单说下流程,详细请大家自行研究,这里只是讲解如果运用.


 
  @Override 
  public boolean onTouchEvent(MotionEvent event) { 
     
    switch (event.getAction() & MotionEvent.ACTION_MASK) { 
    case MotionEvent.ACTION_DOWN: 
      onTouchDown(event); 
      break; 
    // 多点触摸 
    case MotionEvent.ACTION_POINTER_DOWN: 
      onPointerDown(event); 
      break; 
    case MotionEvent.ACTION_MOVE: 
      onTouchMove(event); 
      break; 
    case MotionEvent.ACTION_UP: 
      mode = MODE.NONE; 
      break; 
    // 多点松开 
    case MotionEvent.ACTION_POINTER_UP: 
      mode = MODE.NONE; 
       
      if (isScaleAnim) { 
        doScaleAnim(); 
      } 
      break; 
    } 
    return true; 
  } 

这里的实现我都分开写了,利于大家的观看,在这里我顺便说一下自定义控件返回值:如果对于没有孩子的控件,如果要对Touch处理最好return true.这样也是游戏开发中经常用的,如果该控件有孩子的话,可不要这么弄,不然孩子会监听不到Touch事件.

下面我们一个一个方法的看:
onTouchDown:获取手指点击时候的起始坐标.


 
  void onTouchDown(MotionEvent event) { 
    mode = MODE.DRAG; 
    current_x = (int) event.getRawX(); 
    current_y = (int) event.getRawY(); 
    start_x = (int) event.getX(); 
    start_y = current_y - this.getTop(); 
  } 

这里大家也要明白 event.getRawX()和event.getX(),不过我相信大家都明白的,我前面那篇ListView拖拽也提到过.一个相对屏幕,一个相对父控件.

onPointerDown:两手指之间的距离.


 
  void onPointerDown(MotionEvent event) { 
    if (event.getPointerCount() == 2) { 
      mode = MODE.ZOOM; 
      beforeLenght = getDistance(event);// 获取两点的距离 
    } 
  } 

onTouchMove:移动的处理.


 
void onTouchMove(MotionEvent event) { 
  int left = 0, top = 0, right = 0, bottom = 0; 
   
  if (mode == MODE.DRAG) { 
     
     
    left = current_x - start_x; 
    right = current_x + this.getWidth() - start_x; 
    top = current_y - start_y; 
    bottom = current_y - start_y + this.getHeight(); 
     
    if (isControl_H) { 
      if (left >= 0) { 
        left = 0; 
        right = this.getWidth(); 
      } 
      if (right <= screen_W) { 
        left = screen_W - this.getWidth(); 
        right = screen_W; 
      } 
    } else { 
      left = this.getLeft(); 
      right = this.getRight(); 
    } 
     
    if (isControl_V) { 
      if (top >= 0) { 
        top = 0; 
        bottom = this.getHeight(); 
      } 
      if (bottom <= screen_H) { 
        top = screen_H - this.getHeight(); 
        bottom = screen_H; 
      } 
    } else { 
      top = this.getTop(); 
      bottom = this.getBottom(); 
    } 
    if (isControl_H || isControl_V) 
      this.setPosition(left, top, right, bottom); 
    current_x = (int) event.getRawX(); 
    current_y = (int) event.getRawY(); 
  } 
   
  else if (mode == MODE.ZOOM) { 
    afterLenght = getDistance(event);// 获取两点的距离 
    float gapLenght = afterLenght - beforeLenght;// 变化的长度 
    if (Math.abs(gapLenght) > 5f) { 
      scale_temp = afterLenght / beforeLenght;// 求的缩放的比例 
      this.setScale(scale_temp); 
      beforeLenght = afterLenght; 
    } 
  } 
} 

处理的逻辑比较繁多,但上诉代码大部分都已注释,我相信大家都看得懂,大家可以掌握原理后可以进行自己的逻辑处理.

下面我们看下缩放处理,因为考虑到越界与否.
setScale方法:


 
  void setScale(float scale) { 
    int disX = (int) (this.getWidth() * Math.abs(1 - scale)) / 4;// 获取缩放水平距离 
    int disY = (int) (this.getHeight() * Math.abs(1 - scale)) / 4;// 获取缩放垂直距离 
    // 放大 
    if (scale > 1 && this.getWidth() <= MAX_W) { 
      current_Left = this.getLeft() - disX; 
      current_Top = this.getTop() - disY; 
      current_Right = this.getRight() + disX; 
      current_Bottom = this.getBottom() + disY; 
      this.setFrame(current_Left, current_Top, current_Right, 
          current_Bottom); 
       
      if (current_Top <= 0 && current_Bottom >= screen_H) { 
        Log.e("jj", "屏幕高度=" + this.getHeight()); 
        isControl_V = true;// 开启垂直监控 
      } else { 
        isControl_V = false; 
      } 
      if (current_Left <= 0 && current_Right >= screen_W) { 
        isControl_H = true;// 开启水平监控 
      } else { 
        isControl_H = false; 
      } 
    } 
    // 缩小 
    else if (scale < 1 && this.getWidth() >= MIN_W) { 
      current_Left = this.getLeft() + disX; 
      current_Top = this.getTop() + disY; 
      current_Right = this.getRight() - disX; 
      current_Bottom = this.getBottom() - disY; 
       
      // 上边越界 
      if (isControl_V && current_Top > 0) { 
        current_Top = 0; 
        current_Bottom = this.getBottom() - 2 * disY; 
        if (current_Bottom < screen_H) { 
          current_Bottom = screen_H; 
          isControl_V = false;// 关闭垂直监听 
        } 
      } 
      // 下边越界 
      if (isControl_V && current_Bottom < screen_H) { 
        current_Bottom = screen_H; 
        current_Top = this.getTop() + 2 * disY; 
        if (current_Top > 0) { 
          current_Top = 0; 
          isControl_V = false;// 关闭垂直监听 
        } 
      } 
      // 左边越界 
      if (isControl_H && current_Left >= 0) { 
        current_Left = 0; 
        current_Right = this.getRight() - 2 * disX; 
        if (current_Right <= screen_W) { 
          current_Right = screen_W; 
          isControl_H = false;// 关闭 
        } 
      } 
      // 右边越界 
      if (isControl_H && current_Right <= screen_W) { 
        current_Right = screen_W; 
        current_Left = this.getLeft() + 2 * disX; 
        if (current_Left >= 0) { 
          current_Left = 0; 
          isControl_H = false;// 关闭 
        } 
      } 
      if (isControl_H || isControl_V) { 
        this.setFrame(current_Left, current_Top, current_Right, 
            current_Bottom); 
      } else { 
        this.setFrame(current_Left, current_Top, current_Right, 
            current_Bottom); 
        isScaleAnim = true;// 开启缩放动画 
      } 
    } 
  } 

首先我们先看下放大方法:这里面我们要时时监听水平或垂直是否已经铺满(该其实应说成布局),如果铺满或超过那么对应的水平或垂直方向就可以进行托移.代码注释很清晰大家可以看上面注释.

接下来我们看下缩小,这个相对复杂了一点。首先我们要考虑到放大后的托移,这样的话我们在进行缩小的时候肯定l,t,r,b她们不会同时缩到屏幕边界,因此此时就要进行处理,如果一方先缩到屏幕边界的话,那么你就停下来等等你的对面(记住此时你对面缩放的速率是原来的2倍,不然图片会变形的.大家自己想想看是不是),等到你对面也缩到屏幕边界的话,此时要关闭监听.然后你们两个在一起缩.原理就是这样.
不太明白的话,大家可以看上述代码,我相信大家都看的明白.
最后我们还要实现缩放回缩效果(比较人性化.)
刚开始我想到了ScaleAnimation,可是实现一半问题出现了,我回缩动画完毕后她又自动回到最初大小,也许你会说你少加了setFillAfter(true); 可是加了后会出现诡异现象:又会重新覆盖一层,原因不明,大家可以试试看.既然api给的动画实现不了,那我就自己做吧.下面看具体实现.
MyAsyncTask异步类.


 
  class MyAsyncTask extends AsyncTask<Void, Integer, Void> { 
    private int screen_W, current_Width, current_Height; 
    private int left, top, right, bottom; 
    private float scale_WH;// 宽高的比例 
     
    public void setLTRB(int left, int top, int right, int bottom) { 
      this.left = left; 
      this.top = top; 
      this.right = right; 
      this.bottom = bottom; 
    } 
    private float STEP = 5f;// 步伐 
    private float step_H, step_V;// 水平步伐,垂直步伐 
    public MyAsyncTask(int screen_W, int current_Width, int current_Height) { 
      super(); 
      this.screen_W = screen_W; 
      this.current_Width = current_Width; 
      this.current_Height = current_Height; 
      scale_WH = (float) current_Height / current_Width; 
      step_H = STEP; 
      step_V = scale_WH * STEP; 
    } 
    @Override 
    protected Void doInBackground(Void... params) { 
      while (current_Width <= screen_W) { 
        left -= step_H; 
        top -= step_V; 
        right += step_H; 
        bottom += step_V; 
        current_Width += 2 * step_H; 
        left = Math.max(left, start_Left); 
        top = Math.max(top, start_Top); 
        right = Math.min(right, start_Right); 
        bottom = Math.min(bottom, start_Bottom); 
        onProgressUpdate(new Integer[] { left, top, right, bottom }); 
        try { 
          Thread.sleep(10); 
        } catch (InterruptedException e) { 
          e.printStackTrace(); 
        } 
      } 
      return null; 
    } 
    @Override 
    protected void onProgressUpdate(final Integer... values) { 
      super.onProgressUpdate(values); 
      Mactivity.runOnUiThread(new Runnable() { 
        @Override 
        public void run() { 
          setFrame(values[0], values[1], values[2], values[3]); 
        } 
      }); 
    } 
  } 

这个我就不详细讲解了,大家要注意的是水平和垂直方向的速率.

最后我们看下布局,调用也相当简单,也有助于我们添加辅助UI,千万不要忘记写 Android:scaleType="fitXY"这句话,不然有时候会出现诡异现象.


<?xml version="1.0" encoding="utf-8"?> 
<LinearLayout xmlns:android="Http://schemas.android.com/apk/res/android" 
  android:layout_width="fill_parent" 
  android:layout_height="fill_parent" 
  android:gravity="center" > 
  <com.jj.drag.DragImageView 
    android:id="@+id/div_main" 
    android:layout_width="wrap_content" 
    android:layout_height="wrap_content"  
    android:scaleType="fitXY" 
    /> 
</LinearLayout> 

在Acitivity中调用:


 
    viewTreeObserver = dragImageView.getViewTreeObserver(); 
    viewTreeObserver 
        .addOnGlobalLayoutListener(new OnGlobalLayoutListener() { 
          @Override 
          public void onGlobalLayout() { 
            if (state_height == 0) { 
              // 获取状况栏高度 
              Rect frame = new Rect(); 
              getWindow().getDecorView() 
                  .getWindowVisibleDisplayFrame(frame); 
              state_height = frame.top; 
              dragImageView.setScreen_H(window_height-state_height); 
              dragImageView.setScreen_W(window_width); 
            } 
          } 
        }); 

以上就是全部实现.最后我们看下实现的效果吧.

原图大小  

    

放大后拖拽到左上角  

    

缩小后(松开会回缩)  

长大于宽

感觉运行的效果还行,和腾讯新浪的差不多.至于辅助UI元素,大家可以自行修改添加,这里我只是把这种形式的实现献给大家.

您可能感兴趣的文章:Android实现图片浏览器示例Android编程实现的超炫图片浏览器Android使用gallery和imageSwitch制作可左右循环滑动的图片浏览器Android应用中图片浏览时实现自动切换功能的方法详解Android实现网络图片浏览器Android WEBView中图片浏览及缩放效果Android实现ImageView图片双击放大及缩小Android实现图片反转、翻转、旋转、放大和缩小Android多点触控实现对图片放大缩小平移,惯性滑动等功能Android中imageView图片放大缩小及旋转功能示例代码Android开发实现的图片浏览功能示例【放大图片】


--结束END--

本文标题: Android实现手势滑动多点触摸放大缩小图片效果

本文链接: https://www.lsjlt.com/news/25716.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作