Android Tutorial Pinch Zoom and Move View tutorial

Dominex · Sep 25, 2012

[Class] Pinch Zoom and Move View

I had the need for my purposes to do the Pinch Zoom in contemporary Move to a View, now I put my code available to anyone who might be in need, just to get ideas on what to do.

Is required the library Gesture and Reflection of Agraham.

Events:
- Click
- LongClick
- Change

Property:
- CanMove
- CanZoom
- LimitArea
- LimitBorder
- Zoom

[UPDATE 1.00]
I changed the code in Class.

[UPDATE 1.10]
Added the following methods:
SetIfCanMove() - sets whether the View may translare or not.
GetIfCanMove - returns if the View can translate.
SetZoom() - sets the zoom.
GetZoom - returns the current zoom.

[UPDATE 1.20]
Improved zoom function, now the zoom is localized based on the touches.
Renamed Class in PinchZoomAndMove.

[UPDATE 1.30]
Added the possibility to set the BringToFront.
Added the possibility to set the Tag for a multi-View.
Added the "Click" event for the View.

[UPDATE 1.40]
Added the LongClick event for the View.
Added methods SetIfCanMove() - sets whether the View may zoom or not.
Inserted also Library version in Zip Class.
Changed the type of data sent with the Click events and LongClick.

[UPDATE 1.41]
Now works in Obfuscated mode. Thanks Informatix!
Improvements to minors.

[UPDATE 1.43]
Now the events are generated in different activity from the Main.
Added the following methods:
SetLimitBorder() - if it is True, the View will not come out from the edges of its parent.
SetLimitArea() - if True, the edges of the View will remain within its parent.

[UPDATE 1.44]
Added the Change event for the View.

[UPDATE 1.45]
Converted the property into methods for ease of use, but this requires a small change to the code of the old methods.

For suggestions and bug reports please do not hesitate to post it here.

padvou · Apr 25, 2014

I use this:

B4X:

PZ(0).Initialize(panel1,"PZ",0,1,3,1.5,False,Me)
PZ(0).LimitBorder = False

with this:

B4X:

camEx.Initialize(panel1, backCamera, Me, "Camera1")

After taking a fotograph, preview stops and panel show foto taken.
Move works fine, however zoom only zooms the panel and not the foto inside the panel.

Dominex · Apr 25, 2014

This is normal, to get the effect you want you have to use the Change event, updating every time the size of the image with that of the panel.

Example:

B4X:

Sub PZ_Change (Data As LayoutData)
    image.SetLayout(Data.Left,Data.Top,Data.Width,Data.Height)
End Sub

padvou · Apr 25, 2014

Dominex said:
This is normal, to get the effect you want you have to use the Change event, updating every time the size of the image with that of the panel.

Example:

B4X:

Sub PZ_Change (Data As LayoutData) image.SetLayout(Data.Left,Data.Top,Data.Width,Data.Height) End Sub

Youare right.
But, there is no image object. Panel1 is declared as I described and the goto taken is automatically shown after picturetaken event.

Dominex · Apr 25, 2014

Strange, if the picture is "drawn" on the panel, it will change size along with the panel. If it does not, this means that the image could be placed on the panel with a immageview undeclared or similar, if so, you should identify the index of the view and resize it as for my example.

padvou · Apr 25, 2014

I really appreciate you helping me with this. Although it's off-topic, could you please let me know how to identify the view's index?

Dominex · Apr 25, 2014

It is likely that the photo is the last view in index order entered in the panel, so maybe it can work.

B4X:

Sub PZ_Change (Data As LayoutData)
    Dim v As View
    v = panel1.GetView(panel1.NumberOfViews-1)
    v.SetLayout(Data.Left,Data.Top,Data.Width,Data.Height)
End Sub

padvou · Apr 25, 2014

It worked! However not flawlessly.
Please take a look at the attached pics.
Pic1 is 100% zoom as foto taken. Pic2 is zoomed. Notice the grey area. It's the color of the panel. The foto's view is zoomed but also displaced.

padvou · Apr 25, 2014

Success!

B4X:

Sub PZ_Change (Data As LayoutData)
    Dim v As View
    v = panel1.GetView(panel1.NumberOfViews-1)
    v.SetLayout(Data.Left-panel1.Left,Data.Top-panel1.Top,Data.Width,Data.Height)
   
End Sub

This is exactly what I was after.
Thank you very much for your efforts on the class and of course your valuable assistance!

Dominex · Apr 26, 2014

I figured, I'm glad you solved your problem.

slydog43 · May 27, 2014

any way to change the zoom sensativity, ie how much each pinch zooms the pic (I want faster zooming)

Dominex · May 27, 2014

slydog43 said:
any way to change the zoom sensativity, ie how much each pinch zooms the pic (I want faster zooming)

During initialization, you must declare a higher value of increase.

asales · Nov 14, 2014

It's possible use this class to zoom and move a label?
If yes, how I can do this?

Thanks in advance.

Dominex · Nov 15, 2014

Yes, the class will also work with the Label.
To do this you simply need to initialize the class with the Label as well as in the example is done with the ImageView.
The content of the label along with them, you will need to resize it with the "Change" method.

asales · Nov 16, 2014

Dominex said:
Yes, the class will also work with the Label.
To do this you simply need to initialize the class with the Label as well as in the example is done with the ImageView.
The content of the label along with them, you will need to resize it with the "Change" method.

Works fine. Thanks. Simple and efficient. Great library.

a2stepper · Jan 7, 2015

is there a way to zoom in like 150% the full screen size?
thanks.

Dominex · Jan 8, 2015

You have to make the ratio of the size of the original view (100%) and those of the screen, then calculate what percentage you should get 150%. I have not tried it but I think that we could succeed.

a2stepper · Jan 8, 2015

ok thanks i'll give it a try...

buras3 · Jan 11, 2015

Hello

I set to not move
but when you zoom few times the imv moves to the left
is there any way that the imv will not move at all (zoom and unzoom from the center?

lymey · Aug 26, 2015

Dominex said:
[Class] Pinch Zoom and Move View
For suggestions and bug reports please do not hesitate to post it here.

Can you give me an idea on how to modify the class so that I can pinch and stretch the view rather than zooming - in other words, not retaining the aspect ratio?

Dominex · Aug 26, 2015

lymey said:
Can you give me an idea on how to modify the class so that I can pinch and stretch the view rather than zooming - in other words, not retaining the aspect ratio?

It's a long time since I not program for lack of time, but you can do what you ask of course, this does not mean it's easy.

The code on lines 245 to 254 picks up the distance between your fingers when you zoom, rather than read the hypotenuse you have to read changes on the width and height.

Lines 288-307 make the zoom while maintaining the original aspect ratio, here you can zoom with the changes in the width and height without maintaining the aspect ratio.

I hope to be helped.

Android Tutorial Pinch Zoom and Move View tutorial

Attachments

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Active Member

Attachments

Active Member

Active Member

Member

Active Member

Expert

Active Member

Expert

Member

Active Member

Member

Active Member

Active Member

Active Member

Privacy & Transparency

Privacy & Transparency