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...
Ionut Indigo

Ionut Indigo

Member
Licensed User
Longtime User
Hey Dominex,
I will return later with the code for the positioning issue.
Right now, i was wondering if you can zoom out (make the image smaller) with SetLimitArea and SetLimitBorder set to false. The image starts with the original file dimensions (let's say 800x600) the margins are off-screen, and i want to pinch-in to make the image smaller. I can zoom in more, but not zoom out, beyond the image dimensions.
What is there to do?
 
Dominex

Dominex

Active Member
Licensed User
Longtime User
Ionut Indigo said:
Hey Dominex,
I will return later with the code for the positioning issue.
Right now, i was wondering if you can zoom out (make the image smaller) with SetLimitArea and SetLimitBorder set to false. The image starts with the original file dimensions (let's say 800x600) the margins are off-screen, and i want to pinch-in to make the image smaller. I can zoom in more, but not zoom out, beyond the image dimensions.
What is there to do?
Click to expand...
If I understand correctly what the need, you can do it, you have to be careful to set a minimum zoom sufficiently low to allow the reduction.
 
Dominex

Dominex

Active Member
Licensed User
Longtime User
Ionut Indigo said:
Yes, i was thinking about the minimum zoom (and maximum zoom if i want the user to zoom in more), but where do i change it?
Click to expand...
You can set the minimum zoom when you initialize the class, it is one of the parameters that you must enter.
 
D

deltacode

Member
Licensed User
Longtime User
Hi Dominex,

Under the new beta 3 rapid debug mode your library does not compile:

B4X: 
B4A line: 197
PZ.Initialize(imgMine,\
javac 1.7.0_40
shell\src\com\myname\myapp\myactivity_subs_0.java:449: error: package dominex.example does not exist
myactivity.mostCurrent._pz.runClassMethod (dominex.example.pinchzoomandmove.class, "_initialize",myactivity.mostCurrent.activityBA,RemoteObject.declareNull("anywheresoftware.b4a.AbsObjectWrapper").runMethod(false, "ConvertToWrapper", 
RemoteObject.createNew("anywheresoftware.b4a.objects.ConcreteViewWrapper"), myactivity.mostCurrent._imgMine.getObject()),(Object)(BA.ObjectToString("PZ")),
(Object)((_c)),(Object)(BA.numberCast(float.class, 1.0)),(Object)(BA.numberCast(float.class, 3.0)),(Object)(BA.numberCast(float.class, 15)),(Object)(myactivity.mostCurrent.__c.getField(true,"False")),(Object)(myactivity.getObject()));
 
D

deltacode

Member
Licensed User
Longtime User
Quick question. I want to catch a click event, so i added:

B4X: 
Sub PZ_Click
    do somethin ...
End Sub

PZ is declared in my globals but when i click the image i get:

java.lang.Exception: Sub pz_click signature does not match expected signature.

What am i missing to get this to work ?
 
D

deltacode

Member
Licensed User
Longtime User
Doh! Cheers Erel, what i get for staying up too late at night, did look at the examples but clearly missed it with my tired eyes :oops:
 
Dominex

Dominex

Active Member
Licensed User
Longtime User
[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 example, before:
B4X: 
PZ(NumView).SetIfCanMove(Not(PZ(NumView).GetIfCanMove))
PZ(NumView).SetZoom(100)
PZ.LimitBorder(True)

Now:
B4X: 
PZ(NumView).CanMove = Not(PZ(NumView).CanMove)
PZ(NumView).Zoom = 100
PZ.LimitBorder = True
 
H

holdemadvantage

Active Member
Licensed User
Longtime User
Hi, i would live to check position of a PinchZoomAndMove item like an imageview (x-y) while moving (while mouse is down and i move the imageview)
I need this to lock the image position in a certain area when mouse is up and the image center is over this area. Is it possibile with this library?

Ciao Dominex e complimenti per il tuo lavoro.
In sostanza dovrei muovere una imageview all'interno della mia activity, questa imageview è un elemento di un array di imageview che dichiaro all'interno del codice. Ovviamnete con il mouse down l'immagine segue la direzione dettata dal mouse, quando lo rilascio vorrei controllare automaticamente se mi trovo in una certa area (in particolare se il centro della mia immagine si trova all'interno dell'area da me scelta). Se cio' avviene allora posizionero' l'immagine all'interno di quest'area. E' possibile? Mi sembra che dal tuo esempio sia possibile controllare la posizione solo cliccando ( o col longclick) e non sulla base del mouseup event. Grazie per la tua risposta
 
Dominex

Dominex

Active Member
Licensed User
Longtime User
holdemadvantage said:
Hi, i would live to check position of a PinchZoomAndMove item like an imageview (x-y) while moving (while mouse is down and i move the imageview)
I need this to lock the image position in a certain area when mouse is up and the image center is over this area. Is it possibile with this library?

Ciao Dominex e complimenti per il tuo lavoro.
In sostanza dovrei muovere una imageview all'interno della mia activity, questa imageview è un elemento di un array di imageview che dichiaro all'interno del codice. Ovviamnete con il mouse down l'immagine segue la direzione dettata dal mouse, quando lo rilascio vorrei controllare automaticamente se mi trovo in una certa area (in particolare se il centro della mia immagine si trova all'interno dell'area da me scelta). Se cio' avviene allora posizionero' l'immagine all'interno di quest'area. E' possibile? Mi sembra che dal tuo esempio sia possibile controllare la posizione solo cliccando ( o col longclick) e non sulla base del mouseup event. Grazie per la tua risposta
Click to expand...

Ciao,
se ho capito bene l'evento "TouchUp" non lo generi con il tuo codice, altrimenti non avresti il problema dato che potresti già fare quello che ti serve, ma dovrebbe essere la classe a generarlo. Se è questo quello che ti serve non penso sia un problema aggiungere l'evento in questione, fammi sapere se ho capito bene.

Hello,
if I understand correctly the event "TouchUp" do not generate with your code, otherwise you would not have this problem since you can already do what you need, but it should be the class to generate it. If this is what you need I do not think it's a problem to add the event in question, let me know if I understand correctly.
 
H

holdemadvantage

Active Member
Licensed User
Longtime User
Yes, basically I needed to work on your class, mainly on G.ACTION_UP
I use the needed data into main activity (index of view, obj.left and obj.top) in a sub PROVA where I did my check
It seems to work perfectly and are very happy to be out on my own, I call the sub in this way:
B4X: 
Case G.ACTION_UP
'localtdata is a Touchdata private variable
'PROVA is a sub in main activity
        localtdata.X=obj.Left
        localtdata.Y=obj.top
        localtdata.Tag=vTag
        Log(X0 & " " & Y0 & " " & obj.Left & " " & obj.top & " " & obj.Width)
        
CallSubDelayed2(vModule,"PROVA",localtdata)


Si, fondamentalmente mi serviva lavorare sulla tua classe, principamente su G.ACTION_UP
Ho trasportato nell'activity principale i dati che mi servivano (indice della view, left e top della view) in una sub all'interno dell'activity principale dove ho fatto i controlli
Sembra funzionare alla perfezione e sono molto felice di esserci arrivato da solo, per richiamare la funzione ho utilizzato :
B4X: 
Case G.ACTION_UP
'localtdata is a Touchdata private variable
'PROVA is a sub in main activity
        localtdata.X=obj.Left
        localtdata.Y=obj.top
        localtdata.Tag=vTag
        Log(X0 & " " & Y0 & " " & obj.Left & " " & obj.top & " " & obj.Width)
        
CallSubDelayed2(vModule,"PROVA",localtdata)

Grazie per la tua class, se mi servono altre delucidazioni chiedero' qui ;)
 
siroky

siroky

New Member
Licensed User
Longtime User
It is possible to increase the speed of motion picture? The zoom speed can be set. Thank you.
 
You must log in or register to reply here.
Top