Jak zrobić układ za pomocą widoku, wypełnij pozostałą przestrzeń?

188

Tworzę interfejs użytkownika aplikacji. Potrzebuję układu wygląda następująco:

Przykład pożądanego układu

(<i> to przyciski). Problem polega na tym, że nie wiem, jak upewnić się, że TextView zapełni pozostałe miejsce, a dwa przyciski mają stały rozmiar.

Jeśli użyję funkcji fill_parent dla widoku tekstu, drugi przycisk (>) nie będzie widoczny.

Jak mogę stworzyć układ, który wygląda jak obraz?

Luke Vo
źródło
czego używasz jako układu root?
woodshy
1
@woodshy Any Layout jest OK, to nie ma znaczenia.
Luke Vo

Odpowiedzi:

213

Odpowiedź od woodshy działała dla mnie i jest prostsza niż odpowiedź Ungureanu Liviu, ponieważ nie używa RelativeLayout. Dla jasności podaję mój układ:

<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>
Vivek Pandey
źródło
Są rzeczy takie jak alignLefti alignParentLeftitp., Których nigdy nie można osiągnąć LinearLayout.
IcyFlame
Nie do końca rozumiem, jak to możliwe, ale naprawdę fajną sztuczką jest unikanie RelativeLayout
a.dibacco
2
Jak to może być zaakceptowana odpowiedź? Nie ma widoku obrazu, to tylko część rozwiązania. Przynajmniej jest to lepsze niż stara najlepsza głosowana odpowiedź z układem względnym (wyjaśniłem dlaczego w mojej odpowiedzi)
Livio,
genialne rozwiązanie
Mohammad Elsayed
92

W przypadku umieszczenia <WIDOK TEKSTU> w LinearLayout, ustaw właściwość Layout_weight <i> na 0 i 1 dla TextView.
W przypadku RelativeLayout wyrównaj <i> do lewej i prawej i ustaw właściwość „Układ po lewej stronie” i „Układ po prawej” właściwości TextView na identyfikatory <i>

drzewny
źródło
Czy ktoś nadal potrzebuje próbki?
woodshy
Jak dodać obrazy w tym układzie, aby wypełnić cały widok
Tushar Pandey
jak dodasz obraz do względnego układu, aby wypełnić cały widok
Tushar Pandey
4
@woodshy tak próbka byłaby nadal pomocna
Frank Schwieterman
Spójrz na przykład
MyDogTom
71

Jeśli używasz RelativeLayout, możesz zrobić coś takiego:

<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>
Ungureanu Liviu
źródło
Dzięki, działa :) Ale nie rozumiem. Dlaczego TextView nie wypełnia całej przestrzeni, a nie >przycisku?
Luke Vo
2
Dlaczego dwa zagnieżdżone układy względne? Korzeń powinien być wystarczający. Następnie wszystko, co musisz zrobić, to upewnić się, że wszystkie dzieci z dolnego układu względnego są wszystkie alignParentBottom = "true"
Noel
@Noel Masz rację. Wybieram 2 układ, ponieważ tak właśnie się używa: w moich aplikacjach może się zdarzyć, że muszę zmienić widoczność kilku widoków i łatwiej jest umieścić wszystkie z nich w układzie i zmienić widoczność tylko dla tego układu . Mój przykład nie jest idealny, ale działa i może być przydatny dla kogoś.
Ungureanu Liviu
1
@WN To dla mnie dziwne :) Myślę, że widok tekstu nie zajmuje całej przestrzeni, ponieważ prawy przycisk ma stałą szerokość. Jeśli zmienisz Androida: layout_width = "80dp" na android: layout_width = "wrap_content" dla prawego przycisku, to może działać.
Ungureanu Liviu
2
Ta odpowiedź jest naprawdę zła! Należy unikać zagnieżdżania 2 względnego układu, ponieważ względny układ zawsze wykonuje 2 przejścia do rysowania (wobec 1 dla dowolnego innego typu układu). Staje się wykładniczy po ich zagnieżdżeniu. Powinieneś użyć układu liniowego o szerokości = 0 i wadze = 1 na elemencie, który chcesz wypełnić pozostałą przestrzenią. Pamiętaj: stosuj układ względny TYLKO wtedy, gdy nie masz innego wyboru. stackoverflow.com/questions/4069037/…
Livio
30

Za pomocą a ConstraintLayoutznalazłem coś takiego

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

Pracuje. Kluczem jest odpowiednie ustawienie ograniczeń dla prawej, lewej, górnej i dolnej krawędzi, a następnie ustawienie szerokości i wysokości 0dpi określenie, jaki ma rozmiar.

Tom Howard
źródło
4
Właśnie zaczynam używać ConstraintLayout, dobrze jest wiedzieć, że szerokość i wysokość mogą być określone przez ograniczenia przy ustawianiu ich na „0”, dzięki za to :)
MQoder
Ważne, aby uważać na kierunek strzałki każdego z ograniczeń. Upewnij się, że TextViewma to lewe i prawe ograniczenie. TextViewNie rozciąga się, jeśli pierwszy Buttonma prawo do ograniczenia TextView, a ostatni Buttonma ograniczenie do lewej TextView.
Manuel
dużo lepiej! poprawia wydajność poprzez brak układów zagnieżdżonych. Dziękujemy za przypomnienie nam sztuczki
0dp
7

To proste Ustawiasz minWidth lub minHeight, w zależności od tego, czego szukasz, poziomo lub pionowo. A dla drugiego obiektu (tego, który chcesz wypełnić pozostałą przestrzeń) ustawiasz wagę 1 (ustaw szerokość, aby zawinąć jego zawartość), więc wypełni resztę obszaru.

<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>
Daniel
źródło
4

możesz użyć atrybutu high layout_weight. Poniżej możesz zobaczyć układ, w którym ListView zajmuje całe wolne miejsce z przyciskami u dołu:

<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>
myśliciel
źródło
3

Dla tych, którzy mają tę samą usterkę, <LinearLayout...>co ja:

Ważne jest, aby określić android:layout_width="fill_parent", że nie będzie działać wrap_content.

OTOH, możesz pominąć android:layout_weight = "0", nie jest to wymagane.

Mój kod jest w zasadzie taki sam jak kod w https://stackoverflow.com/a/25781167/755804 (autor: Vivek Pandey)

18446744073709551615
źródło
3

Należy unikać zagnieżdżania 2 względnego układu, ponieważ względny układ zawsze wykonuje 2 przejścia do rysowania (wobec 1 dla dowolnego innego typu układu). Staje się wykładniczy po ich zagnieżdżeniu. Powinieneś użyć układu liniowego o szerokości = 0 i wadze = 1 na elemencie, który chcesz wypełnić pozostałą przestrzenią. Ta odpowiedź jest lepsza dla wydajności i praktyk. Pamiętaj: stosuj układ względny TYLKO wtedy, gdy nie masz innego wyboru.

<?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>
Livio
źródło
0

Można użyć Ustaw layout_widthlub layout_widthdo 0dp(Przy orientacji chcesz wypełnić pozostałą przestrzeń). Następnie użyj, layout_weightaby wypełnić pozostałe miejsce.

taynguyen
źródło
0

użyj Relativelayout, aby zawinąć 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>`
John Liao
źródło
0

znalazłem

 <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" />
Zeus B0t
źródło
0

Korzystając z układu względnego, możesz rozciągnąć widok, zakotwiczając go w obu widokach, do których ma on się rozciągać. Chociaż określona wysokość zostanie zignorowana, Android nadal wymaga atrybutu wysokości, dlatego napisałem „0dp”. Przykład:

<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"/>
FK Juliano
źródło