如何使用View使布局填充剩余空间？

188

我正在设计我的应用程序UI。我需要这样的布局：

所需布局的示例

（<和>是按钮）。问题是，我不知道如何确保TextView会用两个具有固定大小的按钮填充剩余空间。

如果我在文本视图中使用fill_parent，则无法显示第二个按钮（>）。

如何制作看起来像图像的布局？

android layout android-layout

— 路加
source

您使用什么作为根布局？

— woodshy 2011年

1

@woodshy任何布局都可以，没关系。

— Luke Vo

211

woodshy的答案对我有用，它比Ungureanu Liviu的答案更简单，因为它没有使用RelativeLayout。为了清楚起见，我在给出布局：

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

有诸如alignLeft和alignParentLeft等之类的东西，用不可能实现LinearLayout。

— IcyFlame

我不完全了解这是如何实现的，但是避免RelativeLayout确实是一个很酷的技巧

— a.dibacco

2

这怎么可能是公认的答案？没有图像视图，这只是解决方案的一部分。至少它比“相对布局”（Relative Layout）上的老旧投票方式更好（我在回答中解释了原因）

— Livio

天才解决方案

— Mohammad Elsayed

92

如果将<TEXT VIEW>放置在LinearLayout中，则将TextView的Layout_weight属性<和>设置为0和1。
如果是RelativeLayout，请将<和>左右对齐，并将TextView的“布局向左”和“布局向右”属性设置为<和>的ID

— 害羞的
source

还有人需要样品吗？

— woodshy 2011年

如何在此布局中添加图像以填充整个视图

— Tushar Pandey 2014年

如何在相对布局内添加图像以填充整个视图

— Tushar Pandey 2014年

4

@woodshy是的，样本仍然会有所帮助

— Frank Schwieterman 2014年

以Vivek Pandey的答案为例

— MyDogTom'2

71

如果使用RelativeLayout，则可以执行以下操作：

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

谢谢，它有效:)但是我不明白。为什么TextView不能填充所有空间，而不是>按钮？

— Luke Vo

2

为什么有两个嵌套的相对布局？根源应该足够。然后，您要做的就是确保底部相对布局的子级全部为alignParentBottom =“ true”

— Noel

@Noel你是对的。我选择2种布局，因为这是我的使用方式：在我的应用程序中，可能需要更改一些视图的可见性，并且将所有视图放置在一个布局中并更改此布局的可见性会更容易。我的示例并不完美，但可以正常工作，可能对某人有用。

— Ungureanu Liviu

1

@WN这对我也很讨厌:)我认为textview不会使用所有空格，因为右键具有固定的宽度。如果您将android：layout_width =“ 80dp”更改为android：layout_width =“ wrap_content”，则右键单击将起作用。

— Ungureanu Liviu

2

这个答案真的不好！您应该避免嵌套2个相对布局，因为相对布局总是使图形通过2次（对于任何其他类型的布局，则为1次）。当您嵌套它们时，它将变成指数。您应在要填充剩余空间的元素上使用width = 0和weight = 1的线性布局。请记住：仅在没有其他选择时才使用相对布局。stackoverflow.com/questions/4069037/…–

— Livio

30

使用ConstraintLayout，我发现了类似

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

作品。关键是适当设置右，左，上和下边缘约束，然后将width和height设置为0dp并让其计算出自己的大小。

— 汤姆·霍华德
source

4

刚开始使用ConstraintLayout时，很

— 高兴

重要的是要注意每个约束的箭头方向。确保TextView具有左右约束。在TextView不拉伸，如果第一Button有权约束到TextView最后Button有左约束的TextView。

— 曼努埃尔

好多了！通过不使用嵌套布局来提高性能。感谢您提醒我们0dp技巧

— OzzyTheGiant

7

很简单您可以根据水平或垂直的水平设置minWidth或minHeight。对于另一个对象（您要填充剩余空间的那个对象），将其权重设置为1（设置宽度以包装其内容），这样它将填充其余区域。

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

— 丹尼尔
source

4

您可以使用高layout_weight属性。在下面，您可以看到一个布局，其中ListView占用所有可用空间，底部带有按钮：

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

— 思想家
source

3

对于那些<LinearLayout...>像我一样出现故障的人：

重要的是要指定android:layout_width="fill_parent"，它将不能使用wrap_content。

OTOH，您可以省略android:layout_weight = "0"，这不是必需的。

我的代码与https://stackoverflow.com/a/25781167/755804中的代码基本相同（由Vivek Pandey撰写）

— 18446744073709551615
source

3

您应该避免嵌套2个相对布局，因为相对布局总是使图形通过2次（对于任何其他类型的布局，则相对于1次）。当您嵌套它们时，它将变成指数。您应该在要填充剩余空间的元素上使用width = 0和weight = 1的线性布局。这个答案对于性能和实践来说更好。请记住：仅在没有其他选择时才使用相对布局。

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

— 利维奥
source

0

您可以将layout_width或设置layout_width为0dp（根据要填充剩余空间的方向）。然后使用layout_weight填充剩余空间。

— Taynguyen
source

0

使用Relativelayout包装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
source

0

我发现

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

— 宙斯B0t
source

0

当使用相对布局时，可以通过将视图锚定在应该向其拉伸的两个视图上来使其拉伸。尽管将忽略指定的高度，但Android仍然需要height属性，这就是我编写“ 0dp”的原因。例：

<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朱利安诺
source