Discussion :

[italia57]

Bonjour à tous,

j'ai un petit problème lors de l'intégration du Design pour mon application mobile.

Mon écran a une résolution de 960*540 (donc 960 de haut et 540 de large).

Dans une activité qui comporte juste une listView, je met en fond de chaque item de la listView un fond qui a pour taille 540*178, je devrais donc avoir à l'écran plus de 5 items, cependant j'en obtiens que 3 plus la moitié d'un.

Avez-vous une idée de là ou ça peut venir ?

Je vous remercie.

[grunk]

La taille de tes éléments de listview ne va pas dépendre du fond que tu lui attribue mais du contenu de ces éléments et des différentes propriété du layout.

Tu peux très bien collé un fond de 1000px si tu as défini une hauteur de 50dp à ton élément il restera à 50dp.

Note au passage que c'est une assez mauvaise idée de travailler en pixel. Préfère les unités indépendantes telles que dp/dip ...

[italia57]

Dans mon cas ça ne dépend pas de ça car si je met un fond moin haut, l'item prend une hauteur plus petite.

Mais pour faire le design sur photoShop, je suis bien obligé de travaillé en pixel non ?

[nicroman]

Dans mon cas ça ne dépend pas de ça car si je met un fond moin haut, l'item prend une hauteur plus petite.

Mais pour faire le design sur photoShop, je suis bien obligé de travaillé en pixel non ?

Photoshop c'est Photoshop... il pond des bitmaps de la taille (en pixels) qu'on lui demande....

Par contre, c'est la première fois que j'entends parler d'un layout qui change en fonction de la taille du background !!!!
J'imagine que c'est le background des boutons des messages précédents... Dans ce cas, déjà, il faut s'orienter vers les 9-patch.... C'est très bien expliqué sur le site officiel (comment les générer).

Au niveau de l'UI, c'est l'item (View, Layout, ...) qui décide de la taille qu'il prendra à l'écran (en "dp") en fonction des attributs (fill_parent/wrap_content), et de tout un tas de choses (pour les ImageView par exemple, la taille originelle de l'image EN DP sera prise en compte). Pour rappel: pix = dp * 180 / dpi. D'ou l'interet de donner 4 version de l'image pour chaque "dpi".

Une fois la taille de l'UI définie, le background sera dessiné....

[italia57]

Je comprend pas bien comment je dois m'y prendre du coup. Je connais 9-patch petit software permettant de définir les zones extensibles etc...

Pourrais-tu me décrire comment s'y prendre pour faire un design ?

Je vous avoue que là je suis perdu et je ne trouve pas forcément d'information (à part le site officiel) de comment concevoir un design pour application android

[nicroman]

Pour le design en général:
http://developer.android.com/design/index.html

Pour les nine-patch (c'est pas un software, c'est une utilisation de bitmaps qui permet des images repositionnables et qui remonte aux année 1990):
http://developer.android.com/guide/t...html#NinePatch
et
http://developer.android.com/guide/t...tml#nine-patch

[italia57]

En faite je cherche plutôt comment s'y prendre avec les différentes unités, les différentes tailles d'écran etc...

Les nine-patch permettent que ça s'adapte à toutes tailles d'écrans et ne pas développer le design pour les 4 catégories d'écran c'est bien ça ?

EDIT: de plus je persiste à dire qu'en fonction de la taille de l'image que je met en background du LinearLayout d'un item, la hauteur de l'item n'est pas la même

[grunk]

Pour ton design tu vas evidemment avoir une taille en pixel puisque tu auras défini une taille de document sous photoshop.

Ce qu'il faut faire c'est effectivement privilégier les 9 patch mais également les drawable en xml.
Il y'a plein de chose que tu peux faire en drawable ce qui te permet de te passer des images et donc être compatible quelques sois la résolution.

Par exemple dans mon appli les tabview son designé ainsi :



Il n'ya que la version enfoncé du bouton avec les ombres portée que j'ai fait avec un 9 patch , tous les autres dégradés sont fait en drawable.

Quand vraiment tu n'as pas d'autre alternative que utiliser une image , tu en fais 3 voir 4 versions différentes pour gérer tous les cas.

Pour ton problème de hauteur , faudrait un peu de code pour qu'on puisse t'aider plus je pense.

[italia57]

voici le fichier xml ou je déclare ma listView:

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
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
 
    >
 
    <ListView
        android:id="@+id/listPerso" 
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="@drawable/texture"
         >
    </ListView>
 
</LinearLayout>

