【问题标题】:How do I align views at the bottom of the screen?如何对齐屏幕底部的视图?
【发布时间】:2011-01-24 02:50:24
【问题描述】:

这是我的布局代码;

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

左边是这个样子,右边是我想要的样子。

显而易见的答案是将 TextView 的高度设置为 fill_parent,但这会导致按钮或输入字段没有空间。

本质上问题是我希望提交按钮和文本条目在底部具有固定高度,而文本视图可以填充其余空间。同样,在水平线性布局中,我希望提交按钮包裹其内容并让文本条目填充其余空间。

如果线性布局中的第一个项目被告知填充父项,它会这样做,不会为其他项目留下空间。除了布局中其余项目所需的最小值之外,我如何获得线性布局中的第一个项目来填充所有空间?


相对布局确实是答案:

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

【问题讨论】:

  • @oneself Paint ;) 我在模拟器上使用了一个皮肤,但由 Tea Vui Huang teavuihuang.com/android 提供
  • +1 用于发布解决它的布局 XML。帮助我弄清楚我的问题。

标签: android xml user-interface android-layout


【解决方案1】:

执行此操作的现代方法是使用 ConstraintLayout 并使用 app:layout_constraintBottom_toBottomOf="parent"

将视图的底部限制在 ConstraintLayout 的底部

下面的示例创建了一个 FloatingActionButton,它将与屏幕的末端和底部对齐。

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

作为参考,我会保留我的旧答案。

在引入 ConstraintLayout 之前,答案是relative layout


如果您有一个填满整个屏幕的相对布局,您应该可以使用android:layout_alignParentBottom 将按钮移动到屏幕底部。

如果您在底部的视图没有显示在相对布局中,那么它上面的布局可能会占用所有空间。在这种情况下,您可以将应该位于底部的视图放在布局文件的第一个位置,然后使用android:layout_above 将布局的其余部分放在视图上方。这使得底部视图可以根据需要占用尽可能多的空间,并且布局的其余部分可以填满屏幕的所有其余部分。

【讨论】:

  • 仅供参考:这在 ScrollView 中不起作用。这是我现在面临的问题。见stackoverflow.com/questions/3126347/…
  • 这是正确的 ScrollViews 和相对布局不能很好地混合。如果你有很多内容要在一个页面上显示所有内容,只需使用线性布局并最后放入底部视图。如果您希望视图最后出现在小屏幕上的滚动视图中以及较大手机上的页面底部,请考虑使用不同的布局文件并使用资源限定符让设备选择正确的布局文件。
  • 好的..这里的答案第二段有什么意义? “你应该先找到一个覆盖屏幕底部的布局”?那么我们应该在布局内使用 layout_alignParentBottom 吗?我们需要android:layout_above 做什么?
  • 我在“Android 周刊”that RelativeLayout 中读过一篇文章会消耗内存,应尽可能避免使用。
【解决方案2】:

ScrollView 中这不起作用,因为RelativeLayout 会与页面底部ScrollView 中的任何内容重叠。

我使用动态拉伸 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>

【讨论】:

  • 这很棒 - 而且,它是“微创”,并且比 RelativeLayout 方法更直观。如果可以的话,我会投不止一个赞成票!
  • 我在我的应用程序中使用了您的解决方案,但在我的情况下,我希望当键盘出现时,按钮保持在屏幕底部(键盘后面)有解决办法吗?谢谢。
  • @DoubleYo: 在清单中 android:windowSoftInputMode="adjustPan"
  • 如果你想永久固定底部,这样它就一直显示,这是行不通的。否则它会起作用。
【解决方案3】:

您可以通过将相对布局嵌套在线性布局中来保持初始线性布局:

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

【讨论】:

  • 这是一种混乱的方法,因为它不是非常模块化的。你不应该有重叠的布局。当您想要更改 RelativeLayout 的背景或想要使任何视图更大或添加视图时,此设计将不起作用。
【解决方案4】:

上面的答案(由 Janusz 提供)非常正确,但我个人对 RelativeLayouts 感觉不是 100% 满意,所以我更喜欢引入一个“填充”,即空的 TextView,如下所示:

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

应该在屏幕底部的元素之前。

【讨论】:

  • 这会扩展到 x 轴还是 y 轴。给高度 0dip 会使 textview 没有任何高度?还是会尽可能多地扩展到 x 轴?
  • 这会垂直扩展,因为高度(垂直轴)设置为 0,权重设置为 1(假设其他元素的权重为零)。
  • 在x轴上,它将作为其父级(fill_parent)
  • 我会使用另一种线性布局,而不是文本视图。布局视图似乎暗示它可以用来填充空间?
