[Débutant] Placement des éléments dans mon layout

**rsuinux** · 30/04/2015, 21h09

Bonjour;
Pour mon plaisir, et par défis, je débute une application sous android. Le code commence à avancer, mais je n'arrive pas à fair un truc tout bète:
J'ai trois parties dans mon visuel:
une partie en haut sur toute la longueur de l'écran, de la hauteur d'un bouton.
en dessous:
à gauche, j'ai une colonne qui fait toute la hauteur avec juste trois 'imagebutton' (toutes les images utilisé font 100px x 100px)
à droite, un liste view.
J'ai mis chacune des parties dans un linearlayout et positionné le tout correctement.

Mon problème, c'est que mes trois imagebutton sont collés en haut dans leur container!!
Et je n'arrive pas à les "centrer" : je voudrais juste mettre un tout en haut, un au milieu et un tout en bas!
Je vous donne mon fichier, ce sera plus parlant:

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
 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools" 
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity"
    android:weightSum="1">
 
    <LinearLayout
        android:orientation="horizontal"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:id="@+id/layout1"
        android:background="#ffdcff3c">
        <TextView
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/etat_connexion"
            android:id="@+id/etat_connexion"
            android:layout_weight="1"
            android:layout_gravity="left|center_vertical" />
        <Button
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="@string/connexion"
            android:id="@+id/connexion"
            android:layout_weight="2"
            android:layout_gravity="right" />
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="wrap_content"
        android:layout_height="fill_parent"
        android:id="@+id/layout2"
        android:layout_below="@id/layout1"
        android:background="#ff73fff0">
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/boutonhaut"
            android:layout_weight="40"
            android:background="@mipmap/haut" />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/boutonstop"
            android:layout_gravity="center_vertical"
            android:layout_weight="40"
            android:background="@mipmap/stop" />
        <ImageButton
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/boutonbas"
            android:layout_gravity="bottom"
            android:layout_weight="40"
            android:background="@mipmap/bas" />
    </LinearLayout>
    <LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/layout1"
        android:layout_toRightOf="@id/layout2"
        android:id="@+id/layout3"
        android:background="#ffff3e96" />
        <ListView
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:id="@+id/listView" />
    </LinearLayout>
</RelativeLayout>

Les couleurs, en background, utilisées , sont juste la pour faire ressortir mes layout. J'ai testé pas mal de choses, mais là je sèche.
Si vous pouvez m'aider et m'expliquer; ce serait aimable.

Merci.
Rémi.

**Estérésis** · 01/05/2015, 00h21

Bonjour,
déjà il y a une erreur dans ton code au niveau de ton dernier LinearLayout tu as fermé la balise immédiatement

Code :

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

1
2
3
4
5
6
7
8
<LinearLayout
        android:orientation="vertical"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/layout1"
        android:layout_toRightOf="@id/layout2"
        android:id="@+id/layout3"
        android:background="#ffff3e96" />

