Je travaille sur la mise en page d'un formulaire pour une Activité
de connexion dans mon application Android. L'image ci-dessous montre à quoi je veux que cela ressemble :
![entrez la description de l'image ici][1]
J'ai pu réaliser cette mise en page avec le XML suivant. Le problème, c'est que c'est un peu bricolé. J'ai dû coder en dur la largeur de l'EditText hôte. Plus précisément, j'ai dû spécifier :
android:layout_width="172dp"
J’aimerais vraiment donner un pourcentage de largeur aux EditText de l’hôte et du port. (Quelque chose comme 80 % pour l'hôte, 20 % pour le port.) Est-ce possible ? Le XML suivant fonctionne sur mon Droid, mais il ne semble pas fonctionner pour tous les écrans. J'aimerais vraiment trouver une solution plus robuste.
<!-- begin snippet: js hide: false -->
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:id="@+id/main"
android:layout_width="fill_parent"
android:layout_height="fill_parent" >
<TextView
android:id="@+id/host_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/home"
android:paddingLeft="15dp"
android:paddingTop="0dp"
android:text="host"
android:textColor="#a5d4e2"
android:textSize="25sp"
android:textStyle="normal" />
<TextView
android:id="@+id/port_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/home"
android:layout_toRightOf="@+id/host_input"
android:paddingTop="0dp"
android:text="port"
android:textColor="#a5d4e2"
android:textSize="25sp"
android:textStyle="normal" />
<EditText
android:id="@+id/host_input"
android:layout_width="172dp"
android:layout_height="wrap_content"
android:layout_below="@id/host_label"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="4dp"
android:background="@android:drawable/editbox_background"
android:inputType="textEmailAddress" />
<EditText
android:id="@+id/port_input"
android:layout_width="100dp"
android:layout_height="wrap_content"
android:layout_below="@id/host_label"
android:layout_marginTop="4dp"
android:layout_toRightOf="@id/host_input"
android:background="@android:drawable/editbox_background"
android:inputType="number" />
<TextView
android:id="@+id/username_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/host_input"
android:paddingLeft="15dp"
android:paddingTop="15dp"
android:text="username"
android:textColor="#a5d4e2"
android:textSize="25sp"
android:textStyle="normal" />
<EditText
android:id="@+id/username_input"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/username_label"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="4dp"
android:background="@android:drawable/editbox_background"
android:inputType="textEmailAddress" />
<TextView
android:id="@+id/password_label"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/username_input"
android:paddingLeft="15dp"
android:paddingTop="15dp"
android:text="password"
android:textColor="#a5d4e2"
android:textSize="25sp"
android:textStyle="normal" />
<EditText
android:id="@+id/password_input"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:layout_below="@id/password_label"
android:layout_marginLeft="15dp"
android:layout_marginRight="15dp"
android:layout_marginTop="4dp"
android:background="@android:drawable/editbox_background"
android:inputType="textPassword" />
<ImageView
android:id="@+id/home"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true"
android:layout_centerHorizontal="true"
android:layout_centerVertical="false"
android:paddingLeft="15dp"
android:paddingRight="15dp"
android:paddingTop="15dp"
android:scaleType="fitStart"
android:src="@drawable/home" />
<Button
android:id="@+id/login_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="@+id/password_input"
android:layout_marginLeft="15dp"
android:layout_marginTop="15dp"
android:text=" login "
android:textSize="18sp" >
</Button>
</RelativeLayout>
<!-- end snippet -->
Vous recherchez l'attribut android:layout_weight
. Il vous permettra d'utiliser des pourcentages pour définir votre mise en page.
Dans l'exemple suivant, le bouton de gauche utilise 70% de l'espace, et le bouton de droite 30%.
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal">
<Button
android:text="left"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".70" />
<Button
android:text="right"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_weight=".30" />
</LinearLayout>
Cela fonctionne de la même manière avec n'importe quel type de vue, vous pouvez remplacer les boutons par un EditText en fonction de vos besoins.
Assurez-vous de définir la largeur de la fenêtre (layout_width
) à 0dp
ou vos vues ne seront pas mises à l'échelle correctement.
Notez que la somme des poids n'a pas besoin d'être égale à 1, je trouve juste que c'est plus facile à lire comme ça. Vous pouvez définir le premier poids à 7 et le second à 3 et cela donnera le même résultat.
Pour ce faire, vous pouvez utiliser des poids de mise en page. Un poids détermine la façon dont les parties non réclamées de l'écran sont réparties. Donnez à chaque EditText une layout_width de 0, et un poids proportionnel. Par exemple, donnez à l'un un poids de 2, et à l'autre un poids de 1 si vous voulez que le premier occupe deux fois plus d'espace.