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.

Ionut Indigo · Aug 30, 2013

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 · Sep 1, 2013

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?

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.

Ionut Indigo · Sep 1, 2013

Dominex said:
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.

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?

Dominex · Sep 2, 2013

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?

You can set the minimum zoom when you initialize the class, it is one of the parameters that you must enter.

deltacode · Oct 7, 2013

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()));

Erel · Oct 8, 2013

I've tested one of the projects with the latest beta (#7) and it worked fine. Can you upload your project (File - Export as zip)?

deltacode · Oct 15, 2013

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 ?

Erel · Oct 15, 2013

What is the type of PZ?

deltacode · Oct 15, 2013

Ive declared it as PinchZoomandMove

B4X:

Dim PZ as PinchZoomandMove

Erel · Oct 15, 2013

See PitchZoomAndMove example. It shows how to add this event.

deltacode · Oct 15, 2013

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

Dominex · Oct 17, 2013

deltacode said:
Ive declared it as PinchZoomandMove

B4X:

Dim PZ as PinchZoomandMove

B4X:

PZ.Initialize(imv,"PZ",Null,0.5,3,1.5,True,Me)

You must enter the EventName to create it.

Dominex · Dec 8, 2013

[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

holdemadvantage · Jan 11, 2014

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 · Jan 12, 2014

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

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.

holdemadvantage · Jan 12, 2014

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 · Jan 29, 2014

It is possible to increase the speed of motion picture? The zoom speed can be set. Thank you.

Dominex · Jan 30, 2014

siroky said:
It is possible to increase the speed of motion picture? The zoom speed can be set. Thank you.

This function is currently not present.

tuhatinhvn · Feb 7, 2014

Can rotate it by two finger?

Dominex · Feb 7, 2014

tuhatinhvn said:
Can rotate it by two finger?

Not at the moment, sorry.

Android Tutorial Pinch Zoom and Move View tutorial

Attachments

Member

Active Member

Member

Active Member

Member

B4X founder

Member

B4X founder

Member

B4X founder

Member

Active Member

Active Member

Active Member

Active Member

Active Member

New Member

Active Member

Active Member

Active Member

Privacy & Transparency

Privacy & Transparency