wake-up-neo.com

Wie werden Ansichten am unteren Bildschirmrand ausgerichtet?

Hier ist mein Layout-Code.

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

Wie das aussieht, ist auf der linken Seite und wie es aussehen soll, ist auf der rechten Seite.

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

Die offensichtliche Antwort besteht darin, die Textansicht auf die Höhe fill_parent zu setzen. Dadurch bleibt jedoch kein Platz mehr für die Schaltfläche oder das Eingabefeld. Im Wesentlichen geht es darum, dass die Schaltfläche "Senden" und die Texteingabe unten eine feste Höhe haben sollen und die Textansicht den Rest des Raums ausfüllt, ähnlich wie beim horizontalen linearen Layout, bei dem die Schaltfläche "Senden" den Inhalt umschließen soll und damit die Texteingabe den Rest des Raumes ausfüllt.

Wenn fill_parent als erstes Element in einem linearen Layout angewiesen wird, genau das zu tun, und dabei keinen Platz für andere Elemente zu lassen, wie kann ich ein Element, das sich als erstes in einem linearen Layout befindet, dazu bringen, den gesamten Platz außer dem für den Rest von erforderlichen Minimum auszufüllen die Elemente im Layout?

BEARBEITEN:

Relative Layouts waren in der Tat die Antwort - Danke!

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

Die moderne Möglichkeit besteht darin, ein ConstraintLayout zu haben und den unteren Rand der Ansicht auf den unteren Rand des ConstraintLayouts mit app:layout_constraintBottom_toBottomOf="parent" zu beschränken.

Im folgenden Beispiel wird ein FloatingActionButton erstellt, der am Ende und am unteren Rand des Bildschirms ausgerichtet wird.

_<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>
_

Als Referenz werde ich meine alte Antwort behalten.
Vor der Einführung von ConstraintLayout war die Antwort ein relatives Layout .

Wenn Sie ein relatives Layout haben, das den gesamten Bildschirm ausfüllt, sollten Sie Android:layout_alignParentBottom verwenden können, um die Schaltfläche an den unteren Bildschirmrand zu verschieben.

Wenn Ihre Ansichten unten nicht in einem relativen Layout angezeigt werden, nimmt das Layout darüber möglicherweise den gesamten Platz ein. In diesem Fall können Sie die Ansicht, die unten sein soll, zuerst in Ihre Layoutdatei einfügen und den Rest des Layouts mit _Android:layout_above_ über den Ansichten positionieren. Auf diese Weise nimmt die Ansicht von unten so viel Platz ein, wie sie benötigt, und der Rest des Layouts kann den gesamten Rest des Bildschirms ausfüllen.

514
Janusz

In einem ScrollView funktioniert dies nicht, da das RelativeLayout dann alles überlappt, was sich im ScrollView am unteren Rand der Seite befindet.

Ich habe es mit einem dynamisch gestreckten FrameLayout behoben:

<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

Sie können Ihr ursprüngliches lineares Layout beibehalten, indem Sie das relative Layout innerhalb des linearen Layouts verschachteln:

<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

Die Antwort oben (von Janusz) ist ganz richtig, aber ich persönlich fühle mich mit RelativeLayouts nicht 100% wohl, deshalb bevorzuge ich die Einführung eines 'Füllers', einer leeren TextView, wie folgt:

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

vor dem Element, das am unteren Rand des Bildschirms sein sollte.

42
Timores

Sie können dies auch mit einem LinearLayout oder einer ScrollView tun. Manchmal ist es einfacher als ein RelativeLayout zu implementieren. Sie müssen lediglich die folgende Ansicht hinzufügen vor die Ansichten, die Sie am unteren Bildschirmrand ausrichten möchten:

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

Dadurch wird eine leere Ansicht erstellt, die den leeren Bereich ausfüllt und die nächsten Ansichten in den unteren Bereich des Bildschirms verschiebt.

31
keybee

Das funktioniert auch.

