Discussion :

[luta_seb]

Bonjour,
j ai un LinearLayout horizontal sur lequel je fais apparaître des ImageView, tous collés les uns aux autres.
Lorsque j'intercepte un MotionEvent sur ce layout, je cherche quelle ImageView est à cet endroit et je modifie sa taille en utilisant les méthode setScaleX/Y()
Le soucis est que les ImageView ne se replacent pas et je me retrouve avec un overlapping assez désagréable.

Auriez vous une idée? Est ce la définition de mon Layout qui n est pas bonne ou alors dois je implémenter le placement à la main ??
Merci

[Feanorin]

Bonjour,

On pourrait voir ton code quand tu mets à jour ton ImageView ?

[luta_seb]

oui bien sûr, tout d abord le fichier main.xml de 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
15
16
17
18
19
20
21
<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
 
 
    <ImageView
        android:id="@+id/mainImageView"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/i1" />
 
    <LinearLayout
        android:id="@+id/coverflow"
        android:orientation="horizontal"
        android:layout_width="match_parent"
        android:layout_height="35dp" 
        android:layout_gravity="bottom|center_vertical">
    </LinearLayout>
</FrameLayout>

mainImageView est l image qui occupe la totalité de l 'écran
coverflow (je n ai pas trouvé de meilleur nom) est la liste de thumbnails horizontaux

code de la classe CoverFlow qui prend en parametre le layout de thumbnails

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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
 
public class CoverFlow implements OnTouchListener {
	private final PageIterator pageIterator;
	private final ViewGroup layout;
 
	private View targetView;
	private CoverFlowListener coverFlowListener;
	private Animation anim;
	/**
 
*/
	public CoverFlow(ViewGroup layout, PageIterator imageIterator) {
		this.layout = layout;
		this.pageIterator = imageIterator;
		setup();
	}
 
	private void setup() {
		Resources resources = layout.getContext().getResources();
		pageIterator.moveFirst();
		Page page;
		ImageView img = null;
		LayoutParams params = new LayoutParams(LayoutParams.WRAP_CONTENT,
				LayoutParams.WRAP_CONTENT, 1f);
 
		while (pageIterator.hasNext()) {
			page = (Page) pageIterator.current();
 
			previous = img;
			img = new ImageView(layout.getContext());
			img.setImageBitmap(page.getBitmap());
			img.setId(page.getPageNum());
			layout.addView(img, params);
			pageIterator.next();
		}
		layout.invalidate();
		layout.setOnTouchListener(this);
		appear();
	}
 
	void appear()
	{
		anim = new AlphaAnimation(0.0f, 1.0f);
		anim.setDuration(4000);
		layout.startAnimation(anim);
	}
	void disappear()
	{
		anim = new AlphaAnimation(1.0f, 0.0f);
		anim.setDuration(4000);
		layout.startAnimation(anim);
	}
	public boolean onTouch(View v, MotionEvent event) {
		switch (event.getAction()) {
		case MotionEvent.ACTION_UP:
			detectView(event.getX());
			getCoverFlowListener().gotoPage(targetView.getId());
 
			break;
		case MotionEvent.ACTION_MOVE:
			detectView(event.getX());
			targetView.bringToFront();
			targetView.setScaleX(1.5f);
targetView.setScaleY(1.5f);
			targetView.invalidate();
			layout.invalidate();
			break;
		default:
 
		}
		return true;
	}
 
	/**
         * detection of the view the finger is over
         */
	private void detectView(float x) {
		UtilsForNoob.trace("children: " + String.valueOf(layout.getChildCount()));
		for(int i=0;i<layout.getChildCount();i++){
			UtilsForNoob.trace("child at "+ String.valueOf(i) +" " + String.valueOf(layout.getChildAt(i).getX()) );
			if(layout.getChildAt(i).getX()<= x && layout.getChildAt(i).getX()+layout.getChildAt(i).getWidth()>= x)
			{
				targetView = layout.getChildAt(i);
			}
		}
	}
 
	public CoverFlowListener getCoverFlowListener() {
		return coverFlowListener;
	}
 
	public void setCoverFlowListener(CoverFlowListener coverFlowListener) {
		this.coverFlowListener = coverFlowListener;
	}
}

[luta_seb]

j ai du éditer le code pour revenir a la version LinearLayout car entre temps j ai testé avec RelativeLayout en alignant la vue a droite de son voisin le précédent... le résultat est encore pire, j ai une vignette au milieu, une a droite...et c est tout alors que j en ai une vingtaine à afficher

[Feanorin]

En même temps tu fixes ton linearlayout à 35dp.

[luta_seb]