Voici le fichier xml ou je met en forme chaque item de la listeView:

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
 
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical"
     >
 
    <LinearLayout 
    android:id = "@+id/nomResto"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@drawable/texturesmall"
 
     >
 
     	<ImageView
        android:id="@+id/img"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:paddingLeft="5dp"
        android:paddingRight="5dp"
        android:layout_weight = "20"
        android:background="@drawable/cadre" 
         />
 
     	 <LinearLayout 
	    android:layout_width="fill_parent"
	    android:layout_height="wrap_content"
	    android:orientation="vertical"
	    android:layout_weight = "80"
	    android:layout_marginLeft="8dp"
	    android:layout_marginTop="5dp"
	    android:layout_marginRight="8dp"
 
     	>
 
     	   <TextView
            android:id="@+id/nom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:textSize="20dp"
            android:textColor="@color/noir"
            android:textStyle="bold"
            android:typeface = "serif"
            android:layout_marginBottom="2dp"
 
            />
 
     	   <ImageView
	        android:id="@+id/img"
	        android:layout_width="wrap_content"
	        android:layout_height="fill_parent"
	        android:layout_marginLeft = "5dp"
	        android:src = "@drawable/liseret"
	        android:layout_weight = "20"
	        android:layout_marginBottom="5dp"
	         />
 
 
 
	    <LinearLayout 
	    android:layout_width="wrap_content"
	    android:layout_height="wrap_content"
	    android:orientation="horizontal"
    	>
 
 
 
		        <RatingBar
		            android:id="@+id/nombreEtoile"
		            android:layout_width="wrap_content"
		            android:layout_height="wrap_content"
		            style="?android:attr/ratingBarStyleSmall"
		            android:layout_weight = "40" />    
 
 
		        <TextView
		            android:id="@+id/avis"
		            android:layout_width="wrap_content"
		            android:layout_height="wrap_content"
		            android:textSize="12dp"
		            android:textColor="@color/gris_fonce"
		            android:text ="3 avis"
		            android:layout_marginLeft="10dp"
		            android:layout_marginBottom= "15dp"
		            android:layout_weight = "20"
				/>
 
 
	 </LinearLayout>
 
	 <LinearLayout 
		    android:layout_width="wrap_content"
		    android:layout_height="wrap_content"
		    android:orientation="horizontal"
		    android:layout_marginBottom = "5dp" 
     		>
 
	     		<TextView
	            android:id="@+id/infoType"
	            android:layout_width="fill_parent"
	            android:layout_height="wrap_content"
	            android:textSize="14dp"
	            android:textColor="@color/noir"
	            android:text = "Type:"
	            android:textStyle="bold"
	            android:layout_marginRight="4dp"
	             />
 
 
	        <TextView
	            android:id="@+id/type"
	            android:layout_width="fill_parent"
	            android:layout_height="wrap_content"
	            android:textColor="@color/gris_fonce"
	            android:textSize="12dp"
	            android:layout_marginLeft="4dp"
	             />
 
 
     	       <TextView
	            android:id="@+id/infoprixMoyen"
	            android:layout_width="fill_parent"
	            android:layout_height="wrap_content"
	            android:textSize="14dp"
	            android:textColor="@color/noir"
	            android:text = "Prix Moyen:"
	            android:textStyle="bold"
	            android:layout_marginRight="4dp"
             	/>
 
 
		      <TextView
	            android:id="@+id/prixMoyen"
	            android:layout_width="fill_parent"
	            android:layout_height="wrap_content"
	            android:textColor="@color/gris_fonce"
	            android:textSize="12dp"
	             />
 
		      <TextView
	            android:id="@+id/prixMoyeneuro"
	            android:layout_width="fill_parent"
	            android:layout_height="wrap_content"
	            android:textColor="@color/gris_fonce"
	            android:textSize="12dp"
	            android:text="€"
	            android:layout_marginRight="4dp"
	             />
 
 
 
	 	</LinearLayout>
 
   </LinearLayout>
 
     	 <LinearLayout 
    android:id = "@+id/voila"
    android:layout_width="wrap_content"
    android:layout_height="fill_parent"
    android:orientation="horizontal"
    android:layout_marginRight="10dp"
     >
 
 
     	     <TextView
            android:id="@+id/distance"
            android:layout_width="wrap_content"
            android:layout_height="fill_parent"
            android:textSize="12dp"
            android:textColor="@color/noir"
            android:textStyle="bold"
            android:typeface = "serif"
            android:text = "260m"
             android:gravity ="center" 
 
 
            />
 
 
     	      <ImageView
			        android:id="@+id/fleche"
			        android:layout_width="wrap_content"
			        android:layout_height="fill_parent"
			        android:src="@drawable/fleche"
			        android:gravity ="center"
			        android:layout_marginLeft="8dp" 
 
		         />
 
    </LinearLayout>
 
 </LinearLayout>
 
</LinearLayout>

et en fonction de la taille de la texture que je met à la ligne 14 la taille de l'item n'est pas le même.

Par exemple le texturesmall.jpg fait 100 de large et je que 6 items qui s'affiche à l'écran (sans utiliser le scroll) alors que je devrais en avoir au moins 9 sachant que ma résolution est de 960*540.

[nicroman]

Les items ne devraient pas être un layout en "fill-parent"

Il y a beaucoup trop de layouts imbriqués à mon avis....
Penses aux TableView pour les listes en tableau, et surtout au RelativeLayout pour positionner les objets les uns par rapport aux autres (en dessous de, à droite de, etc.)

Déjà, commencer par un wrap_content sur le heigth du premier layout

[italia57]

En essayant de me débeuger je tombe sur un drôle de phénomène:

Voici l'image et je m'explique après:



J'ai en background du LinearLayout principal un image de hauteur 178px et je force le LinearLayout suivant à une hauteur de 178px (c'est le cadre bleu).

C'est bizarre non ? Ils ont pas la même hauteur, le cadre bleu est jsute car des cadres comme ça il y en a plus de 5 qui rentre sur l'écran (car 960/178 > 5) mais pour le background ce n'est pas le cas.

Avez vous une idée ?

Je vous remercie