Problème de layout

Version imprimable

1 pièce(s) jointe(s)

Problème de layout

Bonjour à tous,

J'ai un problème de layout, j'ai créer un tableau avec 3 lignes pour y mettre les lettre de l'alphabet et les chiffres. j'ai placé dans les lignes des Button
1er lignes 13 lettres
2eme ligne 13 lettres
3eme ligne 10 chiffre

J'ai essayé toutes les propriétés de layout, wrap_content et match_parent. Je m'attendais à ce que les Button soient "souples" mais sur un smartphone on ne voit pas tous les Button sur une lignes (Exemple 1er ligne, on voit de A à J alors qu'on devrait voir de A à M)

Est ce que les Button ont une taille minimal (due à la taille du texte peut être) ?

Voici le code et un screenshot:

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
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
 
 
<TableLayout
        android:id="@+id/tableLayout1"
        android:layout_width="match_parent"
        android:layout_height="match_parent" >
 
        <TableRow
            android:id="@+id/tableRow1"
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
 
            <Button
                android:id="@+id/letter_a"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="showLetter"
                android:text="A" />
 
            <Button
                android:id="@+id/letter_b"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="showLetter"
                android:text="B" />
 
            <Button
                android:id="@+id/letter_c"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="showLetter"
                android:text="C" />
 
            <Button
                android:id="@+id/letter_d"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:onClick="showLetter"
                android:text="D" />
 
            <Button
                android:id="@+id/letter_e"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="showLetter"
                android:text="E" />
 
            <Button
                android:id="@+id/letter_f"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="showLetter"
                android:text="F" />
 
            <Button
                android:id="@+id/letter_g"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="showLetter"
                android:text="G" />
 
            <Button
                android:id="@+id/letter_h"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="showLetter"
                android:text="H" />
 
            <Button
                android:id="@+id/letter_i"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="showLetter"
                android:text="I" />
 
            <Button
                android:id="@+id/letter_j"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="showLetter"
                android:text="J" />
 
            <Button
                android:id="@+id/letter_k"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="showLetter"
                android:text="K" />
 
            <Button
                android:id="@+id/letter_l"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="showLetter"
                android:text="L" />
 
            <Button
                android:id="@+id/letter_m"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:onClick="showLetter"
                android:text="M" />
        </TableRow>
 
</TableLayout>

Merci filouxxx :roll:

22/01/2013, 16h45
maxusn

ton .xml ne doit pas avoir les bonnes propriétés : si tu ne l'a pas changé, eclispe créer par defaut un fichier xml pour un ecran de 3.7" (480*720) ce qui correspond au nexus one

ton smartphone n'a pas les même propriété : résolution moins importante, ecran plus petit : c'est pour cela que certains boutons n'apparaissent pas.

Il va te falloir créer des layouts différents en fonction de la "largeur" de l'écran, et la taille (en SP) utilisée pour le texte...

Après, le style du bouton risque de jouer comme tu n'as rien défini, ce sera le style par défaut du thème, soit "@android:style/Widget.Button". Sous Gingerbread ce sera:
Code:

1 2 3 4 5 6 7 8 9 <style name="Widget.Button"> <item name="android:background">@android:drawable/btn_default</item> <item name="android:focusable">true</item> <item name="android:clickable">true</item> <item name="android:textAppearance">?android:attr/textAppearanceSmallInverse</item> <item name="android:textColor">@android:color/primary_text_light</item> <item name="android:gravity">center_vertical|center_horizontal</item> </style>
btn_default est un selector qui pointe sur le 9-patch "btn_default_normal" qui a des "marges":
en ldpi: 18px (horizontal) et 16px (vertical)
en mdpi: 24px (horizontal) et 20px (vertical)
en hdpi: 35px (horizontal) et 29px (vertical)
en xhdpi: 36px (horizontal) et 38px (vertical)

Regardons la taille "horizontale"... chaque bouton a une marge de M px
Le texte fait 14sp (normalement), soit si on ne touche pas à la taille du texte dans le système (donc on se fiche des malvoyants), 1sp=1dp, donc... 14dp

En LDPI, un bouton fera 11px (14sp) + 18px = 29px... 13 boutons= 377 pixels, soit 503dp
En MDPI, un bouton fera 14px (14sp) + 24px = 38px... 13 boutons = 494 pixels, soit 494dp
En HDPI, un bouton fera 21px (14sp) + 35px = 56px... 13 boutons = 728 pixels, soit 485dp
En XHDPI, un bouton fera 28px (14sp) + 36px = 64px... 13 boutons = 832 pixels, soit 416dp.

Enfin ... si mes calculs sont bons :mouarf:

Je pense qu'il doit y avoir moyen de fournir des boutons de taille fixe (d'une part) calculée pour tenir à 13 par rangée (en landscape).

EDIT: Au passage, rien à voir avec une "taille par défaut" choisie par eclipse... Le layout par défaut utilise toute la largeur de l'écran point barre, quelque soit le device.

23/01/2013, 09h58
filouxxx

Salut, Merci à vous deux.

Je comprends mieux le problème, je n'ai rien défini en terme de style. Je vais déjà le faire au moins pour l'esthétique.

Concernant les mesure, Comment puis je avoir la main sur les valeurs ?
Est ce en définissant des propriétés particulières sur des style prédéfini, pas forcément par défaut mais préexistants? Ou bien dois je complètement définir un style customisé avec mes dimensions ?

Merci

Filouxxx

Il y a plein de manières de résoudre le problème....

En choisissant un autre background de bouton par exemple (et en y réduisant les marges).
Je pense que vu le layout "voulu", il vaut mieux ne pas partir sur un table layout, mais un simple linearlayout, et jouer sur les "weight".

Déjà il faut vraiment utiliser un 'style' histoire d'être sur que tous les boutons partagent le même...

Par exemple:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:weightSum="13" > <Button android:id="@+id/button1" style="@style/Widget.KeyButton" android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="A" /> ... </LinearLayout>
et le style suivant:
Code:

1 2 3 4 5 <style name="Widget.KeyButton" parent = "@android:style/Widget.Button"> <item name="android:padding">0dp</item> <item name="android:layout_weight">1</item> </style>
Déjà, sur les 12/13 devices que j'ai en "graphique", l'éditeur me montre un truc cohérent sur tous... (un peu applati sur les tablettes à haute résolution il est vrai).

23/01/2013, 16h14
filouxxx

Très bien je comprends mieux.
ça fonctionne.

Merci !!