Problème d'insertion d'une image dans un layout avec weight

**Devil Shark** · 27/09/2013, 14h04

Bonjour à tous,

je début sur Android et je suis en pleine galère pour faire la mise en page que je souhaite.

Je vous mets ci-dessous le rendu souhaité :

J'ai fait un code pour essayer de faire ce que je veux. J'ai jonglé avec deux solutions qui me donnent le même résultat : soit des LinearLayout soit un TableLayout. Dans les deux cas j'ajoute des Weight pour avoir la présentation voulu.

Mon problème est que tant que les layouts sont vides, ils se positionnent parfaitement. Quand j'ajoute le petit logo en haut à gauche, ma présentation n'est plus bonne et le layout du haut, qui couvre toute la bande supérieure est agrandi et je ne trouve pas moyen de lui garder la proportion originale.

Je vous mets une partie du code pour que vous voyez :

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
 
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:weightSum="100" >
 
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="10"
            android:background="#000000"
            android:orientation="horizontal" >
 
			<ImageView
			    android:id="@+id/MenuImage"
			    android:layout_width="wrap_content"
			    android:layout_height="fill_parent"
			    android:contentDescription="@string/main_image_desc"
			    android:onClick="displayDetail"
			    android:scaleType="center"
			    android:src="@drawable/ic_launcher_trans" />
 
        </LinearLayout>
 
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="90"
            android:baselineAligned="false"
            android:orientation="horizontal" >
        </LinearLayout>

Merci d'avance pour votre aide précieuse...

**emowpya** · 27/09/2013, 16h26

essaie ça dans ton imageview :

android:adjustViewBounds="true"
android:scaleType="fitXY"

**Devil Shark** · 27/09/2013, 17h08

Envoyé par emowpya

essaie ça dans ton imageview :

android:adjustViewBounds="true"
android:scaleType="fitXY"

J'ai essayé mais toujours le même résultat, la partie supérieure s'agrandie...

Merci quand même,

**nicroman** · 27/09/2013, 18h29

Déjà il y a un problème....

L'ImageView utilise android:layout_height="fill_parent"
Hors le Layout parent utilise android:layout_height="wrap_content"
Ca ne peut pas aller...

Ensuite.. quelle taille fait l'image en dps ?

**Devil Shark** · 27/09/2013, 22h28

Déjà, un grand merci pour ta réponse.

Envoyé par nicroman

Déjà il y a un problème....
L'ImageView utilise android:layout_height="fill_parent"
Hors le Layout parent utilise android:layout_height="wrap_content"
Ca ne peut pas aller...

Je pense bien voir le problème mais je ne sais pas trop quoi faire ? J'ai l'impression que l'on est obligé de remplir ces champs mais je ne sais pas quoi mettre d'autre...

Envoyé par nicroman

Ensuite.. quelle taille fait l'image en dps ?

Je ne suis pas sûr de comprendre... J'ai pris l'image faite sous photoshop et j'ai redimensionner en plusieurs format l'image en les mettant dans les dossiers "drawable" correspondants. J'ai donc une image de 96px de haut, une de 72, une de 48 et une de 24px...

Est ce que cela répond à ta question ?

Merci d'avance...

**nicroman** · 29/09/2013, 17h09

Oui et non....

Une interface se calcule en "dp"...
Ls pixels ne sont qu'un moyen de remplir ces dps, et en fonction de la densité de l'écran on peut proposer plusieurs images... 1 dp = 1 pixel pour la résolution "mdpi"

Si dans ton cas, 48 pixels = image en "mdpi", alors l'image fait (quelque soit la résolution de l'écran) "48dp" de haut.. Mais cela ne colle pas avec l'une des dimensions que tu as donné....
Tailes pour 48dps:
LDPI: 36pixels => pas bon
MDPI: 48pixels => ok
HDPI: 72pixels => ok
XHDPI: 96pixels => ok
XXHDPI: 144pixels => missing
XXXHDPI: 182pixels => missing (mais uniquement pour Android 4.4)

Essaye de faire sur papier un dessin de l'interface, avec les tailles "en dp" de chaque élément (160dp ~ 1 pouce).
Ensuite "calcule" la taille que doit avoir l'icone en pixel (en fonction de la résolution).
En général une "barre" d'action (même si tu n'utilises pas l'ActionBar) fait environ 48dp de haut. ( http://developer.android.com/design/...ics-grids.html ).
Cela ne veut pas dire qu'elle doive faire exactement 48dp (layout_height="48dp") mais que les éléments à l'intérieur vont occuper cette place environ.

Ensuite pour avoir un objet layout_height="wrap_content" il faut que le height des objets interieurs (le "content") soit ou bien prédéfinis (TextView,...), ou bien "wrap_content" eux même (ImageView, autre Layout...).

**Devil Shark** · 30/09/2013, 10h08

Bonjour Nicroman,

un grand merci pour ta réponse qui commence à m'éclairer sur l'UI d'Android.

Si je comprend bien ce que tu m'expliques : il faut que je raisonne en mdpi qui est le standard, ce qui correspond à un écran de 320x480dp. Je sais que mon image fait 10% de la taille de l'écran (par rapport au petit côté) donc ma taille de référence sera de 32px et non 48px comme j'avais fait. Ce qui explique pourquoi mon image ne voulait pas "rentrer" dans mon cadre.

A partir de là je dois adapter les différentes tailles d'écran :
LDPI : 24 px
MDPI : 32 px
HDPI : 48 px
XHDPI : 64 px

Est ce que je suis dans le bon ?

Merci de ton retour,

**Devil Shark** · 30/09/2013, 11h05

Je viens de faire les modifications de tailles d'images que j'expose ci-dessus mais j'ai un problème.

Si je fais mon rendu sur Nexus 4 (4.7", 768x1280 : xhdpi) mon image semble bien occuper 10% de l'écran comme je le souhaite.

Si je fais mon rendu sur Nexus 10 (10.1", 2560x1600 : xhdpi) alors mon image devient ridiculement petite et je ne vois rien...

Est ce que qq'un peut m'expliquer mon erreur/problème ?

Merci d'avance,

**nicroman** · 30/09/2013, 16h03

Reprenons....

L'interface se "prépare" en "dips" (ou dp)... Les "dips" correspondent grosso-modo a une unité indépendante plus ou moins proche d'une taille réelle... Ce qui est sur, c'est qu'un "texte" est correctement lisible par exemple avec 16dp. D'ou le classique: 16dp-16dp-16dp pour une "barre" (soit... 48dp).

Maintenant sur un écran de 4,5", et sur un écran de 10" les "dps" représentant une dimension quasi physique, 48dp occupera 10% sur le premier, et 3% sur le second.
D'ou l'interêt de faire des interfaces qui varient en fonction de la "taille" de l'écran (small, normal, large, xlarge). A savoir qu'un téléphone est quasi toujours dans le "normal", la tablette 7" dans le "large" et la tablette 10" dans le xlarge.

Une fois les layouts spécifiés pour chacune de ces tailles, on se retrouve avec des icones qui font quasiment toujours 32dp... Ces icones doivent avoir 5 images: 24x24 pixels dans ldpi, 32x32 pixels dans mdpi, 48x48 pixels dans hdpi, 64x64 pixels dans xhdpi, etc...
Ceci afin de garantir de "jolies" images (la taille de l'interface est de toute manière garantie par le layout).

Donc , je réitère ma question: peux-tu nous poster un dessin du layout que tu veux obtenir, en fonction de la taille des écrans.
Et les fichiers de layout de que tu utilises.

**Devil Shark** · 30/09/2013, 18h05

Envoyé par nicroman

Donc , je réitère ma question: peux-tu nous poster un dessin du layout que tu veux obtenir, en fonction de la taille des écrans.
Et les fichiers de layout de que tu utilises.

Merci pour ces réponses.

Le layout que je souhaite obtenir est celui qui est dans mon premier message. J'ai une barre supérieure qui fait environ 10% de haut et un barre de menu sur la droite qui occupe 25%. Je peux refaire un dessin simplifié si tu le souhaites...

**Devil Shark** · 30/09/2013, 21h27

Pour faire simple, je propose de tout reprendre à zéro.

Mon projet est de réaliser une appli dont un des écran est le suivant :

J'ai réalisé, à la demande de Nicroman une représentation en "dp" de mon layout simplifié pour avoir une base de discussion :

J'ai volontairement inclus dans petits espaces entre les objets pour bien les repérer.

A partir de là, j'ai fait ma première image (logo1) que j'ai mis à différentes tailles dans les dossier "drawable", avec les tailles suivantes :
LDPI : 90x24 px
MDPI : 120x32 px
HDPI : 180x48 px
XHDPI : 240x64 px

Voici le fichier xml de mon 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
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
96
97
98
99
 
<?xml version="1.0" encoding="utf-8"?>
 
<!-- Le relativeLayout sert pour l image de fond -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
 
<!-- Image de fond qui va remplir la zone noire -->
    <ImageView
        android:id="@+id/MenuImage"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:contentDescription="@string/main_image_desc"
        android:onClick="displayDetail"
        android:scaleType="fitXY"
        android:src="@drawable/galathee" />
 
<!-- Premier layout qui va permettre de gérer les objet sur l image de fond -->
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="vertical"
        android:weightSum="100" >
 
<!-- Le Layout bleu du haut -->
        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="10"
            android:orientation="horizontal" >
 
<!-- Le logo 1 -->           
			<ImageView
			    android:id="@+id/MenuImage"
			    android:layout_width="wrap_content"
			    android:layout_height="fill_parent"
			    android:contentDescription="@string/logo1"
			    android:onClick="displayDetail"
			    android:scaleType="matrix"
			    android:src="@drawable/logo1" />
 
        </LinearLayout>
 
<!-- La partie "opposée" au layout bleu -->
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="100"
            android:baselineAligned="false"
            android:orientation="horizontal"
            android:weightSum="100" >
 
<!-- La partie "opposée" au layout vert --> 
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="75"
                android:orientation="vertical" >
 
            </LinearLayout>
 
<!-- Le Layout vert sur la droite -->
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="fill_parent"
                android:layout_weight="25"
                android:orientation="vertical" 
                android:weightSum="90" >
 
<!-- Le Layout rose sur la droite -->
			<LinearLayout
			    android:layout_width="wrap_content"
			    android:layout_height="fill_parent"
			    android:layout_weight="30">
 
			</LinearLayout>
 
<!-- Le Layout marron sur la droite -->
			<LinearLayout
			    android:layout_width="wrap_content"
			    android:layout_height="fill_parent"
			    android:layout_weight="30">
 
			</LinearLayout>
 
<!-- Le Layout violet sur la droite -->
			<LinearLayout
			    android:layout_width="wrap_content"
			    android:layout_height="fill_parent"
			    android:layout_weight="30">
 
			</LinearLayout>
 
            </LinearLayout>
 
        </LinearLayout>
 
</LinearLayout>

Ma mise en page fonctionne très bien tant que je ne met pas d'image dedans. Dès que j'ajoute le logo 1 c'est la cata...

Pourriez vous me dire ce qui ne colle pas dans ma logique (problème de la taille des images et de l'organisation du layout) ?

Un grand MERCI par avance pour tous vos conseils,

**nicroman** · 01/10/2013, 14h00

32dp c'est un peu petit pour une barre... regarde le lien que je t'ai donné sur l'ActionBar (pourtant assez minimale) et elle fait déjà 48dp... 16dp de texte centré...

Donc... pour moi, voici ce que je ferai (pour la représentation en "dp"):

Code xml :

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
 
<?xml version="1.0" encoding="utf-8"?>
<!-- Le relativeLayout sert pour l image de fond, utiliser le "background" pour celle-ci ! -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <!-- LA BARRE DU HAUT -->
    <RelativeLayout android:id="@+id/topbar"
        android:layout_width="fill_parent" android:layout_height="48dp"
        android:layout_alignParentLeft="true" android:layout_alignParentTop="true"
        android:layout_alignParentRight="true">
 
         <!--  LOGO 1 -->
        <ImageView
              android:layout_width="wrap_content" android:layout_height="0dp"
              android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_alignParentBottom="true"/>
 
         <!-- autres éléments de la barre du haut -->
    </RelativeLayout>
 
    <!-- Barre de droite en taille fixe (120dp) -->
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="120dp" android:layout_height="0dp"
        android:layout_below="@+id/topbar"
        android:layout_alighParentRight="true" android:layout_alignParentBottom="true"
        android:totalWeight="3">
 
        <!-- Les logos de droite -->
        <ImageView
             android:layout_weight="1"
             android:layout_width="fill_parent" android:layout_height="0dp"/>
 
        <ImageView
             android:layout_weight="1"
             android:layout_width="fill_parent" android:layout_height="0dp"/>
 
        <ImageView
             android:layout_weight="1"
             android:layout_width="fill_parent" android:layout_height="0dp"/>
 
    </LinearLayout>
</RelativeLayout>

Après si on veut que la barre de droite fasse 25%, il faut jouer avec les weights....

A mon avis, la barre du haut est "fixe" en taille (en dp), et celle de droite non.
Sinon, c'est ingérable pour les images.

**Devil Shark** · 01/10/2013, 19h17

Un grand merci pour ta réponse Nicroman...

Par contre, si je comprends bien, il reste une étape pour le rendu final. Je sais que je vais passer pour un boulet mais comment fait-on ???

Par avance merci encore,

**nicroman** · 01/10/2013, 19h52

oO

Je ne vois pas ce qu'il manque pour le "rendu"...

d'ailleurs j'ai été bourrin dans mon code... des LinearLayout suffisent amplement je pense...

LinearLayout (orientation=vertical, width=fill_parent, height=48dp) <= le background est l'image
-- LinearLayout (orientation=horizontal, width=fill_parent,height=fill_parent) <= la barre du haut
-- LinearLayout (orientation=horizontal, width=fill_parent,height=fill_parent,totalWeigth=4)
---- FrameLayout (width="0dp",height=fill_parent,weight=3) <= juste un "placeholder"
---- LinearLayout (orientation=vertical, width="0dp", height=fill_parent, weight=1) <= la barre de droite
------ ImageView...

**Devil Shark** · 01/10/2013, 23h00

Envoyé par nicroman

oO

Je ne vois pas ce qu'il manque pour le "rendu"...

Je me demandais si il n'y avait pas une étape de plus car j'ai toujours le même problème sur les tailles qui sont très variables entre les différents terminaux. Mon problème est surtout sur les cases de droite, elles ne sont pas toujours carrées puisque leur taille est fixe en largeur.

Il n'y a donc pas de solution "miracle" pour les mises en page ? On aura toujours des rendus différents en fonction des terminaux ?

Bonne soirée,

**nicroman** · 02/10/2013, 15h10

Haaaa c'est le bonheur (et le malheur) d'avoir un nombre incalculable de terminaux.

Le bonheur parcequ'une app tourne toujours "à peu pret bien"
Le malheur pour le programmeur parcequ'il doit arrêter de raisonner en terme de pixels/dimensions, et penser juste en terme d'ergonomie.

Si tu veux par exemple absolument des "carrés"... comment faire quand le terminal est vertical ? Il restera plus que 20% à gauche....
Ou alors il faut forcer un layout horizontal (ce que beaucoup d'utilisateurs dont moi ne supportent pas).

**Devil Shark** · 02/10/2013, 15h53

Salut Nicroman,

je viens de finir d'intégrer toutes tes infos et c'est que du bonheur (ou presque) maintenant que j'ai compris toutes les subtilités des "dp".

Merci pour ta patience et tes réponses,

@+

Problème d'insertion d'une image dans un layout avec weight

Composants graphiques Android

Discussions similaires

Partager

Partager