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

Posted 2023-03-17

【中文标题】如何使用 View 使布局填充剩余空间？

【英文标题】：How to make layout with View fill the remaining space?

【发布时间】：2011-09-13 01:52:42

【问题描述】：

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

（ 是按钮）。问题是，我不知道如何确保 TextView 将填充剩余空间，两个按钮的大小是固定的。

如果我对文本视图使用 fill_parent，则无法显示第二个按钮 (>)。

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

【问题讨论】：

你使用什么作为根布局？

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

【参考方案1】：

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

<LinearLayout 
      android:layout_
      android:layout_
      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>

【讨论】：

有alignLeft和alignParentLeft之类的东西，LinearLayout是永远做不到的。

我不完全理解这是怎么可能的，但是避免RelativeLayout真的很酷

这怎么可能是公认的答案？没有图像视图，它只是解决方案的一部分。至少它比使用相对布局的旧的最高投票答案要好（我在回答中解释了原因）

【参考方案2】：

如果将<TextView> 放在LinearLayout 中，请将< 和> 的Layout_weight 属性设置为0 和TextView 的1。

如果您使用的是RelativeLayout，请将< 和> 左右对齐，并将TextView 的“布局到左侧”和“布局到右侧”属性设置为ID < 和 >。

【讨论】：

还有人需要样品吗？

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

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

让这个难以理解的是“”，它引用了原始的后期术语。这意味着分别带有标签“”的按钮。

@woodshy 的例子会让它变得更好，不是吗？

【参考方案3】：

如果你使用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_
        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>

【讨论】：

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

为什么有两个嵌套的相对布局？根应该足够了。然后，你需要做的就是确保底部相对布局的孩子都是 alignParentBottom="true"

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

@W.N 这对我来说也很奇怪 :) 我认为 textview 不会使用所有空间，因为右键具有固定宽度。如果您将 android:layout_width = "80dp" 更改为 android:layout_width = "wrap_content" 的右键，它会起作用。

这个答案真的很糟糕！您应该避免嵌套 2 个相对布局，因为相对布局总是使 2 遍用于绘图（而 1 用于任何其他类型的布局）。当你嵌套它们时，它会变成指数。您应该在要填充剩余空间的元素上使用 width=0 和 weight=1 的线性布局。请记住：仅当您别无选择时才使用相对布局。 ***.com/questions/4069037/…

【参考方案4】：

使用ConstraintLayout，我发现了类似的东西

<Button
    android:id="@+id/left_button"
    android:layout_
    android:layout_
    android:text="&lt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintLeft_toLeftOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

<TextView
    android:layout_
    android:layout_
    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_
    android:layout_
    android:text="&gt;"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintRight_toRightOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

有效。关键是适当地设置右、左、上和下边缘约束，然后将宽度和高度设置为0dp 并让它自己确定大小。

【讨论】：

刚开始使用ConstraintLayout，很高兴知道将它们设置为“0”时可以通过约束来确定宽度和高度，感谢:)

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

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

【参考方案5】：

这很简单 您设置 minWidth 或 minHeight，取决于您要查找的内容，水平或垂直。 而对于另一个对象（您要填充剩余空间的对象），您将权重设置为 1（设置宽度以包裹其内容），因此它将填充其余区域。

<LinearLayout
        android:layout_
        android:layout_
        android:layout_weight="1"
        android:gravity="center|left"
        android:orientation="vertical" >
</LinearLayout>
<LinearLayout
        android:layout_
        android:layout_
        android:minWidth="80dp" >
</LinearLayout>

【参考方案6】：

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

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_
    android:layout_
    tools:context=".ConfigurationActivity"
    android:orientation="vertical"
    >

        <ListView
            android:id="@+id/listView"
            android:layout_
            android:layout_
            android:layout_weight="1000"
            />


        <Button
            android:id="@+id/btnCreateNewRule"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:text="Create New Rule" />



        <Button
            android:id="@+id/btnConfigureOk"
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:text="Ok" />


</LinearLayout>

【参考方案7】：

您应该避免嵌套 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_
          android:layout_
          android:orientation="vertical">

    <ImageView
        android:id="@+id/imageview"
        android:layout_
        android:layout_ />

    <LinearLayout
        android:layout_
        android:layout_
        android:orientation="horizontal">

        <Button
            android:id="@+id/prev_button"
            android:layout_
            android:layout_
            android:text="&lt;" />

        <TextView
            android:layout_
            android:layout_
            android:layout_weight="1"
            android:ellipsize="end"
            android:singleLine="true"
            android:gravity="center"
            android:text="TextView" />

        <Button
            android:id="@+id/next_button"
            android:layout_
            android:layout_
            android:text="&gt;" />
    </LinearLayout>
</LinearLayout>

【参考方案8】：

对于那些与<LinearLayout...> 有相同故障的人：

指定android:layout_width="fill_parent" 很重要，它不适用于wrap_content。

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

我的代码与https://***.com/a/25781167/755804（by Vivek Pandey）中的代码基本相同

【参考方案9】：

使用相对布局时，您可以通过将视图锚定到它应该向其拉伸的两个视图来进行拉伸。虽然指定的高度会被忽略，但Android仍然需要一个高度属性，这就是我写“0dp”的原因。示例：

<View
    android:id="@+id/topView"
    android:layout_
    android:layout_
    android:layout_alignParentTop="true"
    android:layout_marginTop="8dp"/>

<View
    android:id="@+id/stretchableView"
    android:layout_
    android:layout_
    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_
    android:layout_
    android:layout_alignParentBottom="true"
    android:layout_marginBottom="16dp"/>

【参考方案10】：

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

【参考方案11】：

使用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_
android:layout_>
<LinearLayout
android:layout_
android:layout_
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>`

【参考方案12】：

我找到了

 <TextView
        android:layout_
        android:layout_
        android:layout_marginEnd="10dp"
        android:fontFamily="casual"
        android:text="(By Zeus B0t)"
     ``   android:textSize="10sp"
        android:gravity="bottom"
        android:textStyle="italic" />