désolé je suis débutant , il me faudrait plus d explication
j ai fixé la hauteur du layout a 35.
Cela, selon toi bloquerait quoi?
parce que les vignettes se resize bien mais elles se chevauchent du coup

[Feanorin]

désolé je suis débutant , il me faudrait plus d explication

Euh désolé, j'avais commencé à écrire et quand j'ai validé il restait que ce message .

j ai fixé la hauteur du layout a 35.
Cela, selon toi bloquerait quoi?

Si tu fixes la hauteur de ton linear lorsque tu va faire un resize sur tes images contenues dans ce linear cela devrait le bloquer, à moins que je me trompe sur l'utilisation de ce linear.

Après juste une idée.

Ce que l'on peut faire c'est supprimer ce que tu as dans le layout et reconstruire (j'ai peur que l'invalidate à un peu de mal sur le coup).

Code :

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

1
2
layout.removeAllViewsInLayout();
// tu reconstuis dans layout avec la nouvelle image redimensionné

Dans ton

Code :

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

case MotionEvent.ACTION_MOVE:

[luta_seb]

ok, je vais essayer cela après mon essai de modification,
j essaie aussi de modifier mon layout pour qu il ait la propriété

Code :

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

android:layout_height="wrap_content"

et définir la taille des ImageView à 35 (faut que je trouve comment mais je vais y arriver
peut être que du coup le linear pourrait suivre.

Si cela ne marche pas (on sait jamais), j essaie ta solution que je garde sous le coude
MErci beaucoup en tout cas!
Il y a des chances pour que j ai beaucoup de questions en suspend

[luta_seb]

Bon, comme prévu ma solution ne fonctionne pas, même résultat
par contre dans le cas de ta solution le soucis est que pour l instant j effectue un changement de scale violent mais a terme se sera une animation

du coup faire ceci....

Code :

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

1
2
layout.removeAllViewsInLayout();
// tu reconstuis dans layout avec la nouvelle image redimensionné

risque d être TRES violent à gérer
non?

[Feanorin]

risque d être TRES violent à gérer

Fait l'animation après avoir reconstruit ton layout.

Par contre ne le fait pas sur le MOVE mais plutôt sur le UP , étant donnée que le MOVE donnera plusieurs évènements en peu de temps tu risques d'avoir quelque chose de vilain à l'écran. Tu peux toujours essayer comme cela également s'il le faut ca passe.

Après tu peux toujours faire l'animation après avoir recréer ton layout .
Peut être que le fait d'avoir déjà réservé la place pour le layout lui posera moins de souci.

Je pense que ca vaut le coup d'essayer.

[luta_seb]

...bon toujours pas mieu, j ai l animation mais le layout ne repositionne toujours pas les éléments
j ai modifié la méthode pour setter les imageView afin de prendre en compte l animation

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
public boolean onTouch(View v, MotionEvent event) {
		switch (event.getAction()) {
		// if(event.getAction() == MotionEvent.ACTION_UP)
		case MotionEvent.ACTION_UP:
			detectView(event.getX());
			getCoverFlowListener().gotoPage(targetView.getId());
 
			//break;
		//case MotionEvent.ACTION_MOVE:
			detectView(event.getX());
//			linearLayout.getChildCount()
			targetView.bringToFront();
			//targetView.setScaleX(1.5f);
			//targetView.setScaleY(1.5f);
			targetView.getLayoutParams().width = targetView.getLayoutParams().width * 2;
			targetView.invalidate();
			//anim = AnimationUtils.loadAnimation(
			anim = new ScaleAnimation(1f, 2f, 1f, 2f, Animation.RELATIVE_TO_SELF , 0.5f, Animation.RELATIVE_TO_SELF, 0.5f );
			anim.setDuration(3000);
 
			anim.setFillAfter(true);
			anim.setAnimationListener(this);
			targetView.startAnimation(anim);
			//layout.invalidate();
			break;
		default:
 
		}
		return true;
	}

j ai ajouté la méthode listener animationEnd

Code :

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

1
2
3
public void onAnimationEnd(Animation animation) {
		layout.invalidate();
	}

il n y a rien a faire....
ça craint pour mon 1er projet android c est pas folichon
je suis à court d idées

[Feanorin]

Je maintiens ce que je pense à mon avis tu dois tout détruire reconstuire ensuite avec l'image agrandi est de là faire ton animation de la petite image vers la grande, même si cela ne donnera pas un bon rendu (les deux images à côté elles ne seront pas animé donc tu auras un espace entre) tu auras le résultat escompté.
Sinon tu peux t'amuser à faire trois animations le tout coordonnée.