带有顶栏、底栏和剩余空间内容视图的布局答案

【问题标题】：layout with top bar, bottom bar & remaining space content view带有顶栏、底栏和剩余空间内容视图的布局
【发布时间】：2014-05-19 19:39:58
【问题描述】：

我对 android 视图越来越着迷了。我想要一个布局，在我的应用程序的顶部 (A) 和底部 (C) 有一个栏，height="wrap_content"。中间 (B) 中的全部剩余空间应该是具有另一个布局或 TextView 或其他任何内容的内容区域。但我不能让它工作。我尝试了很多布局，但是当我对 B 执行 android:layout_height="match_parent" 时，C 消失了。有任何想法吗？提前感谢

【问题讨论】：

标签： android android-layout

【解决方案1】：

您可以使用 android:layout_weight 属性来实现，但您的父容器必须是 LinearLayout，在我的示例中，我只使用 LinearLayout 作为父视图的子视图，但您可以使用另一种视图：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
         android:id="@+id/container"
         android:layout_width="match_parent"
         android:layout_height="match_parent"
         android:layout_weight="1"
         android:orientation="vertical">

    <LinearLayout
         android:id="@+id/layout_a"
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
    </LinearLayout>

    <LinearLayout
         android:id="@+id/layout_b"
         android:layout_width="match_parent"
         android:layout_height="0dp"
         android:layout_weight="1">
    </LinearLayout>

    <LinearLayout
         android:id="@+id/layout_c"
         android:layout_width="match_parent"
         android:layout_height="wrap_content">
    </LinearLayout>

</LinearLayout>

如果你很好奇并想知道它是如何工作的......这里是explanation，祝你好运:)

【讨论】：

使用权重解决了这个问题。简单的答案，它的工作原理。感谢所有答案
工作正常，在主线性布局 android:layout_height="wrap_content" 更改为 android:layout_height="match_parent"

【解决方案2】：

将内容放入带有alignParentTop和alignParentBottom内容的RelativeLayout属性A和C以及below和above相关属性到内容B，如下：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent" >
    <!-- create content A and C before -->
    <LinearLayout
        android:id="@+id/A"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:orientation="vertical" > </LinearLayout>
    <LinearLayout
        android:id="@+id/C"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:orientation="vertical" > </LinearLayout>
    <!-- create content B regarding the previous ids -->
    <LinearLayout
        android:id="@+id/B"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@id/A"
        android:layout_above="@id/C"
        android:orientation="vertical" > </LinearLayout>
</RelativeLayout>

如果这不起作用，您可以尝试使用wrap_content 而不是match_parent 更改内容B 的高度。让我知道这是否有帮助。

【讨论】：

是的，这行得通，只是用相同的规范模拟了一个视图，结果很好。

【解决方案3】：

使用重量：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/A"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <!-- Your view here or replace FrameLayout -->
    </FrameLayout>

    <FrameLayout
        android:id="@+id/B"
        android:layout_width="match_parent"
        android:layout_height="0px"
        android:layout_weight="1">
        <!-- Your view here or replace FrameLayout -->
    </FrameLayout>

    <FrameLayout
        android:id="@+id/C"
        android:layout_width="match_parent"
        android:layout_height="50dp">
        <!-- Your view here or replace FrameLayout -->
    </FrameLayout>

</LinearLayout>

出于性能原因，将高度设置为 0 是好的，因为无论如何重量都会改变它。

【讨论】：

【解决方案4】：

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical" >

<TextView 
    android:id="@+id/top_bar"
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="0dp"/>
 <TextView 
    android:id="@+id/middle_area"
    android:layout_weight="14"
    android:layout_width="match_parent"
    android:layout_height="0dp"/>
  <TextView 
    android:id="@+id/bottom_bar"
    android:layout_weight="1"
    android:layout_width="match_parent"
    android:layout_height="0dp"/>

android_layout_weight 与 LinearLayout 结合可以为您解决问题。尝试上面的代码并根据需要调整 android_layout_weight 。在我的示例中，顶部栏将占据屏幕的 1/16，底部栏将占据屏幕的 1/16，而 middle_area 将占据屏幕的 14/16。您可以根据自己的需要更改数字。

【讨论】：