web-dev-qa-db-fra.com

Comment faire une mise en page avec View remplir l'espace restant?

Je conçois mon interface utilisateur d'application. J'ai besoin d'une mise en page qui ressemble à ceci:

Example of desired layout

(<et> sont des boutons). Le problème est que je ne sais pas comment m'assurer que le TextView remplira l'espace restant, avec deux boutons de taille fixe.

Si j'utilise fill_parent pour la vue texte, le deuxième bouton (>) ne peut pas être affiché.

Comment puis-je créer une mise en page qui ressemble à l'image?

androidlayoutandroid-layout
177
Luke Vo

La réponse de woodshy a fonctionné pour moi, et elle est plus simple que la réponse de Ungureanu Liviu puisqu'elle n'utilise pas RelativeLayout. Je donne ma mise en page pour plus de clarté:

<LinearLayout 
      Android:layout_width="fill_parent"
      Android:layout_height="wrap_content"
      Android:orientation="horizontal"
      >

     <Button
        Android:layout_width = "80dp"
        Android:layout_weight = "0"
        Android:layout_height = "wrap_content"
        Android:text="&lt;"/>
     <TextView
        Android:layout_width = "fill_parent"
        Android:layout_height = "wrap_content"
        Android:layout_weight = "1"/>
     <Button
        Android:layout_width = "80dp"
        Android:layout_weight = "0"
        Android:layout_height = "wrap_content"
        Android:text="&gt;"/>   
 </LinearLayout>
192
Vivek Pandey

Si <TEXT VIEW> est placé dans LinearLayout, définissez la propriété Layout_weight de <et> sur 0 et 1 pour TextView.
Dans le cas de RelativeLayout, alignez <et> à gauche et à droite et définissez les propriétés "Layout à gauche de" et "Layout à droite de" de TextView sur les id de <et>

92
woodshy

Si vous utilisez RelativeLayout, vous pouvez le faire comme ceci:

<RelativeLayout
    Android:layout_width = "fill_parent"
    Android:layout_height = "fill_parent">
    <ImageView
        Android:id = "@+id/my_image"
        Android:layout_width = "wrap_content"
        Android:layout_height = "wrap_content"
        Android:layout_alignParentTop ="true" />
    <RelativeLayout
        Android:id="@+id/layout_bottom"
        Android:layout_width="fill_parent"
        Android:layout_height = "50dp"
        Android:layout_alignParentBottom = "true">
        <Button
            Android:id = "@+id/but_left"
            Android:layout_width = "80dp"
            Android:layout_height = "wrap_content"
            Android:text="&lt;"
            Android:layout_alignParentLeft = "true"/>
        <TextView
            Android:layout_width = "fill_parent"
            Android:layout_height = "wrap_content"
            Android:layout_toLeftOf = "@+id/but_right"
            Android:layout_toRightOf = "@id/but_left" />
        <Button
            Android:id = "@id/but_right"
            Android:layout_width = "80dp"
            Android:layout_height = "wrap_content"
            Android:text="&gt;"
            Android:layout_alignParentRight = "true"/>
    </RelativeLayout>
</RelativeLayout>
71
Ungureanu Liviu

En utilisant un ConstraintLayout, j'ai trouvé quelque chose comme

<Button
    Android:id="@+id/left_button"
    Android:layout_width="80dp"
    Android:layout_height="48dp"
    Android:text="&lt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    Android:layout_width="0dp"
    Android:layout_height="0dp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toRightOf="@+id/left_button"
    app:layout_constraintRight_toLeftOf="@+id/right_button"
    app:layout_constraintTop_toTopOf="parent" />

<Button
    Android:id="@+id/right_button"
    Android:layout_width="80dp"
    Android:layout_height="48dp"
    Android:text="&gt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

travaux. La clé consiste à définir correctement les contraintes de bord droit, gauche, supérieur et inférieur, puis à définir la largeur et la hauteur sur 0dp pour lui permettre de déterminer sa propre taille.

28
Tom Howard

C'est simple Vous définissez la largeur minimale ou minimale, cela dépend de ce que vous recherchez, horizontal ou vertical. Et pour l’autre objet (celui pour lequel vous souhaitez remplir l’espace restant), définissez un poids de 1 (définissez la largeur pour envelopper le contenu), afin de remplir le reste de la zone.

<LinearLayout
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_weight="1"
        Android:gravity="center|left"
        Android:orientation="vertical" >
