Android Tutorial Pinch Zoom and Move View tutorial

[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.
 

Attachments

  • Screenshot_2012-11-02-20-02-13 (ridotta).jpg
    Screenshot_2012-11-02-20-02-13 (ridotta).jpg
    28.8 KB · Views: 2,496
  • PinchZoomAndMove_1.45.zip
    115 KB · Views: 4,433
Last edited:
Click to expand...
padvou

padvou

Active Member
Licensed User
Longtime User
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.
 
Last edited:
Dominex

Dominex

Active Member
Licensed User
Longtime User
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

padvou

Active Member
Licensed User
Longtime User
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
Click to expand...
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

Dominex

Active Member
Licensed User
Longtime User
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.
 
Last edited:
padvou

padvou

Active Member
Licensed User
Longtime User
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

Dominex

Active Member
Licensed User
Longtime User
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

padvou

Active Member
Licensed User
Longtime User
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.
 

Attachments

  • 1.png
    1.png
    309.9 KB · Views: 438
  • 2.png
    2.png
    97.7 KB · Views: 488
padvou

padvou

Active Member
Licensed User
Longtime User
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!
 
S

slydog43

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

asales

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

Thanks in advance.
 
Dominex

Dominex

Active Member
Licensed User
Longtime User
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

asales

Expert
Licensed User
Longtime User
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.
Click to expand...
Works fine. Thanks. Simple and efficient. Great library.
 
B

buras3

Active Member
Licensed User
Longtime User
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?
 
L

lymey

Active Member
Licensed User
Longtime User
Dominex said:
[Class] Pinch Zoom and Move View
For suggestions and bug reports please do not hesitate to post it here.
Click to expand...

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

Dominex

Active Member
Licensed User
Longtime User
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?
Click to expand...
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.
 
You must log in or register to reply here.
Top