Problème d'affichage: horizontalscrollview + imageview

Version imprimable

16/01/2013, 11h53
michael093

Problème d'affichage: horizontalscrollview + imageview

Bonjour,

J'essaye de faire une liste d'image qui défile. Comme le défilement des photos sur un iphone :roll:
J'utilise donc un HorizontalScrollView qui contient un LinearLayout qui contient mes images (ImageView).
Mais le problème c'est que mes images garde leur taille d'origine (les images n'ont pas toutes la même taille) alors que je voudrais faire en sorte qu'elles soient toutes ajuster a l'écran.
J'espère que je me suis fait comprendre !
16/01/2013, 14h12
MrDuChnok

Salut,

Quand tu dis qu'il faut qu'elle est la même taille, tu veux :
- qu'elle soit étiré / réduite en gardant le meme ratio que ce que tu auras défini ?
- qu'elle soit étiré / réduite en se collant pile poile à la taille sur tu as défini ?
- qu'elle soit "cropé" pour se coller à la bonne taille ?
16/01/2013, 14h20
michael093

Je voudrais qu'elles prennent le plus de place possible dans l'écran tout en gardant son ratio! Toute les ImageView de mon layout sont donc censées avoir la même taille.
16/01/2013, 17h18
nicroman

Heu... il y a beaucoup d'images ?

Parceque bon... sur un écran "classique" chaque image fera en général 0,5Mo (480x288 land/port) ou 1,5Mo (800x480 land/land or port/port)...
Sachant que la limite de l'application oscille entre 16Mo (et 32Mo sur les téléphones récents).... Après une dizaine d'images, l'application va commencer à sérieusement ralentir (voir planter).

En fait tu ne veux voir qu'une seule image à la fois à l'écran... c'est bien ça ?
16/01/2013, 21h36
michael093

C'est une liste de 6 images max qui font à peu près 150Ko par images.
Et oui, je ne veux en voir qu'une seul à la fois!
Mais à partir du moment où je met le HorizontalScrollView, y a plus moyen de toutes les redimensionner à la taille de l’écran.
16/01/2013, 23h33
nicroman

Si mais il va peut-être falloir, en code leur assigner (à toute les ImageView) la taille de la scroll-view... et bien sur leur dire de scaler correctement l'image qu'elles doivent afficher.
16/01/2013, 23h43
michael093

Il faut donc que j'assigne à chaque ImageView la taille du scrollView? Ce serais pas plutôt la taille du scrollView divisé par le nombre d'image?
En attendant je vais essayer ça, merci.
16/01/2013, 23h49
nicroman

Non le scroll-view fait la taille de l'écran et affiche une portion de son "fils":
Le linear-layout qui lui fait la taille des 6 images, mais il va falloir lui dire "wrap_content" pour le limiter.

A moins que.... si tu es sur qu'il y a 6 images, ceci pourrait aller dans le XML (à essayer):
HorizontalScrollView: h=match_parent, v=match_parent, total_weight=1
LinearLayout: h=0,v=match_parent,weight=6,total_weight=1
ImageView: h=0,v=match_parent,weight=1

J'ai essayé de changer la taille des ImagesView:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 // Dans une classe dérivé de HorizontalScrollView // LayoutParams playout = new LayoutParams(getWidth(),LayoutParams.FILL_PARENT); for(int i = 0; i < items.size(); i++) { ImageView img = new ImageView(getContext()); img.setImageDrawable(items.get(i)); img.setLayoutParams(playout); internalWrapper.addView(img); }
avec "items" qui est ma liste de drawable et "internalwrapper" mon linearLayout contenant les imageview.

Le problème c'est que maintenant, plus rien ne s'affiche 8O !

Je précise que j'ai créer mon propre horizontalscrollView et que le nombre d'image peut être amené a varier.

J'ai vu que si plus rien ne s'affiche c'est parce que getWidth() renvoi "0", mais pourquoi ?

Ma fonction qui me permet d'affecter une liste d'image au scrollView :

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
 
 public void setFeatureItems(ArrayList<Drawable> items)
    {
        //Creé un linearLayout pour contenir chaque ecran dans le ScrollView
        LinearLayout internalWrapper = new LinearLayout(getContext());
        internalWrapper.setLayoutParams(new LayoutParams(LayoutParams.FILL_PARENT, LayoutParams.FILL_PARENT));
        internalWrapper.setOrientation(LinearLayout.HORIZONTAL);
        addView(internalWrapper);
 
        this.mItems = items;
        for(int i = 0; i < items.size(); i++)
        {
        	ImageView img = new ImageView(getContext());
        	img.setImageDrawable(items.get(i));
            internalWrapper.addView(img);
            //int test = getWidth();
            //img.getLayoutParams().width = test;
        	//img.requestLayout();
        }
 
        setOnTouchListener(new View.OnTouchListener()
        {
            @Override
            public boolean onTouch(View v, MotionEvent event)
            {
                //If the user swipes
                if (mGestureDetector.onTouchEvent(event))
                {
                    return true;
                }
                else if(event.getAction() == MotionEvent.ACTION_UP || event.getAction() == MotionEvent.ACTION_CANCEL )
                {
                    int scrollX = getScrollX();
                    int featureWidth = v.getMeasuredWidth();
                    mActiveFeature = ((scrollX + (featureWidth/2))/featureWidth);
                    int scrollTo = mActiveFeature*featureWidth;
                    smoothScrollTo(scrollTo, 0);
                    return true;
                }
                else
                {
                    return false;
                }
            }
        });
 
        mGestureDetector = new GestureDetector(new MyGestureDetector());
    }

Dans Le onCreate():

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
 
protected void onCreate(Bundle savedInstanceState)
	{
		super.onCreate(savedInstanceState);
 
		Drawable img1 = getResources().getDrawable(R.drawable.chateau_1);
		Drawable img2 = getResources().getDrawable(R.drawable.chateau_2);
		Drawable img3 = getResources().getDrawable(R.drawable.chateau_3);
		Drawable img4 = getResources().getDrawable(R.drawable.chateau_4);
		Drawable img5 = getResources().getDrawable(R.drawable.chateau_5);
		Drawable img6 = getResources().getDrawable(R.drawable.chateau_6);
 
		ImageScrollView img = new ImageScrollView(this);
 
		ArrayList<Drawable> items = new ArrayList<Drawable>();
		items.add(img1);
		items.add(img2);
		items.add(img3);
		items.add(img4);
		items.add(img5);
		items.add(img6);
 
		RelativeLayout rlt = new RelativeLayout(this);
		rlt.addView(img);
 
		setContentView(rlt);
		img.setFeatureItems(items);
	}

Je voie vraiment ce qui pose problème ?!

21/01/2013, 00h10
Feanorin

Bonjour,

Il faut que tu appelles de mémoire ta fonction après le onStart car les mesures ne sont calculé qu'à partir de ce moment et non au onCreate. (cad après la construction de ta vue).

Il me semble que l'on sait précisément suite à l'appel de cette fonction onMeasure(int,int) de ta vue.
http://developer.android.com/referen...sure(int, int)
21/01/2013, 09h52
ChPr
Je n'y connais pas grand chose pour l'instant, j'essaie moi aussi de manipuler des images. Une idée comme ça :
- ne pas utiliser de ScrollView,
- Dans le ImageView qui va recevoir l'image, mettre la propriété Scaled Type à la bonne valeur (je ne me souviens plus laquelle, mais il y en a plusieurs qui cadrent exactement l'image dans la fenêtre de visualisation,
- mettre en place l'évènement OnTOuchListener du ImageView
- sur la détection d'un déplacement horizontal (vers la gauche par exemple), remplacer l'image actuelle par la suivante et ainsi de suite.
A mon sens , ça devrait fonctionner.

Cordialement.

Pierre
21/01/2013, 10h45
anto2b

La solution: Tu stockes tes images dans un tableau. Ensuite tu utilise le ViewPage (rechercher la doc. sur google) et ensuite dans ton adapter tu instancie une image avec la méthode adéquat
21/01/2013, 10h47
michael093

Bonjour,

merci pour vos réponses, j'ai en effet changé la taille des ImageView dans onMeasure(int,int) et maintenant ça marche beaucoup mieux!
J'ai au début fait comme toi Pierre mais c'est beaucoup moins esthétique qu'avec un ScrollView.
Merci encore, sujet résolut :ccool: