Jak wyrównać widoki u dołu ekranu?

Oto mój kod układu;

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

To, jak to wygląda, znajduje się po lewej stronie, a to, co chcę, aby wyglądało, jest po prawej stronie.

Oczywistą odpowiedzią jest ustawienie TextView na fill_parent na wysokości, ale nie powoduje to pozostawienia miejsca dla przycisku lub pola wprowadzania.

Zasadniczo problem polega na tym, że chcę, aby przycisk wysyłania i wpis tekstu miały stałą wysokość u dołu, a widok tekstu wypełniał resztę miejsca. Podobnie w poziomym układzie liniowym chcę, aby przycisk wysyłania zawinął jego zawartość i aby wpis tekstu wypełnił resztę miejsca.

Jeśli polecenie pierwszemu elementowi w układzie liniowym zostanie wypełnione, to robi to dokładnie, nie pozostawiając miejsca na inne elementy. Jak uzyskać element, który jako pierwszy ma układ liniowy, aby wypełnić całą przestrzeń oprócz minimum wymaganego przez pozostałe elementy w układzie?

Względne układy były rzeczywiście odpowiedzią:

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

Współczesnym sposobem na to jest ConstraintLayout i ograniczenie dolnej części widoku do dolnej części ConstraintLayout za pomocąapp:layout_constraintBottom_toBottomOf="parent"

Poniższy przykład tworzy FloatingActionButton, który zostanie wyrównany do końca i dołu ekranu.

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

Dla porównania zachowam moją starą odpowiedź.

Przed wprowadzeniem ConstraintLayout odpowiedzią był układ względny .

Jeśli masz względny układ, który wypełnia cały ekran, powinieneś być w stanie android:layout_alignParentBottomprzenieść przycisk na dół ekranu.

Jeśli twoje widoki u dołu nie są pokazane we względnym układzie, być może układ nad nim zajmuje całą przestrzeń. W takim przypadku możesz umieścić widok, który powinien znajdować się na dole, najpierw w pliku układu i ustawić resztę układu nad widokami za pomocą android:layout_above. Dzięki temu widok z dołu zajmuje tyle miejsca, ile potrzebuje, a reszta układu może wypełnić całą resztę ekranu.

W ScrollViewtym nie działa, ponieważ RelativeLayoutwówczas nakładałyby się na to, co jest ScrollViewna dole strony.

Naprawiłem to za pomocą dynamicznego rozciągania 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>

Możesz zachować początkowy układ liniowy, zagnieżdżając układ względny w układzie liniowym:

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

Powyższa odpowiedź (autorstwa Janusza) jest całkiem poprawna, ale osobiście nie czuję się w 100% komfortowo z RelativeLayouts, więc wolę wprowadzić „wypełniacz”, pusty TextView, taki jak ten:

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

przed elementem, który powinien znajdować się na dole ekranu.

Możesz to zrobić również za pomocą LinearLayout lub ScrollView. Czasami jest łatwiejsze do wdrożenia niż RelativeLayout. Jedyne, co musisz zrobić, to dodać następujący widok przed widokami, które chcesz wyrównać do dolnej części ekranu:

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

Tworzy to pusty widok, wypełniając puste miejsce i przesuwając kolejne widoki na dół ekranu.

To też działa.

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

1. Użyj ConstraintLayoutw swoim głównym układzie

I ustaw, app:layout_constraintBottom_toBottomOf="parent"aby układ u dołu ekranu:

<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. Użyj FrameLayoutw swoim głównym układzie

Wystarczy ustawić android:layout_gravity="bottom"w swoim układzie

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

3. Użyj LinearLayoutw swoim głównym układzie ( android:orientation="vertical")

(1) Ustaw układ android:layout_weight="1"na górze układu

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

(2) Ustaw dziecka LinearLayoutdoandroid:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom"

Głównym atrybutem jest ndroid:gravity="bottom"pozwól dziecku wyświetlić na dole Układu.

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

4. Użyj RelativeLayoutw układzie głównym

I ustaw, android:layout_alignParentBottom="true"aby układ u dołu ekranu

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

Wynik

Kontynuując eleganckie rozwiązanie Timores , stwierdziłem, że następujące tworzy pionowe wypełnienie w pionowym LinearLayout i poziome wypełnienie w poziomym LinearLayout:

<Space
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_weight="1" />

Nie musisz nawet zagnieżdżać drugiego relativeukładu w pierwszym. Po prostu użyj android:layout_alignParentBottom="true"w Button i EditText .

Jeśli nie chcesz wprowadzać wielu zmian, możesz po prostu umieścić:

android:layout_weight="1"

dla TextView o identyfikatorze jako @+id/TextViewnp

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

Tworząc zarówno nagłówek, jak i stopkę , oto przykład:

Układ 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>

Zrzut ekranu

Użyj poniższego kodu. Dopasuj przycisk do przycisku. To działa.

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

W takim przypadku zawsze używaj RelativeLayouts. LinearLayout nie jest przeznaczony do takiego użycia.

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

Użyj android:layout_alignParentBottom="true" w swoim <RelativeLayout>.

To na pewno pomoże.

W przypadku takiej hierarchii:

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

Najpierw złóż android:fillViewport="true"wniosek, ScrollViewa następnie złóż android:layout_alignParentBottom="true"wniosek LinearLayout.

To działało dla mnie idealnie.

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

Można po prostu dać pogląd top dziecka (na TextView @ + id / TextView ) atrybut: android:layout_weight="1".

To zmusi wszystkie pozostałe elementy pod nim do dołu.

Można to zrobić również w układzie liniowym.

Podaj wysokość = 0dp i wagę = 1 do powyższego układu i tego, który chcesz na dole. Wystarczy napisać wysokość = zawartość opakowania i bez wagi.

Zapewnia zawartość zawijania dla układu (ten, który zawiera tekst edycji i przycisk), a następnie ten, który ma wagę, zajmuje resztę układu.

Odkryłem to przez przypadek.

Użyłem rozwiązania opublikowanego przez Janusza, ale do ostatniego widoku dodałem dopełnienie, ponieważ górną częścią mojego układu był ScrollView.

ScrollView zostanie częściowo ukryty, gdy rośnie wraz z zawartością. Użycie android:paddingBottomostatniego widoku pomaga wyświetlić całą zawartość w ScrollView.