web-dev-qa-db-fra.com

Comment aligner les vues au bas de l'écran?

Voici mon code de mise en page;

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

    <TextView Android:text="@string/welcome" 
        Android:id="@+id/TextView" 
        Android:layout_width="fill_parent" 
        Android:layout_height="wrap_content">
    </TextView>

    <LinearLayout Android:id="@+id/LinearLayout" 
        Android:orientation="horizontal"
        Android:layout_width="wrap_content" 
        Android:layout_height="wrap_content" 
        Android:gravity="bottom">

            <EditText Android:id="@+id/EditText" 
                Android:layout_width="fill_parent" 
                Android:layout_height="wrap_content">
            </EditText>

            <Button Android:text="@string/label_submit_button" 
                Android:id="@+id/Button" 
                Android:layout_width="wrap_content" 
                Android:layout_height="wrap_content">
            </Button>

    </LinearLayout>

</LinearLayout>

Ce à quoi cela ressemble est à gauche et ce que je veux que cela ressemble est à droite.

Android Layout - Actual (Left) and Desired (Right)

La réponse évidente consiste à définir TextView sur fill_parent en hauteur, mais cela ne laisse aucune place pour le bouton ou le champ de saisie. Le problème est essentiellement que je souhaite que le bouton de soumission et l'entrée de texte aient une hauteur fixe en bas et que la vue du texte remplisse le reste de l'espace. De la même manière, dans la mise en page linéaire horizontale, je souhaite que le bouton de soumission enveloppe son contenu et pour que l'entrée de texte remplisse le reste de l'espace.

Si le premier élément d'une disposition linéaire se voit indiquer que fill_parent est exactement ce qu'il est fait, ne laissant aucune place à d'autres éléments, comment puis-je obtenir un élément qui est le premier dans une disposition linéaire pour remplir tout l'espace mis à part le minimum requis par le reste de les éléments dans la mise en page?

MODIFIER:

La mise en page relative était bien la réponse - Merci!

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

    <TextView 
        Android:text="@string/welcome" 
        Android:id="@+id/TextView"
        Android:layout_width="fill_parent" 
        Android:layout_height="wrap_content"
        Android:layout_alignParentTop="true">
    </TextView>

    <RelativeLayout 
        Android:id="@+id/InnerRelativeLayout"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:layout_alignParentBottom="true" >

        <Button 
            Android:text="@string/label_submit_button" 
            Android:id="@+id/Button"
            Android:layout_alignParentRight="true" 
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content">
        </Button>

        <EditText 
            Android:id="@+id/EditText" 
            Android:layout_width="fill_parent"
            Android:layout_toLeftOf="@id/Button"
            Android:layout_height="wrap_content">
        </EditText>

    </RelativeLayout>

</RelativeLayout>
androidxmluser-interfaceandroid-layout
620
gav

Pour ce faire, la méthode moderne consiste à avoir ConstraintLayout et à contraindre le bas de la vue au bas de ConstraintLayout avec app:layout_constraintBottom_toBottomOf="parent"

L'exemple ci-dessous crée un FloatingActionButton qui sera aligné à la fin et au bas de l'écran.

_<Android.support.constraint.ConstraintLayout 
   xmlns:Android="http://schemas.Android.com/apk/res/Android"
   xmlns:app="http://schemas.Android.com/apk/res-auto"
   xmlns:tools="http://schemas.Android.com/tools"
   Android:layout_height="match_parent"
   Android:layout_width="match_parent">

<Android.support.design.widget.FloatingActionButton
    Android:layout_height="wrap_content"
    Android:layout_width="wrap_content"

    app:layout_constraintBottom_toBottomOf="parent"

    app:layout_constraintEnd_toEndOf="parent" />

</Android.support.constraint.ConstraintLayout>
_

Pour référence je garderai mon ancienne réponse.
Avant l’introduction de ConstraintLayout, la réponse était un disposition relative .