【解决方案5】:

您也可以使用 LinearLayout 或 ScrollView 来做到这一点。有时它比RelativeLayout 更容易实现。您唯一需要做的就是在您想要对齐到屏幕底部的视图之前添加以下视图:

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

这会创建一个空视图,填充空白空间并将下一个视图推到屏幕底部。

【讨论】:

  • 这个概念类似于@Timores前面所说的填充物。
  • 这就是我从几个小时以来一直在寻找的东西。谢谢!
【解决方案6】:

这也有效。

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

【讨论】:

  • android:layout_alignParentBottom="true" 没有效果,除非 LinearLayout 嵌套在 RelativeLayout 中。
  • 一个解释应该是有序的(例如,基本的变化,它是如何工作的,它为什么工作,等等)。
【解决方案7】:

1。在你的根布局中使用ConstraintLayout

并设置app:layout_constraintBottom_toBottomOf="parent" 让布局在屏幕底部:

<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。在你的根布局中使用FrameLayout

只需在布局中设置android:layout_gravity="bottom"

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

3。在你的根布局中使用LinearLayout (android:orientation="vertical")

(1) 在你的布局顶部设置一个布局android:layout_weight="1"

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

(2)设置子LinearLayoutandroid:layout_width="match_parent" android:layout_height="match_parent" android:gravity="bottom"

主要属性是ndroid:gravity="bottom",让子View在Layout的底部。

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

4。在根布局中使用RelativeLayout

并设置android:layout_alignParentBottom="true"让布局在屏幕底部

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

输出

【讨论】:

    【解决方案8】:

    跟进Timores's elegant solution,我发现以下内容会在垂直 LinearLayout 中创建垂直填充,在水平 LinearLayout 中创建水平填充:

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

    【讨论】:

    • @sepehr 在您发现我的解决方案不起作用的情况下,一定还有另一个因素在起作用。我刚刚在片段布局中尝试了我的解决方案,它也可以在那里工作。
    • 线性布局支持权重,@sepehr 它们也可以在片段、活动、通知、对话框中使用;)
    【解决方案9】:

    您甚至不需要将第二个 relative 布局嵌套在第一个布局中。只需在 ButtonEditText 中使用android:layout_alignParentBottom="true"

    【讨论】:

    • 请注意,尽管这适用于 Button 和 EditText,但如果您尝试以这种方式对齐 TableLayout,它将无法正常工作。您必须将其嵌套在另一个 RelativeLayout 中。
    【解决方案10】:

    如果你不想做很多改变,那么你可以写:

    android:layout_weight="1"
    

    对于 ID 为 @+id/TextView 的 TextView 即

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

    【讨论】:

    • 或者使用 android:layout_weight="1" 添加一个环绕的 LinearLayout - 这在 ScrollView 中也很有效!
    【解决方案11】:

    同时创建headerfooter,下面是一个例子:

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

    截图

    【讨论】:

      【解决方案12】:

      对于这种情况,请始终使用RelativeLayouts。 LinearLayout 不适用于此类用途。

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

      【讨论】:

        【解决方案13】:

        使用下面的代码。将按钮与按钮对齐。它正在工作。

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

        【讨论】:

          【解决方案14】:

          在您的&lt;RelativeLayout&gt; 中使用android:layout_alignParentBottom="true"

          这肯定会有帮助。

          【讨论】:

          • 假设用户想要使用RelativeLayout。
          【解决方案15】:

          如果你有这样的层次结构:

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

          首先,将android:fillViewport="true" 应用于ScrollView,然后将android:layout_alignParentBottom="true" 应用于LinearLayout

          这对我来说非常有效。

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

          【讨论】:

            【解决方案16】:

            你可以给你的顶级子视图(TextView @+id/TextView)一个属性: android:layout_weight="1".

            这将强制它下面的所有其他元素到底部。

            【讨论】:

              【解决方案17】:

              这也可以通过线性布局来完成。

              只需为上面的布局提供 Height = 0dp 和 weight = 1 并在底部提供您想要的布局。只写高度 = 包装内容,没有重量。

              它为布局提供换行内容(包含编辑文本和按钮的内容),然后具有权重的内容占据布局的其余部分。

              我偶然发现了这个。

              【讨论】:

                【解决方案18】:

                我使用了 Janusz 发布的解决方案,但我在最后一个 View 中添加了填充,因为我的布局的顶部是一个 ScrollView。

                随着内容的增长,ScrollView 将部分隐藏。在最后一个 View 上使用 android:paddingBottom 有助于显示 ScrollView 中的所有内容。

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2021-06-30
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2019-05-02
                  相关资源
                  最近更新 更多