Zoom 2 doigts Multi-touch

Version imprimable

Bonjour,

Je ne sais pas par ou commencer pour mettre en place un zoom dans mon application avec les 2 doigts (comme pour l'iphone) pour agrandir ou réduire l'affichage de mon application.

je pensais utiliser ce code pour ecouter :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 ZoomControls zoomControls = (ZoomControls) findViewById(R.layout.main); zoomControls.setOnZoomInClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mc.zoomIn(); } }); zoomControls.setOnZoomOutClickListener(new View.OnClickListener() { @Override public void onClick(View v) { mc.zoomOut(); } });
mais je ne sais pas quoi mettre dans ma class mc.
Je pensais m'appuyer sur se site : http://jongladwin.blogspot.com/2010/...ut-images.html mais je ne suis pas sur d'avoir la bonne methode à la base.

J'ai penser utiliser http://www.zdnet.com/blog/burnette/h...;siu-container mais je ne le comprend pas.

Par ou commencer ?

23/02/2012, 11h39
Feanorin

Bonjour,

C'est quoi ton mc ?

Citation:

pour agrandir ou réduire l'affichage de mon application

Veux tu faire un zoom sur une Image, un layout , un objet personnalisé ,... ?

Pour un layout

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
void ZoomIn(float zoom) {
zoom += 0.01;
scaledWidth += zoom;
scaledHeight += zoom;
ShowImage();
 
}
 
void ZoomOut(float zoom) {
zoom -= 0.01;
scaledWidth -= zoom;
scaledHeight -= zoom;
}

21/08/2012, 17h29
VinceCBA

Bonjour,
Je suis également très intéressé pour zoomer une image avec 2 doigts.
J'ai une appli qui permet de prendre une photo, j'ai ensuite une visualisation de l'image avant de l'enregistrer, il faudrait donc que je puisse zoomer sur celle ci.

J'ai cherché un peu de partout mais je n'ai pas trouvé de réponse ...

com.polites.android.GestureImageView

Il existe une bibliothèque fort pratique pour celà. Il suffit de l'importer dans son projet pour utiliser ensuite les différentes Classes.
Elle se trouve ici :
https://github.com/jasonpolites/gest...ImageView.java

Ensuite pour le pinch zoom le xml du layout ressemblera à ça :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- L'ImageView "pinchable" est contenu dans un frame layout dont la hauteur et la disposition est bloquée -->
 
    <FrameLayout
        android:layout_width="match_parent"
        android:layout_below="@+id/title_art"
        android:layout_height="740dp"
        android:layout_above="@+id/linearLayout1">
 
 
<!-- ///////////////   UTILISATION DE LA BIBLIOTHEQUE POLITES POUR IMPLEMENTER LE ZOOM     /////////////////////////  -->
 
 
    <com.polites.android.GestureImageView
        android:id="@+id/image"
        android:layout_width="fill_parent"
        android:layout_height="424dp"
        gesture-image:max-scale="10.0" //facteurs d'agrandissement
        gesture-image:min-scale="0.1"
        gesture-image:recycle="true"
        android:src="@drawable/image"
        gesture-image:strict="false" />
 
    </FrameLayout>

Cordialement

23/08/2012, 12h46
deepbreak

plus

Deux autres sources intéressantes :
http://stackoverflow.com/questions/5...oid-pinch-zoom

et

http://android-er.blogspot.fr/2011/1...hlistener.html
23/08/2012, 13h16
VinceCBA

Super, merci pour tes réponses, je vais regarder ca de plus pres :)

Merci pour la doc sa m'a aidé. Pour le moment j'ai un bout de code qui fonctionne m'est qui donne un zoom bisar.

Code:

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
 
import android.app.Activity;
import android.graphics.PointF;
import android.os.Bundle;
import android.view.MotionEvent;
import android.view.ScaleGestureDetector;
import android.view.ScaleGestureDetector.SimpleOnScaleGestureListener;
import android.view.View;
import android.widget.LinearLayout;
import android.widget.TextView;
 
public class AndroidScaleGestureDetectorActivity extends Activity {
 
	TextView scaleGesture;
	LinearLayout line;
	ScaleGestureDetector scaleGestureDetector;
 
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
 
