Wie kann das Layout mit Ansicht den verbleibenden Platz ausfüllen?


188

Ich entwerfe meine Anwendungsoberfläche. Ich brauche ein Layout, das so aussieht:

Beispiel für das gewünschte Layout

(<und> sind Schaltflächen). Das Problem ist, ich weiß nicht, wie ich sicherstellen soll, dass die Textansicht den verbleibenden Platz ausfüllt, wobei zwei Schaltflächen eine feste Größe haben.

Wenn ich fill_parent für die Textansicht verwende, kann die zweite Schaltfläche (>) nicht angezeigt werden.

Wie kann ich ein Layout erstellen, das dem Bild entspricht?


Was verwenden Sie als Root-Layout?
Woodshy

1
@woodshy Jedes Layout ist in Ordnung, es spielt keine Rolle.
Luke Vo

Antworten:


211

Die Antwort von woodshy hat bei mir funktioniert und ist einfacher als die Antwort von Ungureanu Liviu, da sie nicht verwendet wird RelativeLayout. Ich gebe mein Layout zur Klarheit:

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

Es gibt Dinge wie alignLeftund alignParentLeftusw., mit denen man niemals etwas erreichen kann LinearLayout.
IcyFlame

Ich verstehe nicht ganz, wie das möglich ist, aber es ist wirklich ein cooler Trick, RelativeLayout zu vermeiden
a.dibacco

2
Wie kann dies die akzeptierte Antwort sein? Es gibt keine Bildansicht, es ist nur ein Teil der Lösung. Zumindest ist es besser als die alte Top-Antwort mit Relativem Layout (ich habe in meiner Antwort erklärt, warum)
Livio

geniale Lösung
Mohammad Elsayed

92

Wenn <TEXT VIEW> in LinearLayout platziert ist, setzen Sie die Eigenschaft Layout_weight von <und> für TextView auf 0 und 1.
Im Falle von RelativeLayout richten Sie <und> nach links und rechts aus und setzen Sie die Eigenschaften "Layout links von" und "Layout rechts von" von TextView auf die IDs von <und>


Braucht noch jemand Probe?
Woodshy

Wie man Bilder in diesem Layout hinzufügt, um die gesamte Ansicht zu füllen
Tushar Pandey

wie Sie Bild innerhalb des relativen Layouts hinzufügen, um die gesamte Ansicht zu füllen
Tushar Pandey

4
@woodshy ja eine Probe wäre noch hilfreich
Frank Schwieterman

Schauen Sie sich Vivek Pandeys Antwort für ein Beispiel an
MyDogTom

71

Wenn Sie verwenden RelativeLayout, können Sie es so etwas tun:

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

Danke, es funktioniert :) Aber ich verstehe nicht. Warum füllt die Textansicht nicht den gesamten Bereich aus, nicht die >Schaltfläche?
Luke Vo

2
Warum haben zwei verschachtelte relative Layouts? Die Wurzel sollte ausreichen. Dann müssen Sie nur noch sicherstellen, dass die untergeordneten Elemente des unteren relativen Layouts alle alignParentBottom = "true" sind
Noel

@ Noel Du hast recht. Ich wähle 2 Layouts, weil ich so verwendet werde: In meinen Anwendungen kann es vorkommen, dass ich die Sichtbarkeit einiger Ansichten ändern muss und es einfacher ist, alle in ein Layout einzufügen und die Sichtbarkeit nur für dieses Layout zu ändern . Mein Beispiel ist nicht perfekt, aber es funktioniert und es könnte für jemanden nützlich sein.
Ungureanu Liviu

1
@WN Das ist auch für mich seltsam :) Ich denke, die Textansicht belegt nicht den gesamten Platz, da die rechte Schaltfläche eine feste Breite hat. Wenn Sie android: layout_width = "80dp" in android: layout_width = "wrap_content" für die rechte Schaltfläche ändern, funktioniert dies.
Ungureanu Liviu