Si vous avez une disposition relative qui remplit tout l'écran, vous devriez pouvoir utiliser Android:layout_alignParentBottom pour déplacer le bouton au bas de l'écran.

Si vos vues en bas ne sont pas affichées dans une mise en page relative, alors peut-être que la mise en page ci-dessus prend tout l'espace. Dans ce cas, vous pouvez placer la vue qui devrait être en bas, d'abord dans votre fichier de présentation, puis positionner le reste de la présentation au-dessus des vues avec _Android:layout_above_. Cela permet à la vue de dessous de prendre tout l'espace dont elle a besoin et le reste de la mise en page peut remplir tout le reste de l'écran.

514
Janusz

Dans un ScrollView cela ne fonctionne pas, car le RelativeLayout chevaucherait alors tout ce qui se trouve dans le ScrollView au bas de la page.

Je l'ai corrigé en utilisant une extension dynamique FrameLayout:

<ScrollView 
    xmlns:Android="http://schemas.Android.com/apk/res/Android"
    Android:layout_height="match_parent" 
    Android:layout_width="match_parent"
    Android:fillViewport="true">
    <LinearLayout 
        Android:id="@+id/LinearLayout01"
        Android:layout_width="match_parent" 
        Android:layout_height="match_parent"
        xmlns:Android="http://schemas.Android.com/apk/res/Android"
        Android:orientation="vertical">

                <!-- content goes here -->

                <!-- stretching frame layout, using layout_weight -->
        <FrameLayout
            Android:layout_width="match_parent" 
            Android:layout_height="0dp"
            Android:layout_weight="1">
        </FrameLayout>

                <!-- content fixated to the bottom of the screen -->
        <LinearLayout 
            Android:layout_width="match_parent" 
            Android:layout_height="wrap_content"
            Android:orientation="horizontal">
                                   <!-- your bottom content -->
        </LinearLayout>
    </LinearLayout>
</ScrollView>
149
Bram Avontuur

Vous pouvez conserver votre mise en page linéaire initiale en imbriquant la mise en page relative dans la mise en page linéaire:

<LinearLayout
    Android:orientation="vertical"
    Android:layout_width="fill_parent"
    Android:layout_height="fill_parent">

    <TextView Android:text="welcome" 
        Android:id="@+id/TextView" 
        Android:layout_width="fill_parent" 
        Android:layout_height="wrap_content">
    </TextView>

    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="match_parent">
        <Button Android:text="submit" 
            Android:id="@+id/Button" 
            Android:layout_width="wrap_content" 
            Android:layout_height="wrap_content"
            Android:layout_alignParentBottom="true"
            Android:layout_alignParentRight="true">
        </Button>
        <EditText Android:id="@+id/EditText" 
            Android:layout_width="match_parent" 
            Android:layout_height="wrap_content"
            Android:layout_toLeftOf="@id/Button"
            Android:layout_alignParentBottom="true">
        </EditText>
    </RelativeLayout>
</LinearLayout>
69
pseudosudo

La réponse ci-dessus (de Janusz) est tout à fait correcte, mais personnellement, je ne me sens pas tout à fait à l'aise avec RelativeLayouts, je préfère donc introduire un "remplissage" vide TextView, comme ceci:

<!-- filler -->
<TextView Android:layout_height="0dip" 
          Android:layout_width="fill_parent"
          Android:layout_weight="1" />

avant l'élément qui devrait être au bas de l'écran.

42
Timores

Vous pouvez aussi faire cela avec LinearLayout ou ScrollView. Parfois, il est plus facile de mettre en œuvre qu'un RelativeLayout. La seule chose à faire est d'ajouter la vue suivante avant les vues que vous souhaitez aligner en bas de l'écran:

<View
        Android:layout_width="wrap_content"
        Android:layout_height="0dp"
        Android:layout_weight="1" />

Cela crée une vue vide, remplissant l'espace vide et poussant les vues suivantes au bas de l'écran.

31
keybee

Cela fonctionne aussi.