        line=(LinearLayout)findViewById(R.id.line);
        scaleGestureDetector = new ScaleGestureDetector(this, new simpleOnScaleGestureListener());
        PointF pivot;
    }
 
	@Override
	public boolean onTouchEvent(MotionEvent event) {
		// TODO Auto-generated method stub
		scaleGestureDetector.onTouchEvent(event);
		return true;
	}
 
	public class simpleOnScaleGestureListener extends SimpleOnScaleGestureListener {
 
		@Override
		public boolean onScale(ScaleGestureDetector detector) {
			// TODO Auto-generated method stub
			PointF pivot =new PointF(0,0);
			line.setPivotX(pivot.x);
			line.setPivotY(pivot.y);
			line.setScaleY(2f*detector.getScaleFactor());
			line.setScaleX(2f*detector.getScaleFactor());
 
			return true;
		}
 
		@Override
		public boolean onScaleBegin(ScaleGestureDetector detector) {
			// TODO Auto-generated method stub
			line.setVisibility(View.VISIBLE);
			return true;
		}
 
		@Override
		public void onScaleEnd(ScaleGestureDetector detector) {
			// TODO Auto-generated method stub
			line.setVisibility(View.VISIBLE);
		}
 
	}
}

xml :

Code:

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
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
   android:gravity="right" 
 
    >
 
    <Button
        android:id="@+id/imagedrapeau"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/ic_menu_home"
        android:gravity="right" />
 
	<LinearLayout 
	    android:id="@+id/line"
		android:layout_height="fill_parent" 
		android:layout_width="fill_parent">
 
		<ScrollView android:id="@+id/ScrollView11"
			android:layout_width="fill_parent" 
			android:layout_height="fill_parent"
			android:fillViewport="true">
 
			<LinearLayout 
			    android:layout_width="fill_parent"
				android:layout_height="fill_parent" 
				android:layout_margin="5dip">
 
				<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
					android:layout_width="fill_parent" 
					android:layout_height="fill_parent"
 
					android:id="@+id/tab">
 
				</TableLayout>
 
 
 
			</LinearLayout>
		</ScrollView>
	</LinearLayout>
 
 
 
</LinearLayout>

Mon pinch zoom ne fonctionne pas toujours est ce que sa peut venir de ma ScrollView ?

Le probléme vient bien de la scrollview si je l'enleve j'ai le zoom.
Comment je peux faire pour avoir les 2.

Code:

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
 
<?xml version="1.0" encoding="utf-8"?>
 
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
   android:gravity="right" 
    android:id="@+id/ll_country"
    >
 
	<LinearLayout 
 
		android:layout_height="fill_parent" 
		android:layout_width="fill_parent">
 
		<ScrollView android:id="@+id/ScrollView11"
			android:layout_width="fill_parent" 
			android:layout_height="fill_parent"
			android:fillViewport="true">
 
			<LinearLayout 
			    android:layout_width="fill_parent"
				android:layout_height="fill_parent" 
				android:layout_margin="5dip"
				android:id="@+id/ll_country">
 
				<TableLayout xmlns:android="http://schemas.android.com/apk/res/android"
					android:layout_width="fill_parent" 
					android:layout_height="fill_parent"
					android:stretchColumns="0,1" 
					android:paddingRight="20dp"
					android:id="@+id/country_table">
 
				</TableLayout>
 
			</LinearLayout>
	 </ScrollView>
	</LinearLayout>
 
 
 
</LinearLayout>

Code:

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
 
