服务器之家:专注于VPS、云服务器配置技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Android - Android App中实现可以双击放大和缩小图片功能的实例

Android App中实现可以双击放大和缩小图片功能的实例

2021-06-28 16:17Android开发网 Android

这篇文章主要介绍了Android App中实现可以双击放大和缩小图片功能的实例,文中的例子不能做到逐级放大但可以做到边界控制和以触摸点为中心进行放大,需要的朋友可以参考下

先来看一个很简单的核心图片缩放方法:

?
1
2
3
4
5
6
7
8
public static bitmap scale(bitmap bitmap, float scalewidth, float scaleheight) {
  int width = bitmap.getwidth();
  int height = bitmap.getheight();
  matrix matrix = new matrix();
  matrix.postscale(scalewidth, scaleheight);
  log.i(tag, "scalewidth:"+ scalewidth +", scaleheight:"+ scaleheight);
  return bitmap.createbitmap(bitmap, 0, 0, width, height, matrix, true);
}

注意要比例设置正确否则可能会内存溢出,比如曾经使用图片缩放时遇到这么个问题:

?
1
java.lang.illegalargumentexception: bitmap size exceeds 32bits

后来一行行查代码,发现原来是 scale 的比例计算错误,将原图给放大了 20 多倍,导致内存溢出所致,重新修改比例值后就正常了。

好了,下面真正来看一下这个实现了放大和原大两个级别的缩放的模块。
功能有:

  • 以触摸点为中心放大(这个是网上其他的代码没有的)
  • 边界控制(这个是网上其他的代码没有的)
  • 双击放大或缩小(主要考虑到电阻屏)
  • 多点触摸放大和缩小

这个模块已经通过了测试,并且用户也使用有一段时间了,是属于比较稳定的了。

下面贴上代码及使用方法(没有写测试项目,大家见谅):

imagecontrol 类似一个用户自定义的imageview控件。用法将在下面的代码中贴出。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
import android.content.context;
import android.graphics.bitmap;
import android.graphics.matrix;
import android.util.attributeset;
import android.util.floatmath;
import android.view.motionevent;
import android.widget.imageview;
 
public class imagecontrol extends imageview {
  public imagecontrol(context context) {
    super(context);
    // todo auto-generated constructor stub
  }
 
  public imagecontrol(context context, attributeset attrs) {
    super(context, attrs);
    // todo auto-generated constructor stub
  }
 
  public imagecontrol(context context, attributeset attrs, int defstyle) {
    super(context, attrs, defstyle);
    // todo auto-generated constructor stub
  }
 
  // imageview img;
  matrix imgmatrix = null; // 定义图片的变换矩阵
 
  static final int double_click_time_space = 300; // 双击时间间隔
  static final int double_point_distance = 10; // 两点放大两点间最小间距
  static final int none = 0;
  static final int drag = 1; // 拖动操作
  static final int zoom = 2; // 放大缩小操作
  private int mode = none; // 当前模式
 
  float bigscale = 3f; // 默认放大倍数
  boolean isbig = false; // 是否是放大状态
  long lastclicktime = 0; // 单击时间
  float startdistance; // 多点触摸两点距离
  float enddistance; // 多点触摸两点距离
 
  float topheight; // 状态栏高度和标题栏高度
  bitmap primarybitmap = null;
 
  float contentw; // 屏幕内容区宽度
  float contenth; // 屏幕内容区高度
 
  float primaryw; // 原图宽度
  float primaryh; // 原图高度
 
  float scale; // 适合屏幕缩放倍数
  boolean ismovex = true; // 是否允许在x轴拖动
  boolean ismovey = true; // 是否允许在y轴拖动
  float startx;
  float starty;
  float endx;
  float endy;
  float subx;
  float suby;
  float limitx1;
  float limitx2;
  float limity1;
  float limity2;
  icustommethod mcustommethod = null;
 
