Zoom 2 doigts Multi-touch

**xouzi** · 20/02/2012, 18h43

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**Feanorin** · 23/02/2012, 11h39

Bonjour,

C'est quoi ton mc ?

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

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

**xouzi** · 23/02/2012, 12h00

Pour un layout

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**VinceCBA** · 21/08/2012, 17h29

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

**deepbreak** · 23/08/2012, 12h27

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**deepbreak** · 23/08/2012, 12h46

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

et

http://android-er.blogspot.fr/2011/1...hlistener.html

**VinceCBA** · 23/08/2012, 13h16

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

**xouzi** · 28/08/2012, 17h11

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 ?

**xouzi** · 29/08/2012, 17h56

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**deepbreak** · 30/08/2012, 10h26

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**xouzi** · 30/08/2012, 11h49

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

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

Je vais regarder merci.

Zoom 2 doigts Multi-touch

Android

Discussions similaires

Partager

Partager