Figer un design

Version imprimable

Figer un design

Bonjour,

je suis en train de réaliser une page qui va afficher une liste de magasin suivant un item particulier. En gros ce que je voudrais c'est sa :

Magasin 1 Btn1 Btn2
adresse du magasin1

Magasin 2 Btn1 Btn2
adresse du magasin2

Néanmoins suivant le nom du magasin tout est décalé. Je voudrais que les boutons soient toujours alignés. Et que si un nom, ou une adresse, soient trop long cela ne décale pas tout le design (par exemple on a le début du nom suivi de pointillé, que sa ne prenne pas une seconde ligne).

Mon problème est surement du au fait que je n'ai pas fait les choses d'une bonne manière... néanmoins j'ai assez de mal avec l'utilisation des layouts.

Voici le code d'un item : item.xml

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
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:baselineAligned="false"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="horizontal" 
 	android:weightSum="10" >
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="6"
        android:orientation="vertical" >
 
        <TextView
            android:id="@+id/etName"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Medium Text"
            android:textAppearance="?android:attr/textAppearanceLarge" />
 
        <TextView
            android:id="@+id/etAdress"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:text="Small Text"
            android:textAppearance="?android:attr/textAppearanceMedium" />
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
 
        <ImageButton
            android:id="@+id/btnMap"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="view map"
            android:src="@android:drawable/ic_menu_search" />
 
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:gravity="center"
        android:orientation="vertical" >
 
        <ImageButton
            android:id="@+id/btInfo"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:contentDescription="view info"
            android:src="@android:drawable/ic_dialog_info" />
 
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:orientation="vertical" >
    </LinearLayout>
 
</LinearLayout>

Et le code de la liste : liste.xml

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
<?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:background="@drawable/cheri_paris_fond"
    android:orientation="vertical"
    android:weightSum="10" >
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1.5"
        android:orientation="vertical" >
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:orientation="horizontal" >
 
        <TextView
            android:id="@+id/textView1"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:text="  Liste des magasins"
            android:textAppearance="?android:attr/textAppearanceLarge" />
 
    </LinearLayout>
 
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/activity_horizontal_margin"
        android:layout_weight="7.5">
 
        <ListView
            android:id="@+id/lstMag"
            android:layout_width="match_parent"
            android:layout_height="match_parent">
        </ListView>
 
    </LinearLayout>
 
</LinearLayout>

Les poids que j'ai associé à certain layout sont important pour que l'appli puisse s'adapter aux différents types de mobile / tablette utilisés.

Si quelqu'un pourrait m'expliquer comment réaliser ce "design" sa m'aiderait beaucoup. Merci à vous

Je ne comprends pas le "item.xml"....

Il y a plein de LinearLayout vides ou pire... ne contenant qu'un seul item !!... normalement Lint devrait râler sévère pour ça.

Dans ce que tu montres il y a:
1 LinearLayout vertical, contenant deux lignes:
--- 1 LinearLayout horizontal, contenant TextView, ImageView et ImageView
--- 1 TextView

Il est possible de commencer par les ImageButton avec gravity=right
et du coup se retrouver les ImageButton collées à droite, et le text-view derrière (en fill_parent).

A noter qu'il est aussi possible d'utiliser les weight (mais ce n'est pas recommandé pour des ImageButton qui vont devoir chercher une bitmap). Ne pas indiquer de weight (ou y mettre 0) indique "prend le reste de la place" (donc le TextView aurait un weight de 0).

Mais encore plus simple.. on peut utiliser RelativeLayout pour n'avoir qu'un seul layout (je ne met pas tout hein ! :D) :
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 <RelativeLayout android:layout_width="match_parent" // ok pour "remplir" la liste. android:layout_height="wrap_content" // surtout pas "match_parent" ! <TextView android:id="@+id/etName" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentTop="true" android:layout_toLeftOf="@+id/btnMap" /> <ImageButton android:id="@+id/btnMap" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_toLeftOf="@+id/btnInfo" /> <ImageButton android:id="@+id/btnInfo" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentTop="true" android:layout_alignParentRight="true" /> <TextView android:id="@+id/etAdress" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_alignParentRight="true" android:layout_below="@+id/etName" /> </RelativeLayout>
J'ai l'impression que tu utilises des layout pour faire du padding !
C'est pas bon du tout... utilise les attributs de padding à la place, bien plus efficace.

31/01/2014, 17h01
Lolosan

Effectivement mes layouts mes servent à faire une marge. Merci beaucoup je vois un peu mieux comment on fait. Je vais tenter de refaire mes autres interfaces sur ce modèle.