  /**
   * 初始化图片
   *
   * @param bitmap
   *      要显示的图片
   * @param contentw
   *      内容区域宽度
   * @param contenth
   *      内容区域高度
   * @param topheight
   *      状态栏高度和标题栏高度之和
   */
  public void imageinit(bitmap bitmap, int contentw, int contenth,
      int topheight, icustommethod icustommethod) {
    this.primarybitmap = bitmap;
    this.contentw = contentw;
    this.contenth = contenth;
    this.topheight = topheight;
    mcustommethod = icustommethod;
    primaryw = primarybitmap.getwidth();
    primaryh = primarybitmap.getheight();
    float scalex = (float) contentw / primaryw;
    float scaley = (float) contenth / primaryh;
    scale = scalex < scaley ? scalex : scaley;
    if (scale < 1 && 1 / scale < bigscale) {
      bigscale = (float) (1 / scale + 0.5);
    }
 
    imgmatrix = new matrix();
    subx = (contentw - primaryw * scale) / 2;
    suby = (contenth - primaryh * scale) / 2;
    this.setimagebitmap(primarybitmap);
    this.setscaletype(scaletype.matrix);
    imgmatrix.postscale(scale, scale);
    imgmatrix.posttranslate(subx, suby);
    this.setimagematrix(imgmatrix);
  }
 
  /**
   * 按下操作
   *
   * @param event
   */
  public void mousedown(motionevent event) {
    mode = none;
    startx = event.getrawx();
    starty = event.getrawy();
    if (event.getpointercount() == 1) {
      // 如果两次点击时间间隔小于一定值,则默认为双击事件
      if (event.geteventtime() - lastclicktime < double_click_time_space) {
        changesize(startx, starty);
      } else if (isbig) {
        mode = drag;
      }
    }
 
    lastclicktime = event.geteventtime();
  }
 
  /**
   * 非第一个点按下操作
   *
   * @param event
   */
  public void mousepointdown(motionevent event) {
    startdistance = getdistance(event);
    if (startdistance > double_point_distance) {
      mode = zoom;
    } else {
      mode = none;
    }
  }
 
  /**
   * 移动操作
   *
   * @param event
   */
  public void mousemove(motionevent event) {
    if ((mode == drag) && (ismovex || ismovey)) {
      float[] xy = gettranslatexy(imgmatrix);
      float transx = 0;
      float transy = 0;
      if (ismovex) {
        endx = event.getrawx();
        transx = endx - startx;
        if ((xy[0] + transx) <= limitx1) {
          transx = limitx1 - xy[0];
        }
        if ((xy[0] + transx) >= limitx2) {
          transx = limitx2 - xy[0];
        }
      }
      if (ismovey) {
        endy = event.getrawy();
        transy = endy - starty;
        if ((xy[1] + transy) <= limity1) {
          transy = limity1 - xy[1];
        }
        if ((xy[1] + transy) >= limity2) {
          transy = limity2 - xy[1];
        }
      }
 
      imgmatrix.posttranslate(transx, transy);
      startx = endx;
      starty = endy;
      this.setimagematrix(imgmatrix);
    } else if (mode == zoom && event.getpointercount() > 1) {
      enddistance = getdistance(event);
      float dif = enddistance - startdistance;
      if (math.abs(enddistance - startdistance) > double_point_distance) {
        if (isbig) {
          if (dif < 0) {
            changesize(0, 0);
            mode = none;
          }
        } else if (dif > 0) {
          float x = event.getx(0) / 2 + event.getx(1) / 2;
          float y = event.gety(0) / 2 + event.gety(1) / 2;
          changesize(x, y);
          mode = none;
        }
      }
    }
  }
 
  /**
   * 鼠标抬起事件
   */
  public void mouseup() {
    mode = none;
  }
 
  /**
   * 图片放大缩小
   *
   * @param x
   *      点击点x坐标
   * @param y
   *      点击点y坐标
   */
  private void changesize(float x, float y) {
    if (isbig) {
      // 如果处于最大状态,则还原
      imgmatrix.reset();
      imgmatrix.postscale(scale, scale);
      imgmatrix.posttranslate(subx, suby);
      isbig = false;
    } else {
      imgmatrix.postscale(bigscale, bigscale); // 在原有矩阵后乘放大倍数
      float transx = -((bigscale - 1) * x);
      float transy = -((bigscale - 1) * (y - topheight)); // (bigscale-1)(y-statusbarheight-suby)+2*suby;
      float currentwidth = primaryw * scale * bigscale; // 放大后图片大小
      float currentheight = primaryh * scale * bigscale;
      // 如果图片放大后超出屏幕范围处理
      if (currentheight > contenth) {
        limity1 = -(currentheight - contenth); // 平移限制
        limity2 = 0;
        ismovey = true; // 允许在y轴上拖动
        float currentsuby = bigscale * suby; // 当前平移距离
        // 平移后,内容区域上部有空白处理办法
        if (-transy < currentsuby) {
          transy = -currentsuby;
        }
        // 平移后,内容区域下部有空白处理办法
        if (currentsuby + transy < limity1) {
          transy = -(currentheight + currentsuby - contenth);
        }
      } else {
        // 如果图片放大后没有超出屏幕范围处理,则不允许拖动
        ismovey = false;
      }
 
      if (currentwidth > contentw) {
        limitx1 = -(currentwidth - contentw);
        limitx2 = 0;
        ismovex = true;
        float currentsubx = bigscale * subx;
        if (-transx < currentsubx) {
          transx = -currentsubx;
        }
        if (currentsubx + transx < limitx1) {
          transx = -(currentwidth + currentsubx - contentw);
        }
      } else {
        ismovex = false;
      }
 
      imgmatrix.posttranslate(transx, transy);
      isbig = true;
    }
 
    this.setimagematrix(imgmatrix);
    if (mcustommethod != null) {
      mcustommethod.custommethod(isbig);
    }
  }
 