<LinearLayout 
    Android:id="@+id/linearLayout4"
    Android:layout_width="wrap_content"
    Android:layout_height="fill_parent"
    Android:layout_below="@+id/linearLayout3"
    Android:layout_centerHorizontal="true"
    Android:orientation="horizontal" 
    Android:gravity="bottom"
    Android:layout_alignParentBottom="true"
    Android:layout_marginTop="20dp"
>

    <Button
        Android:id="@+id/button1"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Button" 

    />

    <Button
        Android:id="@+id/button2"
        Android:layout_width="wrap_content"
        Android:layout_height="wrap_content"
        Android:text="Button" 


    />

</LinearLayout>

gravity="bottom" to float LinearLayout elements to bottom

27
Michael Reed

1.Utilisez ConstraintLayout dans votre mise en page racine

Et réglez app:layout_constraintBottom_toBottomOf="parent" pour laisser la disposition en bas de l'écran

<LinearLayout
    Android:id="@+id/LinearLayout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:orientation="horizontal"
    app:layout_constraintBottom_toBottomOf="parent">
</LinearLayout>

2.Utilisez FrameLayout dans votre mise en page racine

Il suffit de mettre Android:layout_gravity="bottom" dans votre layout

<LinearLayout
    Android:id="@+id/LinearLayout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_gravity="bottom"
    Android:orientation="horizontal">
</LinearLayout>

3.Utilisez LinearLayout dans votre mise en page racine (Android:orientation="vertical")

(1) Placez une mise en page Android:layout_weight="1" en haut de votre mise en page 

<TextView
    Android:id="@+id/TextView"
    Android:layout_width="match_parent"
    Android:layout_height="0dp"
    Android:layout_weight="1"
    Android:text="welcome" />

(2) Définissez l'enfant LinearLayout pour Android:layout_width="match_parent" Android:layout_height="match_parent" Android:gravity="bottom"

L'attribut principal est ndroid:gravity="bottom", laissez la vue enfant au bas de la mise en page.

<LinearLayout
    Android:id="@+id/LinearLayout"
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:gravity="bottom"
    Android:orientation="horizontal">
</LinearLayout>

4.Utilisez RelativeLayout dans la mise en page racine

Et réglez Android:layout_alignParentBottom="true" pour laisser la disposition en bas de l'écran

<LinearLayout
    Android:id="@+id/LinearLayout"
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true"
    Android:orientation="horizontal">
</LinearLayout>

SORTIE

enter image description here

20
KeLiuyue

Pour faire suite à la solution élégante de Timores, j'ai constaté que ce qui suit crée un remplissage vertical dans un LinearLayout vertical et un remplissage horizontal dans un LinearLayout horizontal:

<Space
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:layout_weight="1" />
18
stevehs17

Vous n'avez même pas besoin d'imbriquer la deuxième relative disposition à l'intérieur de la première. Utilisez simplement le Android:layout_alignParentBottom="true" dans les Button et EditText.

15
Steve Haley

Si vous ne souhaitez pas faire beaucoup de changements, vous pouvez simplement mettre:

Android:layout_weight="1"

pour le TextView ayant l'ID comme @+id/TextView i.e

<TextView Android:text="@string/welcome" 
    Android:id="@+id/TextView" 
    Android:layout_width="fill_parent" 
    Android:layout_height="wrap_content"
    Android:layout_weight="1">
</TextView>
11
Kiran Parmar

Créer à la fois HEADER et FOOTER, voici un exemple

[Layout XML]

<RelativeLayout
    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"
    Android:background="@color/backgroundcolor"
    tools:context=".MainActivity">

    <RelativeLayout
        Android:layout_width="fill_parent"
        Android:layout_height="40dp"
        Android:background="#FF0000">
    </RelativeLayout>

    <RelativeLayout
        Android:layout_width="fill_parent"
        Android:layout_height="40dp"
        Android:layout_alignParentBottom="true"
        Android:background="#FFFF00">
    </RelativeLayout>

</RelativeLayout>

