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