</LinearLayout>
<LinearLayout
        Android:layout_width="80dp"
        Android:layout_height="fill_parent"
        Android:minWidth="80dp" >
</LinearLayout>
7
Daniel

vous pouvez utiliser l'attribut layout_weight élevé. Ci-dessous, vous pouvez voir une mise en page où ListView occupe tout l'espace libre avec les boutons en bas:

<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
    xmlns:tools="http://schemas.Android.com/tools"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent"
    tools:context=".ConfigurationActivity"
    Android:orientation="vertical"
    >

        <ListView
            Android:id="@+id/listView"
            Android:layout_width="fill_parent"
            Android:layout_height="fill_parent"
            Android:layout_weight="1000"
            />


        <Button
            Android:id="@+id/btnCreateNewRule"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            Android:text="Create New Rule" />



        <Button
            Android:id="@+id/btnConfigureOk"
            Android:layout_width="fill_parent"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            Android:text="Ok" />


</LinearLayout>
4
thinker

Pour ceux qui ont le même problème avec <LinearLayout...> que je l'ai fait:

Il est important de spécifier Android:layout_width="fill_parent", cela ne fonctionnera pas avec wrap_content.

OTOH, vous pouvez omettre Android:layout_weight = "0", ce n'est pas nécessaire.

Mon code est fondamentalement le même que celui de https://stackoverflow.com/a/25781167/755804 (par Vivek Pandey)

3
18446744073709551615

Vous devez éviter d'imbriquer 2 dispositions relatives, car celles-ci effectuent toujours 2 passes pour le dessin (contre 1 pour tout autre type de disposition). Cela devient exponentiel lorsque vous les imbriquez. Vous devez utiliser une mise en page linéaire avec width = 0 et weight = 1 sur l'élément que vous voulez remplir. Cette réponse est meilleure pour la performance et les pratiques. Rappelez-vous: utilisez la disposition relative SEULEMENT lorsque vous n'avez pas d'autre choix.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
          Android:layout_width="match_parent"
          Android:layout_height="match_parent"
          Android:orientation="vertical">

    <ImageView
        Android:id="@+id/imageview"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content" />

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="50dp"
        Android:orientation="horizontal">

        <Button
            Android:id="@+id/prev_button"
            Android:layout_width="80dp"
            Android:layout_height="wrap_content"
            Android:text="&lt;" />

        <TextView
            Android:layout_width="0dp"
            Android:layout_height="wrap_content"
            Android:layout_weight="1"
            Android:ellipsize="end"
            Android:singleLine="true"
            Android:gravity="center"
            Android:text="TextView" />

        <Button
            Android:id="@+id/next_button"
            Android:layout_width="80dp"
            Android:layout_height="wrap_content"
            Android:text="&gt;" />
    </LinearLayout>
</LinearLayout>
2
Livio

Vous pouvez utiliser les paramètres layout_width ou layout_width sur 0dp (selon l'orientation que vous souhaitez remplir l'espace restant). Ensuite, utilisez le layout_weight pour le faire remplir l’espace restant.

0
taynguyen

utilisez un relativelayout pour envelopper LinearLayout

<RelativeLayout xmlns:Android="http://schemas.Android.com/apk/res/Android"
xmlns:round="http://schemas.Android.com/apk/res-auto"
xmlns:app="http://schemas.Android.com/apk/res-auto"
Android:layout_width="match_parent"
Android:layout_height="match_parent">
<LinearLayout
Android:layout_width="fill_parent"
Android:layout_height="match_parent"
Android:orientation="vertical">
    <Button
        Android:layout_width = "wrap_content"
        Android:layout_height = "wrap_content"
        Android:text="&lt;"/>
    <TextView
        Android:layout_width = "fill_parent"
        Android:layout_height = "wrap_content"
        Android:layout_weight = "1"/>
    <Button
        Android:layout_width = "wrap_content"
        Android:layout_height = "wrap_content"
        Android:text="&gt;"/>

</LinearLayout>

</RelativeLayout>`
0
john liao

j'ai trouvé

 <TextView
        Android:layout_width="wrap_content"
        Android:layout_height="match_parent"
        Android:layout_marginEnd="10dp"
        Android:fontFamily="casual"
        Android:text="(By Zeus B0t)"
     ``   Android:textSize="10sp"
        Android:gravity="bottom"
        Android:textStyle="italic" />
0
Zeus B0t