Même si tu réglais ce problème il reste le fait que ta listview est seule dans le LinearLayout, donc celui sert à rien. Il faut y ajouter ton LinearLayout contenant des boutons. De plus concernant ce LinearLayout contenant maintenant un LinearLayout(avec les boutons) et une listview, il faut passer son orientation en horizontale. Ce qui donne : (j'ai retiré les images et mis des tailles numériques 100dp pour tester)

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
 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:weightSum="1"
    tools:context=".MainActivity">
 
    <LinearLayout
        android:id="@+id/layout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#ffdcff3c"
        android:orientation="horizontal">
 
        <TextView
            android:id="@+id/etat_connexion"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="left|center_vertical"
            android:layout_weight="1"
            android:text="blabla" />
 
        <Button
            android:id="@+id/connexion"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_weight="2"
            android:text="blabla" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/layout3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/layout1"
        android:background="#ffff3e96"
        android:orientation="horizontal">
 
        <LinearLayout
            android:id="@+id/layout2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:layout_below="@id/layout1"
            android:background="#ff73fff0"
            android:orientation="vertical">
 
            <ImageButton
                android:id="@+id/boutonhaut"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_weight="40" />
 
            <ImageButton
                android:id="@+id/boutonstop"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="center_vertical"
                android:layout_weight="40" />
 
            <ImageButton
                android:id="@+id/boutonbas"
                android:layout_width="100dp"
                android:layout_height="wrap_content"
                android:layout_gravity="bottom"
                android:layout_weight="40" />
        </LinearLayout>
 
 
        <ListView
            android:id="@+id/listView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </LinearLayout>
</RelativeLayout>

Au final nous avons :
une en-tête content une textview et un bouton occupant toute la largeur.
en-dessous une colonne à gauche contenant trois boutons et à droite un colonne listview.

Je crois que c'est ce que tu recherches ou je n'ai pas compris^^

**rsuinux** · 01/05/2015, 10h27

Merci Estérésis d'avoir pris le temps d'avoir regardé mon problème.
Effectivement, tu as l’œil affûte sur le linearlayout fermé.
Je viens de tester ton code, qui fonctionne, mais l'a ou je pense que je ne me suis pas bien exprimé, c'est que les images sont déformées.
Certes, elles sont cadrées haut/centre/bas, mais elles ont une largeur de 100dp et une hauteur qui dépend du périphérique utilisée. Alors que je cherche à avoir une hauteur fixe.

Là, ça se corse pour moi, car dès que j'essaie, elles se colle toutes vers le haut, les unes dernières les autres.

**Estérésis** · 01/05/2015, 11h16

Bonjour,

quelque chose dans ce genre ? (j'ai mis des carrés de côté 100dp)

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
 
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:weightSum="1"
    tools:context=".MainActivity">
 
    <LinearLayout
        android:id="@+id/layout1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="top"
        android:background="#ffdcff3c"
        android:orientation="horizontal">
 
        <TextView
            android:id="@+id/etat_connexion"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="left|center_vertical"
            android:layout_weight="1"
            android:text="blabla" />
 
        <Button
            android:id="@+id/connexion"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="right"
            android:layout_weight="2"
            android:text="blabla" />
    </LinearLayout>
 
    <LinearLayout
        android:id="@+id/layout3"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_below="@id/layout1"
        android:background="#ffff3e96"
        android:orientation="horizontal">
 
        <LinearLayout
            android:id="@+id/layout2"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:background="#ff73fff0"
            android:orientation="vertical">
 
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center">
 
                <ImageButton
                    android:id="@+id/boutonhaut"
                    android:layout_width="100dp"
                    android:layout_height="100dp" />
            </LinearLayout>
 
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center">
 
                <ImageButton
                    android:id="@+id/boutonstop"
                    android:layout_width="100dp"
                    android:layout_height="100dp" />
            </LinearLayout>
 
            <LinearLayout
                android:layout_width="wrap_content"
                android:layout_height="0dp"
                android:layout_weight="1"
                android:gravity="center">
 
                <ImageButton
                    android:id="@+id/boutonbas"
                    android:layout_width="100dp"
                    android:layout_height="100dp" />
            </LinearLayout>
        </LinearLayout>
 
 
        <ListView
            android:id="@+id/listView"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent" />
    </LinearLayout>
</RelativeLayout>

J'ai mis les boutons dans des linearLayout qui se partagent la hauteur de l'écran via le poids et j'ai centré les boutons dans ces derniers. Tu peux placer les boutons comme tu le souhaites dans ces linearLayout, je les ai centrés mais si par exemple tu souhaites placer le dernier bouton tout en bas, il te suffit de modifier la gravité du dernier linerlayout (contenant le bouton)

Code :

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

android:gravity="center"

deviendrait

Code :

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

android:gravity="bottom"

**rsuinux** · 01/05/2015, 14h19

Ah, d'accord!
Donc, tu force la dimension de l'élément qui prendra l'image. Je suis parti du postulat qu'il ne fallait pas donner de taille "à priori", à cause des différentes tailles d'écrans. Et j'ai lu ici et là qu'il fallait éviter trop de linearlayout dans des linearlayout.

An tout cas, je te remercie pour ton aide, je comprend mieux mes erreurs.
Je peux mettre en résolu à présent.

**Estérésis** · 01/05/2015, 14h45

Je suis parti du postulat qu'il ne fallait pas donner de taille "à priori", à cause des différentes tailles d'écran

Ce que tu dis est vrai pour l'unité du pixel (px). Ce ne s'adapte effectivement pas à l'écran.
Ce que j'ai utilisé sont des dp (Density-independent pixels) , une unité abstraite basée sur la densité physique de l'écran. Un dp représente pas le même nombre de pixel selon l'écran et adapte donc la taille de la vue à l'écran.

j'ai lu ici et là qu'il fallait éviter trop de linearlayout dans des linearlayout

faut éviter de mettre trop de view tout court, de toute façon l'ide le dit maintenant au bout d'un certain nombres qu'il y aura des ralentissements

**rsuinux** · 01/05/2015, 16h07

Ah, bien vu, dp et pas pixel, il me faut changer de lunettes...

Merci pour toutes ces informations.

Rémi.

[Débutant] Placement des éléments dans mon layout

Composants graphiques Android

Discussions similaires

Partager

Partager