  /**
   * 获取变换矩阵中x轴偏移量和y轴偏移量
   *
   * @param matrix
   *      变换矩阵
   * @return
   */
  private float[] gettranslatexy(matrix matrix) {
    float[] values = new float[9];
    matrix.getvalues(values);
    float[] floats = new float[2];
    floats[0] = values[matrix.mtrans_x];
    floats[1] = values[matrix.mtrans_y];
    return floats;
  }
 
  /**
   * 获取两点间的距离
   *
   * @param event
   * @return
   */
  private float getdistance(motionevent event) {
    float x = event.getx(0) - event.getx(1);
    float y = event.gety(0) - event.gety(1);
    return floatmath.sqrt(x * x + y * y);
  }
 
  /**
   * @author administrator 用户自定义方法
   */
  public interface icustommethod {
    public void custommethod(boolean currentstatus);
  }
}

 

imagevewactivity 这个用于测试的activity

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import android.app.activity;
import android.graphics.bitmap;
import android.graphics.rect;
import android.graphics.drawable.bitmapdrawable;
import android.os.bundle;
import android.view.motionevent;
import android.view.view;
import android.widget.linearlayout;
import android.widget.textview;
import android.widget.toast;
import ejiang.boiler.imagecontrol.icustommethod;
import ejiang.boiler.r.id;
 
public class imageviewactivity extends activity {
 
  @override
  protected void oncreate(bundle savedinstancestate) {
    // todo auto-generated method stub
    super.oncreate(savedinstancestate);
    setcontentview(r.layout.common_image_view);
    findview();
  }
 
  public void onwindowfocuschanged(boolean hasfocus) {
    super.onwindowfocuschanged(hasfocus);
    init();
  }
 
  imagecontrol imgcontrol;
  linearlayout lltitle;
  textview tvtitle;
 
  private void findview() {
    imgcontrol = (imagecontrol) findviewbyid(id.common_imageview_imagecontrol1);
    lltitle = (linearlayout) findviewbyid(id.common_imageview_lltitle);
    tvtitle = (textview) findviewbyid(id.common_imageview_title);
  }
 
  private void init() {
    tvtitle.settext("图片测试");
    // 这里可以为imgcontrol的图片路径动态赋值
    // ............
     
    bitmap bmp;
    if (imgcontrol.getdrawingcache() != null) {
      bmp = bitmap.createbitmap(imgcontrol.getdrawingcache());
    } else {
      bmp = ((bitmapdrawable) imgcontrol.getdrawable()).getbitmap();
    }
    rect frame = new rect();
    getwindow().getdecorview().getwindowvisibledisplayframe(frame);
    int statusbarheight = frame.top;
    int screenw = this.getwindowmanager().getdefaultdisplay().getwidth();
    int screenh = this.getwindowmanager().getdefaultdisplay().getheight()
        - statusbarheight;
    if (bmp != null) {
      imgcontrol.imageinit(bmp, screenw, screenh, statusbarheight,
          new icustommethod() {
            
            @override
            public void custommethod(boolean currentstatus) {
              // 当图片处于放大或缩小状态时,控制标题是否显示
              if (currentstatus) {
                lltitle.setvisibility(view.gone);
              } else {
                lltitle.setvisibility(view.visible);
              }
            }
          });
    }
    else
    {
      toast.maketext(imageviewactivity.this, "图片加载失败,请稍候再试!", toast.length_short)
          .show();
    }
 
  }
 