2
Diese Antwort ist wirklich schlecht! Sie sollten vermeiden, 2 relative Layouts zu verschachteln, da das relative Layout beim Zeichnen immer 2 Durchgänge durchführt (gegenüber 1 für jeden anderen Layouttyp). Es wird exponentiell, wenn Sie sie verschachteln. Sie sollten ein lineares Layout mit Breite = 0 und Gewicht = 1 für das Element verwenden, das den verbleibenden Platz ausfüllen soll. Denken Sie daran: Verwenden Sie das relative Layout NUR, wenn Sie keine andere Wahl haben. stackoverflow.com/questions/4069037/…
Livio

30

Mit a ConstraintLayouthabe ich so etwas gefunden

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

funktioniert. Der Schlüssel besteht darin, die Einschränkungen für die rechte, linke, obere und untere Kante entsprechend festzulegen, dann die Breite und Höhe auf 0dpeinzustellen und die eigene Größe herauszufinden.


4
Wenn Sie gerade mit der Verwendung von ConstraintLayout beginnen, ist es gut zu wissen, dass die Breite und Höhe durch Einschränkungen bestimmt werden können, wenn Sie sie auf "0" setzen.
Vielen Dank dafür

Wichtig vorsichtig über die zu Richtung des Pfeils jeder Einschränkungen. Stellen Sie sicher, dass TextViewdie linken und rechten Einschränkungen vorhanden sind. Das TextViewwird nicht gedehnt, wenn das erste Buttondie rechte Einschränkung für das TextViewund das letzte Buttondie linke Einschränkung für das hat TextView.
Manuel

viel besser! Verbessert die Leistung, indem keine verschachtelten Layouts vorhanden sind. Vielen Dank, dass Sie uns an den 0dp-Trick erinnert haben
OzzyTheGiant

7

Es ist ganz einfach. Sie stellen die minWidth oder minHeight ein, je nachdem, wonach Sie suchen, horizontal oder vertikal. Und für das andere Objekt (das, das Sie den verbleibenden Raum ausfüllen möchten) setzen Sie eine Gewichtung von 1 (stellen Sie die Breite ein, um den Inhalt zu umschließen), damit der Rest des Bereichs ausgefüllt wird.

<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

Sie können das Attribut high layout_weight verwenden. Unten sehen Sie ein Layout, in dem ListView den gesamten freien Speicherplatz mit Schaltflächen unten belegt:

<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

Für diejenigen, die den gleichen Fehler haben <LinearLayout...>wie ich:

Es ist wichtig anzugeben android:layout_width="fill_parent", dass es nicht funktioniert wrap_content.

OTOH, Sie können weglassen android:layout_weight = "0", es ist nicht erforderlich.

Mein Code ist im Grunde der gleiche wie der Code in https://stackoverflow.com/a/25781167/755804 (von Vivek Pandey).


3

Sie sollten vermeiden, 2 relative Layouts zu verschachteln, da das relative Layout beim Zeichnen immer 2 Durchgänge durchführt (gegenüber 1 für jeden anderen Layouttyp). Es wird exponentiell, wenn Sie sie verschachteln. Sie sollten ein lineares Layout mit Breite = 0 und Gewicht = 1 für das Element verwenden, das den verbleibenden Platz ausfüllen soll. Diese Antwort ist besser für die Leistung und die Praktiken. Denken Sie daran: Verwenden Sie das relative Layout NUR, wenn Sie keine andere Wahl haben.

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

Sie können das Setzen von layout_widthoder layout_widthauf 0dp(Durch die Ausrichtung möchten Sie den verbleibenden Raum füllen) verwenden. Verwenden Sie dann die layout_weight, um den verbleibenden Platz zu füllen.


0

Verwenden Sie ein Relativelayout, um das LinearLayout zu verpacken

<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

ich fand

 <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

Wenn Sie ein relatives Layout verwenden, können Sie eine Ansicht dehnen, indem Sie sie in beiden Ansichten verankern, in die sie sich erstrecken soll. Obwohl die angegebene Höhe nicht berücksichtigt wird, benötigt Android immer noch ein Höhenattribut, weshalb ich "0dp" geschrieben habe. Beispiel:

<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"/>
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.