Comment faire en sorte que la mise en page avec View remplisse l'espace restant?


189

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

Exemple de mise en page souhaitée

(<et> sont des boutons). Le problème est que je ne sais pas comment m'assurer que 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 créer une mise en page qui ressemble à l'image?


qu'utilisez-vous comme mise en page racine?
woodshy

1
@woodshy Toute mise en page est OK, peu importe.
Luke Vo

Réponses:


213

La réponse de woodshy a fonctionné pour moi, et elle est plus simple que la réponse d'Ungureanu Liviu puisqu'elle ne l'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>

Il y a des choses comme alignLeftet alignParentLeft, etc., qui ne peuvent jamais être réalisées avec LinearLayout.
IcyFlame

Je ne comprends pas tout à fait comment cela est possible mais c'est une astuce vraiment sympa pour éviter RelativeLayout
a.dibacco

2
Comment cela peut-il être la réponse acceptée? Il n'y a pas de vue d'image, ce n'est qu'une partie de la solution. Au moins, c'est mieux que l'ancienne réponse aux votes les plus élevés avec une disposition relative (j'ai expliqué pourquoi dans ma réponse)
Livio

solution de génie
Mohammad Elsayed le

93

Dans le cas où <TEXT VIEW> est placé dans LinearLayout, définissez la propriété Layout_weight de <et> sur 0 et 1 pour TextView.
En cas de RelativeLayout, alignez <et> à gauche et à droite et définissez les propriétés "Mise en page à gauche de" et "Mise en page à droite de" de TextView sur les identifiants de <et>


Quelqu'un a-t-il encore besoin d'un échantillon?
woodshy

Comment ajouter des images dans cette mise en page pour remplir la vue entière
Tushar Pandey

comment vous allez ajouter une image à l'intérieur de la mise en page relative, pour remplir la vue entière
Tushar Pandey

4
@woodshy oui un échantillon serait toujours utile
Frank Schwieterman

Regardez la réponse de Vivek Pandey pour un exemple
MyDogTom

71

Si vous utilisez RelativeLayout, vous pouvez le faire quelque chose 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>

Merci, ça marche :) Mais je ne comprends pas. Pourquoi le TextView ne remplit-il pas tout l'espace, pas pour le> bouton?
Luke Vo

2
Pourquoi deux dispositions relatives imbriquées? La racine devrait être suffisante. Ensuite, tout ce que vous avez à faire est de vous assurer que les enfants de la disposition relative inférieure sont tous alignParentBottom = "true"
Noel

@Noel Vous avez raison. Je choisis 2 layout car c'est comme ça que je suis utilisé: dans mes applications il peut arriver que je doive changer la visibilité de quelques vues et il est plus facile de toutes les mettre dans une mise en page et de changer la visibilité juste pour cette mise en page . Mon exemple n'est pas parfait mais ça marche et ça peut être utile pour quelqu'un.
Ungureanu Liviu

1
@WN C'est étrange pour moi aussi :) Je pense que la vue textuelle n'utilise pas tout l'espace car le bouton droit a une largeur fixe. Si vous changez le android: layout_width = "80dp" en android: layout_width = "wrap_content" pour le bouton droit, cela fonctionnera.
Ungureanu Liviu

2
Cette réponse est vraiment mauvaise! Vous devez éviter d'imbriquer 2 disposition relative car la disposition relative fait toujours passer 2 pour le dessin (contre 1 pour tout autre type de disposition). Cela devient exponentiel lorsque vous les imbriquez. Vous devez utiliser une disposition linéaire avec width = 0 et weight = 1 sur l'élément dont vous souhaitez remplir l'espace à gauche. N'oubliez pas: utilisez la mise en page relative UNIQUEMENT lorsque vous n'avez pas d'autre choix. stackoverflow.com/questions/4069037/…
Livio

30

En utilisant a 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é est de définir les contraintes de bord droit, gauche, supérieur et inférieur de manière appropriée, puis de définir la largeur et la hauteur sur 0dpet de le laisser déterminer sa propre taille.


4
Je commence tout juste à utiliser ConstraintLayout, c'est génial de savoir que la largeur et la hauteur peuvent être déterminées par des contraintes lors de leur définition sur "0", merci pour cela :)
MQoder

Il est important de faire attention au sens de la flèche de chaque contrainte. Assurez-vous qu'il TextViewa les contraintes gauche et droite. Le TextViewne s'étire pas si le premier Buttona la contrainte de droite sur le TextViewet le dernier Buttona la contrainte de gauche sur le TextView.
Manuel

beaucoup mieux! améliore les performances en n'ayant pas de dispositions imbriquées. Merci de nous avoir rappelé l'astuce
0dp

7

C'est simple Vous définissez la minWidth ou minHeight, dépend de ce que vous recherchez, horizontal ou vertical. Et pour l'autre objet (celui dont vous voulez remplir l'espace restant) vous définissez un poids de 1 (définissez la largeur pour envelopper son contenu), donc il remplira 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>

4

vous pouvez utiliser l'attribut layout_weight élevé. Ci-dessous, vous pouvez voir une disposition où ListView prend tout l'espace libre avec des 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>

3

Pour ceux qui ont le même problème avec <LinearLayout...>que moi:

Il est important de préciser android:layout_width="fill_parent", cela ne fonctionnera pas avec wrap_content.

OTOH, vous pouvez omettre android:layout_weight = "0", ce n'est pas obligatoire.

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


3

Vous devez éviter d'imbriquer 2 disposition relative car la disposition relative fait toujours passer 2 pour le dessin (contre 1 pour tout autre type de disposition). Cela devient exponentiel lorsque vous les imbriquez. Vous devez utiliser une disposition linéaire avec width = 0 et weight = 1 sur l'élément dont vous souhaitez remplir l'espace à gauche. Cette réponse est meilleure pour les performances et les pratiques. N'oubliez pas: utilisez la mise en page relative UNIQUEMENT 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>

0

Vous pouvez utiliser définir le layout_widthou layout_widthsur 0dp(selon l'orientation que vous souhaitez remplir l'espace restant). Utilisez ensuite le layout_weightpour remplir l'espace restant.


0

utiliser 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

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

Lorsque vous utilisez une disposition relative, vous pouvez étirer une vue en l'ancrant aux deux vues vers lesquelles elle est censée s'étirer. Bien que la hauteur spécifiée ne soit pas prise en compte, Android nécessite toujours un attribut de hauteur, c'est pourquoi j'ai écrit "0dp". Exemple:

<View
    android:id="@+id/topView"
    android:layout_width="match_parent"
    android:layout_height="40dp"
    android:layout_alignParentTop="true"
    android:layout_marginTop="8dp"/>

<View
    android:id="@+id/stretchableView"
    android:layout_width="match_parent"
    android:layout_height="0dp"
    android:layout_below="@id/topView"
    android:layout_above="@+id/bottomView"
    android:layout_marginTop="8dp"
    android:layout_marginBottom="8dp"
    android:adjustViewBounds="true"/>

<View
    android:id="@id/bottomView"
    android:layout_width="wrap_content"
    android:layout_height="40dp"
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="16dp"/>
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.