Problème d'affichage des objets graphiques

Version imprimable

17/03/2013, 14h33
Johngtrs

Problème d'affichage des objets graphiques

Bonjour à tous,

Je suis entrain de développer une application sur Android et il s'avère que mon application ne s'affiche pas pareil sur tout les téléphones. Sur mon téléphone (Samsung Galaxie S) tout marche parfaitement, en revanche sur d'autres tout est décalé.

Est-ce que mon problème viendrait du fait que j'ai utilisé des absolute layout ?

Merci d'avance,

John.
17/03/2013, 14h47
nicroman

Très certainement oui... l'AbsoluteLayout est d'ailleurs déprécié depuis un bon moment, et ne sait pas s'adapter aux tailles d'écrans.
Si on pouvait voir le layout en question (capture + xml) ce serait bien.
20/03/2013, 18h28
Johngtrs

Bonjour et merci pour la réponse,

J'ai utilisé des absolute layout car je fais un accordeur de guitare et je place des boutons derrière une image (derrière les cordes). Vu que je n'arrivais pas à positionner mes boutons comme je voulais, j'ai donc utilisé un absolute.

Je vais ré-essayer en utilisant un autre layout puis si j'ai des problèmes je viendrais poser mon code.

Donc j'ai passé mon application en linear layout mais je n'arrive vraiment pas à placer mes objets comme je veux. Je cherche comment faire pour changer la valeur x et y d'un layout, car là, je ne vois plus rien.

Voyons juste pour le bouton basique "Stop".
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 // Je récupère mon layout principal LinearLayout layout = (LinearLayout) findViewById(R.id.alTuner); // Je créé mon bouton stop Button cmdStop = new Button(this); cmdStop.setText("Stop"); cmdStop.setBackgroundResource(R.drawable.imgbutton); LayoutParams lpCmdStop = new LayoutParams(layout.getLayoutParams().FILL_PARENT, layout.getLayoutParams().FILL_PARENT); cmdStop.setLayoutParams(lpCmdStop); // Je créé le layout du bouton stop en lui mettant une largeur et une hauteur LinearLayout layoutStop = new LinearLayout(this); layoutStop.setLayoutParams(new LinearLayout.LayoutParams(150, 80)); // Je créé l'image de la guitare ImageView img = new ImageView(this); img.setImageResource(R.drawable.guitar); LayoutParams lpImg = new LayoutParams(layout.getLayoutParams().FILL_PARENT, layout.getLayoutParams().FILL_PARENT); img.setLayoutParams(lpImg); // J'ajoute mes objets à mes layout layout.addView(img); layout.addView(layoutStop); layoutStop.addView(cmdStop);
Donc aucun moyen de positionner mon layout comme je veux, avant avec l'absolute layout je pouvais le positionner en faisant ceci :

Code:

layoutStop.setLayoutParams(new AbsoluteLayout.LayoutParams(150, 80, 170, 620));

Le constructeur de ce layout me permettait de gérer largeur hauteur x et y, mais pas celui du linear layout.

Comment faire ?

edit : J'ai remplacé mon code par ceci :
Code:

1 2 3 4 5 6 7 8 9 Button cmdStop = new Button(this); cmdStop.setText("Stop"); cmdStop.setBackgroundResource(R.drawable.imgbutton); LinearLayout.LayoutParams lpStop= new LinearLayout.LayoutParams(150, 80); lpStop.leftMargin = -300; lpStop.topMargin = 620; cmdStop.setLayoutParams(lpStop);
Mais on voit qu'il y a un problème. En fait mon image de derrière pousse mon bouton complétement sur la droite et donc il ne devient plus visible. Donc j'ai du mettre une valeur négative au leftMargin pour que mon bouton se positionne ou je veux. Mais ce n'est pas propre, je pense qu'il peut se produire d'autre problème à force. Comment faire pour superposer les objets sans avoir de contrainte au niveau des placements ?

22/03/2013, 22h26
Minicalion

Bonsoir Johngtrs,

Question stupide, une fois les boutons posé, il ne nécessiterons pas d'animation particulière?

Parce que, si par la suite tout ça est figé, pour les images que je veut superposé, je le ferais avec un outil d'édition/retouche d'image, et comme ça je suis tranquille.
23/03/2013, 00h20
Johngtrs

Bonsoir, je vois pas trop le rapport avec mon problème, mais pour répondre à ta question, les boutons n'auront pas d'animation pour le moment. Disons qu'ils seront cachés derrière une image.

Après pour mon problème de superposition d'objets, je pense avoir trouvé une solution au problème en utilisant un Relative Layout. Je continue à travailler sur cette solution et je confirmerais cela plus tard.
23/03/2013, 14h58
Johngtrs

Problème résolu.

C'était bien ça, il fallait bien utiliser un Relative Layout pour ne pas avoir de problème de décalage. Ce layout permet de superposer des objets graphiques et même plus ! Grâce à lui on peut superposer des layout.
23/03/2013, 18h42
nicroman

RelativeLayout permet de positionner des views les unes par rapport aux autres.
FrameLayout permet de positionner des views dans un frame (à coup de margin).
23/03/2013, 19h04
Johngtrs

Ca serait mieux d'utiliser le framelayout donc ?

Car je viens de tester sur un téléphone d'un ami, tout est décalé sur son portable alors que sur le mien il n'y a pas de problème
24/03/2013, 05h39
nicroman

ben il faudrait voir comment tu positionnes tes éléments, et par rapport à quoi.

Pour bénéficier d'un layout correct sur tous les devices, il faut bannir le pixel de son répertoire. Utiliser donc exclusivement les dip...
Ce que exclut au passage une image "scalée" pour remplir tout l'écran.

Pour placer mon bouton par exemple je fais comme ceci :

Code:

1
2
3
4
5
6
7
8
        Button cmdStop = new Button(this);
        cmdStop.setText("Stop");
        cmdStop.setBackgroundResource(R.drawable.imgbutton);
 
        RelativeLayout.LayoutParams lpStop = new RelativeLayout.LayoutParams(150, 80);
        lpStop.leftMargin = 170;
        lpStop.topMargin = 620;
        cmdStop.setLayoutParams(lpStop);

Le problème c'est que le leftMargin c'est du pixel.

25/03/2013, 11h08
nicroman

Heeee oui ;)

Non vraiment, si tu veux supporter un max de device, il faut bannir le pixel définitivement.
Pourquoi ne pas mettre les boutons dans le fichier layout d'ailleurs ?

Sinon, en code, il faut traduire des "dp" constants en fonction de l'écran.
Et les convertir en pixels à l'aide de DisplayMetrics

Je ne mets pas les boutons dans le fichier layout car tout simplement, pour d'autres bouton je fais une boucle pour créer 7 boutons. Après pour le bouton stop c'est clair qu'il pourrait être dans le fichier layout, mais bon pour les autres boutons dans la boucle il faut que je convertisse en dp mais je ne vois pas comment faire cela.

Mais je pense que je pourrais faire quelque chose avec ceci :
Code:

1 2 3 4 5 6 7 public static float convertPixelsToDp(float px,Context context){ Resources resources = context.getResources(); DisplayMetrics metrics = resources.getDisplayMetrics(); float dp = px / (metrics.densityDpi / 160f); return dp; }
J'essayerais tout à l'heure après avoir dormi ^^

27/03/2013, 13h46
nicroman

Ou plutot l'inverse... ;)

dp => pixels

Les layout-margins sont (programmaticalement) en pixels, hors la seule valeur "fixe" sont les dp d'un device à l'autre.... A condition bien sur de ne pas étirer une image en "fill_parent" (ou match_parent), parce que sinon, le calcul risque d'être bien plus complexe...
27/03/2013, 17h11
Johngtrs

A bon ? Je pensais qu'il fallait convertir en DP vu que c''est déjà en pixel.
27/03/2013, 18h11
nicroman

En fait j'en sais rien....

Au départ on a les données.
Ces données doivent s'adapter à toutes les tablettes donc sont dans un format "agnostique" (dips)
En bref, les "constantes" du code sont en DIPs.

Mais au runtime, le code a besoin d'avoir des pixels (margins)
Donc on convertit les dips en pixels.

Maintenant n'ayant aucune connaissance de l'interface en question, du layout, et de ce qui est attendu comme résultat, je ne peux que faire des réponses génériques.
28/03/2013, 17h32
Johngtrs

Ça ne fonctionne toujours pas toujours les mêmes décalage sur le téléphone de mon ami. Je veux juste que mon application soit adaptable à tout les smartphones, pour les tablettes c'est pas grave.

Mon interface est simple.

Une image de guitare où l'on voit toute les cordes. Un bouton stop en bas au milieu et derrière chaque corde de l'image de la guitare il a 1 bouton (donc 7 boutons vu qu'il y a 7 cordes) de la taille des cordes.
28/03/2013, 20h38
nicroman

Ouais... alors je vois toujours pas les boutons ne sont pas dans le layout directement....
En plus cela permettrait de tester directement dans l'éditeur d'interface sur plein de résolutions/devices différents...

La il me faudrait plus d'information, comment est dessinée la guitare, (ImageView ou background ?), la taille de l'image en hdpi par exemple, etc...
31/03/2013, 11h37
Johngtrs

C'est un imageview et la taille de l'image est 680 x 1024.

Je peux pas créer les boutons directement via l'interface graphique car je fais une boucle sur ma collection de bouton pour ajouter à chaque bouton un event onclick qui va jouer un son différent sur la corde clické.

680x1024 pixels ? d'ou vient cette taille ? et dans quelle résolution ? hdpi ?
Je dis ça parcequ'en général on part d'une taille en fixe en mdpi (par exemple) 320x480... et on applique les règles de 3 pour obtenir les tailles en ldpi, hdpi et xhdpi. Donc une résolution "hdpi" est forcément divisible par 3 (ce qui n'est ni le cas de 680 ni de 1024)

Imagions que ce soit le cas (sans doute le plus courant)...

Cela veut dire que l'ImageView a une taille fixe en dips de: 453.33dp x 683.66dp
(et ouais... c'est pas terrible hein !)
Elle est bien en mode wrap_content et pas en mode fill_parent (comme dans le cas d'un simple 'background'... auquel cas, l'image sera étirée en fonction de la taille de l'écran, et tout sera biaisé dès que la taille d'écran est modifiée).

1. As tu bien toutes les autres résolutions ? (ldpi: 340x513, mdpi: 453x683, xhdpi: 907x1367) ? Normalement Android devrait se débrouiller sans, mais j'ai vu des cas ou il ne le faisait pas bien.

2. Les boutons ensuite sont à positionner par rapport à cette "ImageView" en dips...

Citation:

Je peux pas créer les boutons directement via l'interface graphique car je fais une boucle sur ma collection de bouton pour ajouter à chaque bouton un event onclick qui va jouer un son différent sur la corde clické.

Je ne vois pas en quoi ceci est génant... on peut faire une boucle sur les éléments de l'interface déjà existants... par exemple, en nommant les boutons "bouton_1", "bouton_2", .... "bouton_18" et avoir une boucle du style:
Code:

1 2 3 4 5 6 for (int i = 0; (i < 18);++i) { String name = "bouton_"+Integer.toString(i+1); int buttonId = R.id.class.getField(name).getInt(null); // ya peut être du try/catch pour ce truc là. Button btn = (Button) findViewById(buttonId); }