  @override
  public boolean ontouchevent(motionevent event) {
    switch (event.getaction() & motionevent.action_mask) {
    case motionevent.action_down:
      imgcontrol.mousedown(event);      
      break;
 
    /**
     * 非第一个点按下
     */
    case motionevent.action_pointer_down:
     
        imgcontrol.mousepointdown(event);
     
      break;
    case motionevent.action_move:
        imgcontrol.mousemove(event);
       
      break;
 
    case motionevent.action_up:
      imgcontrol.mouseup();
      break;
 
    }
 
    return super.ontouchevent(event);
  }
}

        在上面的代码中,需要注意两点。一activity中要重写ontouchevent方法,将触摸事件传递到imagecontrol,这点类似于wpf中的路由事件机制。二初始化imgcontrol即imgcontrol.imageinit,注意其中的参数。最后一个参数类似于c#中的委托,我这里使用接口来实现,在放大缩小的切换时要执行的操作都卸载这个方法中。


common_image_view.xml  布局文件

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?xml version="1.0" encoding="utf-8"?>
<relativelayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:id="@+id/rl"
  android:layout_width="fill_parent"
  android:layout_height="fill_parent" >
 
  <ejiang.boiler.imagecontrol
    android:id="@+id/common_imageview_imagecontrol1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:src="@drawable/ic_launcher" />
 
  <linearlayout
    android:id="@+id/common_imageview_lltitle"
    style="@style/reporttitle1"
    android:layout_alignparentleft="true"
    android:layout_alignparenttop="true" >
 
    <textview
      android:id="@+id/common_imageview_title"
      style="@style/title2"
      android:layout_width="fill_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1"
      android:text="报告" />
  </linearlayout>
 
</relativelayout>

延伸 · 阅读

精彩推荐
  • AndroidAndroid实现Service获取当前位置(GPS+基站)的方法

    Android实现Service获取当前位置(GPS+基站)的方法

    这篇文章主要介绍了Android实现Service获取当前位置(GPS+基站)的方法,较为详细的分析了Service基于GPS位置的技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

    Ruthless8342021-03-31
  • AndroidAndroid编程解析XML方法详解(SAX,DOM与PULL)

    Android编程解析XML方法详解(SAX,DOM与PULL)

    这篇文章主要介绍了Android编程解析XML方法,结合实例形式详细分析了Android解析XML文件的常用方法与相关实现技巧,需要的朋友可以参考下...

    liuhe68810052021-05-03
  • AndroidAndroid界面效果UI开发资料汇总(附资料包)

    Android界面效果UI开发资料汇总(附资料包)

    android ui界面设计,友好的界面会提高用户体验度;同时也增强了android ui界面设计的难度,本文提供了一些常用开发资料(有下载哦)感兴趣的朋友可以了解下...

    Android开发网4672021-01-03
  • Android汇总Android视频录制中常见问题

    汇总Android视频录制中常见问题

    这篇文章主要汇总了Android视频录制中常见问题,帮助大家更好地解决Android视频录制中常见的问题,需要的朋友可以参考下...

    yh_thu5192021-04-28
  • AndroidAndroid程序设计之AIDL实例详解

    Android程序设计之AIDL实例详解

    这篇文章主要介绍了Android程序设计的AIDL,以一个完整实例的形式较为详细的讲述了AIDL的原理及实现方法,需要的朋友可以参考下...

    Android开发网4642021-03-09
  • AndroidAndroid CardView+ViewPager实现ViewPager翻页动画的方法

    Android CardView+ViewPager实现ViewPager翻页动画的方法

    本篇文章主要介绍了Android CardView+ViewPager实现ViewPager翻页动画的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧...

    Abby代黎明9602022-03-02
  • AndroidAndroid实现固定屏幕显示的方法

    Android实现固定屏幕显示的方法

    这篇文章主要介绍了Android实现固定屏幕显示的方法,实例分析了Android屏幕固定显示所涉及的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下...

    鉴客6192021-03-27
  • AndroidAndroid中AsyncTask详细介绍

    Android中AsyncTask详细介绍

    这篇文章主要介绍了Android中AsyncTask详细介绍,AsyncTask是一个很常用的API,尤其异步处理数据并将数据应用到视图的操作场合,需要的朋友可以参考下...

    Android开发网7452021-03-11