Discussion :

[atha2]

Bonjour,

Je voudrais avoir l'interface suivante :

• un LinearLayout de la dimension d'une image (avec cette dernière en background) => la taille du layout ne doit pas changer. A noter que je ne peux pas mettre la taille en dure : j'ai plusieurs sets d'images pour chaque résolution.
• Dans ce layout sont disposer l'un :
  
  • une imageView de taille fixe qui dépend de la taille du layout (le drawable/bitmap doit être redimensionner si besoin)
  • un TextView dont la taille est aussi fixe et liée au layout
  • un bouton dont la taille est définie par une image
  
  

Comment dois-je définir les attributs layout_width/height ? Je n'ai pas trouvé de moyen pour que la taille du layout soit exactement celle de l'image. Il est toujours redimensionné en fonction de ses composants.

Voici mon code actuel (qui est inclus dans le root 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
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
 
<LinearLayout
            android:id="@+id/playerInfo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/background_track_info"
            android:orientation="horizontal"
            android:weightSum="389" >
 
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:layout_weight="170"
                    android:gravity="center" >
 
                    <ImageView
                        android:id="@+id/album_cover"
                        android:adjustViewBounds="true"
                        android:scaleType="fitCenter"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                      />
                </LinearLayout>
 
                <TextView
                    android:id="@+id/trackInfo"
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:layout_weight="184"
 
                    android:text="@string/no_track_selected"
                    android:textSize="12sp" />
 
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="wrap_content"
                    android:layout_weight="35"
                    android:gravity="center" >
 
                    <Button
                        android:id="@+id/button_list"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content"
                        android:background="@drawable/player_button_folder" >
                    </Button>
                </LinearLayout>
            </LinearLayout>

Il y a-t-il un moyen de réaliser cela ? Avec un autre layout ?
Je tourne en rond depuis quelque jour et pas moyen de réaliser ce que je veux faire

[nicroman]

Ben il suffit de mettre les dp exacts de l'image dans la taille du LinearLayout (celui qui contient l'image de background) au lieu de wrap_content comme c'est le cas actuellement.


Pourrais-tu nous faire un dessin de ce que tu cherches à obtenir ? parce le XML semble avoir tout un tas de layouts inutiles... mais du coup je n'en suis pas sur

[atha2]

Merci de ta réponse nicroman.
J'ai également pensé à définir la taille en d(i)p, cependant il y a 2 problèmes (AMHA mais je peux me tromper) à cette solution :

• j'ai plusieurs jeux d'images en fonction de la résolution (hdpi, mdpi...) et je vais devoir utiliser des dimens pour chaque résolution (pas forcément un gros problème en soi) ;
• j'ai déjà essayé avec des d(i)p et des px : dans le premier cas j'ai l'image qui s'affiche plus grande qu'avec un wrap_content et dans le deuxième plus petite...

Je ne maitrise pas vraiment les dp/px : ce que ce veux c'est qu'une image de 480 pixel de large prenne toute la largeur d'un écran 480x800 et les 2/3 de la largeur d'un écran 720x1280. Le wrap_content a l'avantage d'afficher les ratios voulus.

J'ai mal compris un truc ?

Pour ce qui est des layouts de trop, j'ai essayé beaucoup de choses. D'après ta réflexion à ce propos ce n'est probablement pas une bonne piste.

Voici ce que j'essaye de faire :



La partie qui pause problème ici est le cadre noire (le cadre gris est aussi une image). J'ai simplifié le layout du premier poste, en supprimant les 2 indicateurs de temps, pour se concentrer sur le vrai problème.

[nicroman]

Ok....

Alors... j'ai un tuto sur les tailles sous le coude (non vérifié donc pas encore public) mais tu peux toujours y jeter des yeux :
http://nicroman.developpez.com/tutor...nites-mesures/

Grosso modo... une image de X pixels, fait obligatoirement Y dp...
La règle est: dp = px * 160 / dpi

Ce qui est bien avec une image ayant plusieurs "résolution" c'est que sa taille en dp est fixe (c'est tout le but)...

HDPI = 240dpi.... donc: dp = px * 160 / 240 = px * 2 / 3
Une image de 180 pixels en hdpi fera donc 120dp. Bien sur la résolution mdpi devra êter 120 pixels, et 80 pixels en ldpi (et bien sur 240 pixels en xhdpi).

Ensuite le cadre gris-foncé, c'est clairement un RelativeLayout...

Donc on aurait:

Code :

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

1
2
3
4
5
6
7
8
9
 
LinearLayout (vertical, avec background gris clair)
   RelativeLayout (avec background gris foncé, utiliser paddingTop, ou marginTop je ne sais jamais, pour la calage des bitmaps)
       Image (album cover) [align-left,align-top]
       Text x 6  (attention sp != dp, prévoir un peu de place donc, pour des sp plus ou moins grands) [4 sont to-right-of image, 1 align-left/align-bottom, 1 align-right/align-bottom]
       Button [align-right/align-top]
   ProgressBar
   LinearLayout (horizontal)
       Button x 5

Par contre perso... je partirai sur des 9-patch... la seule partie non redimensionable est le "haut" de l'image, le reste est vraiment étirable à souhait (surtout horizontalement).
Avec deux 9-patch correctement placés, il est possible d'avoir les cadres bien correspondre (la vague 'claire') en 'dp', avec un layout dynamique et retaillable... et du coup le support de tous types de gestion de "texte".

[atha2]

Une image de 180 pixels en hdpi fera donc 120dp. Bien sur la résolution mdpi devra êter 120 pixels, et 80 pixels en ldpi (et bien sur 240 pixels en xhdpi).

Mais dans ce cas là, si je ne me trompe pas l'image fera toujours exactement la même taille en pouce ? (puisque dp +-= inch)

Comment faut-il gérer pour qu'une image soit sélectionnée en fonction de la taille de l'écran ? L'idée est bien sure d'avoir la même interface sur la plupart des téléphones (j'ai des image de largeur 320, 480, 720, 1080px).

Je peux toujours utiliser "drawable-large" (ou "sw480dp") Mais du coup, dans certain (dpi trop bas/élevé) cas l'image va être redimensionné...
Faut-il combiner les 2 un truc du genre "drawable-large-hdpi" ?
[Mode Noob Off]

[nicroman]

Mais dans ce cas là, si je ne me trompe pas l'image fera toujours exactement la même taille en pouce ? (puisque dp +-= inch)

Non...
La relation dp / inch(et mm/cm) dépend de la résolution hardware de l'écran... Sur un Galaxy S2: 1 inch = 217 pixels

La relation dp / pixels uniquement de la résolution "software" (parmi ldpi, mdpi, hdpi, xdpi et xxdpi) choise par le constructeur... Sur un Galaxy S2: 2dp = 3 pixels (hdpi)... du coup 1 inch = 217 pixels = 144,6 dp

Donc renseigner les versions de bitmaps pour chaque résolution permet de pouvoir dimensionner sa bitmap de manière unique en "dp" sans connaitre la résolution active de l'écran.

Comment faut-il gérer pour qu'une image soit sélectionnée en fonction de la taille de l'écran ? L'idée est bien sure d'avoir la même interface sur la plupart des téléphones (j'ai des image de largeur 320, 480, 720, 1080px).

Mais on ne peut pas avec un simple image (sans redimensionner)... D'ou ma suggestion du 9-patch:

Un 9 patch avec par exemple 40dp (donc 60 pixels en hdpi, 30 pixels en ldpi) fixes en haut (pour la vague), 4dp (donc 6 pixels en hdpi, 3 pixels en ldpi) fixes sur les autres bords, et le reste "étirable"....

Du coup la "vague" va bien s'étirer en largeur quelque soit la taille du layout en dp (choisir alors "match_parent" bien entendu), et rester propre dans ses hautes fréquences (en hauteur) et surtout facilement positionable (puisque taille fixe en "dp").

Pareil pour le "gris foncé"... (avec moins de marge en haut bien sur), un petit padding (en dp) pour positionner les deux vagues parfaitement... et roulez...
On a une interface fluide (étirable dans tous les sens) et jolie.

[atha2]

Mais on ne peut pas avec un simple image (sans redimensionner)... D'ou ma suggestion du 9-patch

Depuis le temps que je cherchais comment faire...

Pour les 9-patch, je risque de ne pas avoir le temps de les créer : mon interface contient une 20aine d'images.
Je regarderai ça pour une prochaine appli.

Merci de tes explications.

[nicroman]

Ben la création d'un 9-patch c'est facile, il "suffit" de rajouter une bordure de 1 pixel de chaque coté de l'image...
En haut & à gauche, mettre du noir sur la partie "étirable" de l'image.
En bas & à droite, mettre du noir sur les parties dans lesquelles les "sous" éléments peuvent aller (marges automatique).
Et bien sur... de rajouter un '.9' avant le '.png'... (le nom de la ressource ne change donc même pas)
Cela prend environ 5 minutes par image