Réalisation Layout dynamique

Version imprimable

1 pièce(s) jointe(s)

Bonjour à tous,

J'essaie depuis quelques heures de créer un layout dynamique contenant 3 TextView et deux séparateurs (cf pièce jointe).

J'aimerai que le TextView du milieu soit toujours à égale distance des deux autres TextView, et que les séparateurs soient au milieu de leur "trou".

Pour le moment mon layout ressemble à ça :

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
<LinearLayout
    android:id="@+id/infos"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
 
    <View android:style="@style/divider"/>
 
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="left"
        android:text="Texte de gauche" />
 
    <View android:style="@style/divider"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Milieu" />
 
    <View android:style="@style/divider"/>  
 
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="right"
        android:text="Texte de droite" />
 
</LinearLayout>

Merci d'avance :ccool:

06/07/2012, 10h31
Ryu2000
Est-ce que si tu utilises un RelativeLayout que tu met :
TextView 1 :

Code:

android:layout_alignParentLeft="true"

TextView 3 :

Code:

android:layout_alignParentRight="true"

Tu mets un séparateur à la droite de TextView 1.
Tu mets un séparateur à la gauche de TextView 3.

Tu mets TextView 2 entre les deux séparateur et ça correspondra peut être à ce que tu veux.
Code:

1 2 android:layout_toRightOf="@+id/separateur1" android:layout_toLeftOf="@+id/separateur2"
06/07/2012, 11h01
Simon MARQUIS

En effet, il manque juste le fait que les séparateurs soient centrés dans leur "espace libre"...

Mais je pense qu'on approche du résultat final :)

Voilà où ça en est à l'heure d'aujourd'hui :

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
<LinearLayout
    android:id="@+id/infos"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
 
    <View android:style="@style/divider"/>
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:text="Texte de gauche" />
 
    <View android:style="@style/divider"/>
 
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Milieu" />
 
    <View android:style="@style/divider"/>  
 
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="right"
        android:text="Texte de droite" />
 
</LinearLayout>

Le texte du milieu est enfin centré par rapport aux espaces vides, mais il reste toujours le problème des dividers qui ne sont pas centrés...

Puisque le but est de positionner des views relativement à d'autre, il FAUT utiliser un RelativeLayout...

On commence par les 3 text-view... en wrap-content....
Ensuite avec le relative layout, on dessine le séparateur (là j'ai utilisé des ImageView).

A noter qu'il est possible de placer les textView différemment (en utilisant un autre layout même si il faut).

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
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Text1"
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:text="Text2"
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="Text3"
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignBottom="@id/textView1"
        android:layout_toLeftOf="@+id/textView2"
        android:layout_toRightOf="@id/textView1"
        android:scaleType="centerInside"
        android:src="@drawable/vertical_divider" />
 
    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_alignBottom="@id/textView1"
        android:layout_toLeftOf="@+id/textView3"
        android:layout_toRightOf="@id/textView2"
        android:scaleType="centerInside"
        android:src="@drawable/vertical_divider" />
 
</RelativeLayout>

09/07/2012, 15h26
Simon MARQUIS

Merci, mais là le problème est que l'item du milieu est toujours centré dans la page (alors que j'aimerais qu'il soit centré entre l'item gauche et l'item droit, quelque soit la taille des textes)

Dans ce cas il faut imbriquer deux relative-layout:

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
 
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/RelativeLayout1"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >
 
    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentLeft="true"
        android:layout_alignParentTop="true"
        android:text="Text1"
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="A Long Text3"
        android:textAppearance="?android:attr/textAppearanceMedium" />
 
 
 
    <RelativeLayout
        android:id="@+id/RelativeLayout2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toLeftOf="@+id/textView3"
        android:layout_toRightOf="@id/textView1"
        android:orientation="horizontal" >
 
        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_centerHorizontal="true"
            android:layout_gravity="center"
            android:text="Centered Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />
 
        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/textView2"
            android:layout_alignParentLeft="true"
            android:layout_alignParentTop="true"
            android:layout_toLeftOf="@id/textView2"
            android:scaleType="centerInside"
            android:src="@drawable/ic_launcher" />
 
        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@id/textView2"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:layout_toRightOf="@id/textView2"
            android:scaleType="centerInside"
            android:src="@drawable/ic_launcher" />
 
    </RelativeLayout>
 
</RelativeLayout>

09/07/2012, 16h49
Simon MARQUIS

1 pièce(s) jointe(s)

Merci beaucoup ça fonctionne parfaitement.

Je vais peut être faire un peu de zèle mais j'aimerais aussi que l'espace vide soit réparti de part et d'autre de chaque item. (cf image)
Ne vaudrai-t-il pas mieux utiliser un genre de TableLayout ?
16/07/2012, 18h03
Feanorin

Citation:

Ne vaudrai-t-il pas mieux utiliser un genre de TableLayout ?

C'est une bonne idée ^^. Vu ce que tu aimerais avoir

En effet, ça fonctionne parfaitement.
Merci pour vos réponses.

Voici aussi la solution avec le TableLayout :

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
<TableLayout
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    android:stretchColumns="0,2,4" >
 
                    <TableRow
                        android:id="@+id/tableRow1"
                        android:layout_width="wrap_content"
                        android:layout_height="wrap_content" >
 
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"/>
 
                        <View
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:background="@drawable/divider" />
 
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center" />
 
                        <View
                            android:layout_width="0dp"
                            android:layout_height="match_parent"
                            android:layout_weight="1"
                            android:background="@drawable/divider" />
 
                        <TextView
                            android:layout_width="wrap_content"
                            android:layout_height="wrap_content"
                            android:gravity="center"/>
                    </TableRow>
                </TableLayout>