public void onCreate(Bundle savedInstanceState) 
	{
        super.onCreate(savedInstanceState);
        setContentView(R.layout.textview);
 
 
 
         line = (LinearLayout) findViewById(R.id.ll_country);
 
 
         scaleGestureDetector = new ScaleGestureDetector(this, new simpleOnScaleGestureListener());
 
 
	    //Initialise le tablelayout
        country_table=(TableLayout)findViewById(R.id.country_table);
		//allimente le tablelayout
		fillCountryTable(pays, id_type);
 
	}
 
	public boolean onTouchEvent(MotionEvent event) {
	//	if ((event.getAction() & MotionEvent.ACTION_MASK) == MotionEvent.ACTION_MOVE) {
 
		//if (event.getPointerCount()==2){
 
		//	float x = event.getX(0) - event.getX(1); 
		//	float y = event.getY(0) - event.getY(1); 
			scaleGestureDetector.onTouchEvent(event);
	//	}
	//	}
 
		return true;
	}
 
	public class simpleOnScaleGestureListener extends SimpleOnScaleGestureListener {
 
		@Override
		public boolean onScale(ScaleGestureDetector detector) {
			// TODO Auto-generated method stub
			 float scaleFactor = detector.getScaleFactor();
			 PointF pivot =new PointF(0,0);
 
			 if(scaleFactor > 1){
 
				line.setPivotX(pivot.x*2);
				line.setPivotY(pivot.y*2);
				line.setScaleY(2*detector.getScaleFactor());
				line.setScaleX(2*detector.getScaleFactor());
				//scaleGesture.setText(String.valueOf(detector.getScaleFactor()));
			 }else{
 
					line.setPivotX(pivot.x/2);
					line.setPivotY(pivot.y/2);
					line.setScaleY(detector.getScaleFactor()/2);
					line.setScaleX(detector.getScaleFactor()/2);
			 }
			return true;
		}
 
		@Override
		public boolean onScaleBegin(ScaleGestureDetector detector) {
			// TODO Auto-generated method stub
			line.setVisibility(View.VISIBLE);
			return true;
		}
 
		@Override
		public void onScaleEnd(ScaleGestureDetector detector) {
 
			line.setVisibility(View.VISIBLE);
 
		}
 
	}

onTouchEvent

La scrollview utilise aussi le onTouchEvent(MotionEvent ev) il y a certainement conflit. La solution que je compte utiliser car je travaille sur quelque chose de similaire c'est de créer une activité pour visualiser les images zoomables. Dans ta scrollview tu met des vignettes de tes images et tu explique (toast) à l'utilisateur qu'il faut cliquer sur l'image pour la zoomer.
Code:

1 2 3 4 5 6 7 mListView.setOnItemClickListener(new OnItemClickListener(){ @Override public void onItemClick(AdapterView<?> parent, View view, int position, long id) { La tu met l'intent qui envoie à l'activité du zoom... } }
Pour revenir à la scrollview il suffit d'utiliser le backbutton.

Désolé c'est tout ce que je vois...

Je zoom sur un layout pas sur une image.
J'ai déplacer ma scrollview de textview.xml est je le l'ai mi avec mes onglets.

Code:

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
 
 
   <ScrollView android:id="@+id/ScrollView11"
			android:layout_width="fill_parent" 
			android:layout_height="fill_parent"
			android:fillViewport="true">
 
	        <FrameLayout
			android:id="@android:id/tabcontent"
			android:layout_width="fill_parent"
			android:layout_height="fill_parent"
			android:paddingBottom="55dp"
			>
 
            </FrameLayout>
          </ScrollView>
    </LinearLayout>
 
  <HorizontalScrollView
 android:id="@+id/horizontalScrollView"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:layout_gravity= "bottom"
  android:fillViewport="true"
  android:scrollbars="none"
 >
 
 
	<TabWidget android:id="@android:id/tabs"
	android:layout_width="fill_parent"
	android:layout_height="fill_parent" 
	 android:layout_gravity= "bottom"
	 android:paddingBottom="5dp"
 
 />
	</HorizontalScrollView>
 
</TabHost>

Donc je ne suis plus embêter parcontre mon zoom ne fonctionne pas très bien.
Surement que j’implémente pas comme il faut:

Code:

1
2
3
4
5
6
7
8
9
10
 
scaleFactor = scaleFactor*detector.getScaleFactor();
			 PointF pivot =new PointF(scaleFactor*1f,scaleFactor*1f);
 
			// if(scaleFactor > 1){
 
				line.setPivotX(pivot.x);
				line.setPivotY(pivot.y);
				line.setScaleY(scaleFactor*1f);
				line.setScaleX(scaleFactor*1f);

Citation:

Pour revenir à la scrollview il suffit d'utiliser le backbutton.

Je vais regarder merci.