<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.Verwenden Sie ConstraintLayout in Ihrem Root-Layout

Stellen Sie app:layout_constraintBottom_toBottomOf="parent" ein, um das Layout am unteren Bildschirmrand anzuzeigen

<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.Verwenden Sie FrameLayout in Ihrem Root-Layout

Stellen Sie einfach Android:layout_gravity="bottom" in Ihrem Layout ein

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

3.Verwenden Sie LinearLayout in Ihrem Root-Layout (Android:orientation="vertical")

(1) Legen Sie ein Layout Android:layout_weight="1" oben auf Ihrem Layout fest 

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

(2) Setzen Sie das Kind LinearLayout für Android:layout_width="match_parent" Android:layout_height="match_parent" Android:gravity="bottom"

Das Hauptattribut ist ndroid:gravity="bottom", lassen Sie die untergeordnete Ansicht am unteren Rand des Layouts.

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

4.Verwenden Sie RelativeLayout im Root-Layout

Stellen Sie Android:layout_alignParentBottom="true" ein, um das Layout am unteren Bildschirmrand anzuzeigen

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

OUTPUT

enter image description here

20
KeLiuyue

In Anlehnung an Timores 'elegante Lösung habe ich festgestellt, dass im Folgenden eine vertikale Füllung in einem vertikalen LinearLayout und eine horizontale Füllung in einem horizontalen LinearLayout erstellt wird:

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

Sie müssen nicht einmal das zweite relative Layout innerhalb des ersten verschachteln. Verwenden Sie einfach den Android:layout_alignParentBottom="true" im Button und EditText.

15
Steve Haley

Wenn Sie nicht viele Änderungen vornehmen möchten, können Sie einfach Folgendes eingeben:

Android:layout_weight="1"

für die Textansicht mit der ID @+id/TextView d.h.

<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

Hier ein Beispiel zum Erstellen von HEADER und FOOTER

[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>

[Screenshot]

enter image description here

Hoffe das ist hilfreich. Vielen Dank!!

7
Madan Sapkota

verwenden Sie den unteren Code-Ausrichtungsknopf, um die Funktionsweise zu verdeutlichen

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

Verwenden Sie für einen solchen Fall immer RelativeLayouts. Ein LinearLayout ist nicht für eine solche Verwendung vorgesehen.

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

Falls Sie eine Hierarchie wie diese haben:

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

Wenden Sie zuerst Android:fillViewport="true" auf ScrollView und dann Android:layout_alignParentBottom="true" auf LinearLayout an.

Das hat bei mir perfekt funktioniert.

<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

Verwenden Sie Android:layout_alignParentBottom="true" in Ihrem <RelativeLayout>.

Dies wird definitiv helfen.

2
jigar

Sie können Ihrer untergeordneten Top-Ansicht (TextView @ + id/TextView) einfach ein Attribut zuweisen: Android:layout_weight="1".

Dadurch werden alle anderen Elemente darunter nach unten gedrückt.

2
IgorGanapolsky

Dies kann auch mit linearem Layout erfolgen. Geben Sie für das Layout oben einfach Height = 0dp und weight = 1 ein und für das Layout unten schreiben Sie height = wrap content und no weight. Was es tut, ist es stellt Umbruchinhalt für das Layout bereit (derjenige, der Ihren Bearbeitungstext und Ihre Schaltfläche enthält) und derjenige, der Gewicht hat, besetzt den Rest des Layouts. Das habe ich zufällig entdeckt.

0
raihan ahmed

Ich habe die von Janusz gepostete Lösung verwendet, der letzten Ansicht wurde jedoch ein Abstand hinzugefügt, da der obere Teil meines Layouts eine ScrollView war. Die ScrollView wird teilweise ausgeblendet, wenn sie mit dem Inhalt wächst. Unter Android: Mit paddingBottom in der letzten Ansicht können Sie den gesamten Inhalt der ScrollView anzeigen.

0
jeremyvillalobos