[Capture d'écran]

enter image description here

J'espère que c'est utile. Merci!!

7
Madan Sapkota

utiliser le bouton d'alignement de code ci-dessous pour arrêter son fonctionnement

    <?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" >

    <Button
        Android:id="@+id/btn_back"
        Android:layout_width="100dp"
        Android:layout_height="80dp"
        Android:text="Back" />

    <TextView
        Android:layout_width="match_parent"
        Android:layout_height="0dp"
        Android:layout_weight="0.97"
        Android:gravity="center"
        Android:text="Payment Page" />

    <LinearLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content" >

        <EditText
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" 
            Android:layout_weight="1"/>

        <Button
            Android:layout_width="wrap_content"
            Android:layout_height="wrap_content" 
            Android:text="Submit"/>
    </LinearLayout>

</LinearLayout>
4
sharma_kunal

Pour un cas comme celui-ci, utilisez toujours RelativeLayouts. LinearLayout n'est pas destiné à un tel usage.

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

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="match_parent"
    Android:orientation="vertical">

    <!-- Place your layout here -->

</LinearLayout>

<LinearLayout
    Android:layout_width="match_parent"
    Android:layout_height="wrap_content"
    Android:layout_alignParentBottom="true"
    Android:layout_gravity="bottom"
    Android:orientation="horizontal"
    Android:paddingLeft="20dp"
    Android:paddingRight="20dp" >

    <Button
        Android:id="@+id/setup_macroSavebtn"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:text="Save" />

    <Button
        Android:id="@+id/setup_macroCancelbtn"
        Android:layout_width="0dp"
        Android:layout_height="wrap_content"
        Android:layout_weight="1"
        Android:text="Cancel" />

    </LinearLayout>

</RelativeLayout>
3
Shubham A.

Si vous avez une hiérarchie comme celle-ci:

<ScrollView> 
  |-- <RelativeLayout> 
    |-- <LinearLayout>

Tout d’abord, appliquez Android:fillViewport="true" à la ScrollView, puis appliquez Android:layout_alignParentBottom="true" à la LinearLayout.

Cela a fonctionné pour moi parfaitement.

<ScrollView
    Android:layout_height="match_parent"
    Android:layout_width="match_parent"
    Android:scrollbars="none"
    Android:fillViewport="true">
    <RelativeLayout
        Android:layout_width="match_parent"
        Android:layout_height="wrap_content">
        <LinearLayout
            Android:orientation="horizontal"
            Android:layout_width="match_parent"
            Android:layout_height="wrap_content"
            Android:gravity="center"
            Android:id="@+id/linearLayoutHorizontal"
            Android:layout_alignParentBottom="true">
        </LinearLayout>
    </RelativeLayout>
</ScrollView>
2
Prince

Utilisez Android:layout_alignParentBottom="true" dans votre <RelativeLayout>.

Cela aidera certainement.

2
jigar

Vous pouvez simplement donner à votre vue enfant supérieure (TextView @ + id/TextView) un attribut: Android:layout_weight="1".

Cela forcera tous les autres éléments situés en dessous.

2
IgorGanapolsky

Cela peut aussi être fait avec une disposition linéaire. Il suffit de fournir Height = 0dp et weight = 1 à la disposition ci-dessus et celle que vous voulez en bas suffit d'écrire height = wrap content et aucun poids. Cela permet de renvoyer le contenu de la mise en page (celle qui contient votre texte et votre bouton d'édition), puis celle qui a du poids occupe le reste de la mise en page. J'ai découvert cela par accident.

0
raihan ahmed

J'ai utilisé la solution publiée par Janusz, mais j'ai ajouté du remplissage à la dernière vue car la partie supérieure de ma mise en page était un ScrollView. Le ScrollView sera en partie caché au fur et à mesure qu’il grandira avec le contenu. Utilisation d'Android: paddingBottom sur la dernière vue permet d'afficher tout le contenu de la vue ScrollView.

0
jeremyvillalobos