Android：布置一堆简单的盒子？

Question

这应该很容易，但对于我的生活，我无法理解。 我想制作一堆盒子，如下图所示：

+------------------+
| +------o-------+ |
| |  Banner      | |
| +------o-------+ |
| | Buttons      | |
| |              | |
| +------o-------+ |
| |              | |
| |              | |
| | ViewFlipper  | |
| |              | |
| |              | |
| |              | |
| |              | |
| +------o-------+ |
| | Buttons      | |
| +------o-------+ |
| | Footer       | |
| +------o-------+ |
+------------------+

每个框 - 包括外部框 - 表示包含其他窗口小部件（甚至是单独的窗口小部件）的布局。外框与设备的宽度和高度相匹配。堆栈的宽度和高度必须与外部容器匹配。盒子的边缘彼此粘合并粘合到容器的顶部和底部边缘，如'o'所示。所有内部布局都紧紧包裹其内容，除了最大的 - 一个ViewFlipper - 它包含一个可滚动的列表框，可以根据需要进行扩展或收缩。盒子的数量并不重要，只要它是四个或更多。

ViewFlipper包含许多垂直LinearLayouts，宽度/高度= fillparent（我的理解是父级是ViewFlipper）。

在我的尝试中，到目前为止，我已经成功使用了一个外部RelativeLayout并将内部框的边缘缝合在一起： android:layout_below="@+id/former_box和android:layout_above="@+id/following_box，但是每次我改变设计时，盒子开始表现得很奇怪（例如第二个完全覆盖其他的等等）是不稳定的情况（例如，通过，插入另一个中间框）。请注意，这是一个设计时布局，不涉及花哨的动态运行时重新排列。

我现在正在尝试使用TableLayout（单个列），基本上没有值得报道的快乐。我显然不是Android专家，但仍然。这样做的最佳方式是什么？

编辑 - 插入实际代码 由于省略实际代码似乎使问题模糊（我希望它会澄清它，我的错误）我在这里插入工作版本。您会注意到它没有横幅和页脚。如上所述，每当我尝试插入额外的盒子时，它都会在我身上爆炸 - 经常主演的循环参考。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:tools="http://schemas.android.com/tools"
        android:layout_margin="0dip"        
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" 
        tools:context=".TomActivity" >

  <RelativeLayout
      android:id="@+id/spinnerbox"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:gravity="center_horizontal"
      android:onClick="left"
      android:layout_alignParentTop="true"
      android:layout_alignParentLeft="true"
      android:layout_alignParentRight="true"
      android:orientation="horizontal" >

    <Button
        android:id="@+id/leftarrow"
    android:background="#888888"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:gravity="left"
        android:minHeight="0dip"
        android:minWidth="0dip"
        android:layout_alignParentLeft="true"       
        android:onClick="left"
        android:text="Button" />

    <TextView
    android:id="@+id/spintitle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toRightOf="@+id/leftarrow"
    android:layout_toLeftOf="@+id/rightarrow"
    android:layout_centerInParent="true"
    android:layout_toEndOf="@+id/leftarrow"
    android:layout_toStartOf="@+id/rightarrow"
    android:gravity="center"
    android:text="Label" />

    <Button
    android:id="@+id/rightarrow"
    android:background="#888888"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_alignParentRight="true"
    android:gravity="right"
    android:minHeight="0dip"
    android:minWidth="0dip"
    android:onClick="right"
    android:text="Button" 
    />

  </RelativeLayout>


  <ViewFlipper
      android:id="@+id/view_flipper"
      android:layout_margin="0dip"      
      android:layout_alignParentLeft="true"
      android:layout_alignParentRight="true"
      android:layout_below="@+id/spinnerbox"
      android:layout_above="@+id/buttonbox"
      android:layout_width="fill_parent"
      android:layout_height="fill_parent">

    <LinearLayout
    android:layout_margin="0dip"        
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center" >

      <ListView
      android:id="@+id/CoursesView"
      android:layout_margin="0dip"      
      android:background="#ffffff"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1" >
      </ListView>
    </LinearLayout>
    <LinearLayout
    android:layout_margin="0dip"        
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center" >

      <ListView
      android:id="@+id/FutureCoursesView"
      android:layout_margin="0dip"
      android:background="#ffffff"      
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1" >
      </ListView>
    </LinearLayout>
    <LinearLayout
    android:layout_margin="0dip"        
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:gravity="center" >

      <ListView
      android:id="@+id/MessagesView"
      android:layout_margin="0dip"
      android:background="#ffffff"  
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_weight="1" >
      </ListView>
    </LinearLayout>     
  </ViewFlipper>

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

    <Button
    android:id="@+id/CurrentCoursesButton"
    android:background="#888888"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button" />

    <Button
    android:id="@+id/FutureCoursesButton"
    android:background="#888888"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button" />

    <Button
    android:id="@+id/UnreadMessagesButton"
    android:background="#888888"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:text="Button" />

    <Button
    android:id="@+id/RefreshButton"
    android:background="#888888"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:onClick="refreshAll"
    android:text="Button" />

    <Button
    android:id="@+id/LogoffButton"
    android:background="#888888"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:onClick="logOff"
    android:text="Button" />


  </LinearLayout>


</RelativeLayout>

干杯，

编辑以更清晰地显示布局并提供有关基本原理的信息

Answer 1

在构建复杂/多级布局时，首先准备最内层布局。然后迭代地将您的外部布局包裹在最里面的布局周围。这样，决定使用哪个布局容器有点简化。

看看以下内容是否符合您的要求：

我已在此处发布了布局的xml：Link(pastebin) Link(file)

我所做的是使用您提供的布局并将其放置在垂直方向的LinearLayout中。顶部和底部“横幅”为layout_weight="0"，而内容区域（您提供的代码）的layout_weight设置为1。因此，顶部和底部横幅占用了固定的空间，内容占用了其余部分。

Answer 2

我认为LinearLayout最适合你...

如果您发现任何困难，请尝试告诉我

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="5dp">
    <LinearLayout
        android:id="@+id/spinnerbox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center_horizontal"
        android:onClick="left">

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1">
            <Button
                android:id="@+id/leftarrow"
                android:background="#888888"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="left"
                android:minHeight="0dip"
                android:minWidth="0dip"
                android:onClick="left"
                android:text="Button" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1">
            <TextView
                android:id="@+id/spintitle"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:text="Label" />
        </LinearLayout>

        <LinearLayout
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:gravity="center"
            android:layout_weight="1">
            <Button
                android:id="@+id/rightarrow"
                android:background="#888888"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:minHeight="0dip"
                android:minWidth="0dip"
                android:onClick="right"
                android:text="Button"
                />
        </LinearLayout>

    </LinearLayout>


    <ViewFlipper
        android:id="@+id/view_flipper"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:layout_marginTop="5dp">

        <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center" >

                <ListView
                    android:id="@+id/CoursesView"
                    android:background="#ffffff"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content">
                </ListView>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center" >

                <ListView
                    android:id="@+id/FutureCoursesView"
                    android:layout_margin="0dip"
                    android:background="#ffffff"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    >
                </ListView>
            </LinearLayout>
            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:gravity="center" >

                <ListView
                    android:id="@+id/MessagesView"
                    android:layout_margin="0dip"
                    android:background="#ffffff"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    >
                </ListView>
            </LinearLayout>
        </LinearLayout>
    </ViewFlipper>

    <LinearLayout
        android:id="@+id/buttonbox"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="5dp">

        <Button
            android:id="@+id/CurrentCoursesButton"
            android:background="#888888"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/FutureCoursesButton"
            android:background="#888888"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/UnreadMessagesButton"
            android:background="#888888"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="Button" />

        <Button
            android:id="@+id/RefreshButton"
            android:background="#888888"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="refreshAll"
            android:text="Button" />

        <Button
            android:id="@+id/LogoffButton"
            android:background="#888888"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:onClick="logOff"
            android:text="Button" />


    </LinearLayout>
</LinearLayout>

Answer 3

如果我理解正确，您的ViewFlipper会出现在可滚动容器的顶部。如果它位于ScrollView内，您可以使用android:fillViewport="true"指示其内容填充视口：

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true" >

    <ViewFlipper
            android:layout_width="match_parent"
            android:layout_height="wrap_content" />

</ScrollView>

如果ScrollView中有多个项目，请在LinearLayout内与android:layout_weight一起使用：

<ScrollView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:fillViewport="true" >

    <LinearLayout
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:orientation="vertical" >

        <Button
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />

        <ViewFlipper
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:layout_weight="1" />

    </LinearLayout>

</ScrollView>

Answer 4

首先，ViewFlipper的高度不应为"fill_parent"。在RelativeLayout中，这确实意味着“填充父母”。

如果我是你，我会像其他人提到的那样切换到LinearLayout。要执行此操作，只需将所有其他“块”组件的高度设置为"wrap_content"。对于ViewFlipper，您需要layout_height="0dp"和layout_weight="1"的组合。这将告诉它只是扩展所有剩余的空间，而不会重叠。

然后，由于您使用的是LinearLayout，因此请删除所有_align和above / below标记。他们没有为线性布局做任何事情，这使得阅读非常难以理解。

另一件事：在进行这样的半复杂布局时，将每个“块”分解为单独的XML文件通常很有帮助。然后，您可以在“主要”布局中包含每个部分，一切看起来都要好得多。它可以帮助您一次处理一个部分，而无需滚动浏览500行布局文件。

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    >
    <Banner
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    <Buttons
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    <ViewFlipper
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        >
        <!-- Any views you want here, they can't overflow the ViewFlipper -->
    </ViewFlipper>
    <Buttons
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
    <Footer
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        />
</LinearLayout>

Answer 5

由于 Geobits 建议将视图分成单独的XML文件。我已根据需要制作了完整的视图。请检查它。我使用了weightSum以便它可以填满整个屏幕。

<强> main_layout.xml

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

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="horizontal"
    android:layout_weight="1"
    android:gravity="center"
    android:background="#ababab"
    android:baselineAligned="false"
    >

    <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Header"
        android:textColor="#ffffff"
        android:gravity="center"
        />

</LinearLayout>

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="horizontal"
    android:layout_weight="1"
    android:gravity="center_vertical"
    android:background="#ababab"
    android:baselineAligned="false"
    >

     <include layout="@layout/button_row" />  

</LinearLayout>

<RelativeLayout 
   android:layout_width="fill_parent"
   android:layout_height="0dp"
   android:layout_weight="6"
    >

    <!-- Page Container -->
    <ViewFlipper
       android:id="@+id/vfPageContainer"
       android:layout_width="fill_parent"
       android:layout_height="fill_parent"
       >

        <include layout="@layout/view_one" />

        <!-- You can add more layouts here. -->

    </ViewFlipper>

</RelativeLayout>

<LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="horizontal"
    android:layout_weight="1"
    android:gravity="center_vertical"
    android:background="#ababab"
    android:baselineAligned="false"
    >

     <include layout="@layout/button_row" /> 

</LinearLayout>

 <LinearLayout 
    android:layout_width="fill_parent"
    android:layout_height="0dp"
    android:orientation="horizontal"
    android:layout_weight="1"
    android:gravity="center"
    android:background="#ababab"
    android:baselineAligned="false"
    >

     <TextView 
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Footer"
        android:textColor="#ffffff"
        android:gravity="center"
        />

</LinearLayout>

<强> button_row.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
 >

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

    <Button
        android:id="@+id/CurrentCoursesButton"
        android:background="#888888"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:id="@+id/FutureCoursesButton"
        android:background="#888888"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:id="@+id/UnreadMessagesButton"
        android:background="#888888"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="Button" />

    <Button
        android:id="@+id/RefreshButton"
        android:background="#888888"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="refreshAll"
        android:text="Button" />

    <Button
        android:id="@+id/LogoffButton"
        android:background="#888888"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:onClick="logOff"
        android:text="Button" />


 </LinearLayout>

</LinearLayout>

<强> view_one.xml

 <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
  android:layout_width="fill_parent"
  android:layout_height="wrap_content"
  android:orientation="vertical"
  >

 <LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >

  <ListView
      android:id="@+id/MessagesView"
      android:background="#ffffff"  
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      >
  </ListView>
</LinearLayout>     

</LinearLayout>

Answer 6

使用属性

堆叠视图

android:layout_centerInParent="true"

为RelativeLayout中的所有孩子， 并且您可以单独设置子视图的高度和宽度甚至边距

Answer 7

只需使用LinearLayout作为Outter。使用orientantion Vertical。 其中的每个孩子都应该是width =“match_parent”height =“wrap_content”

Outter里面的孩子是哪种观点无关紧要。

Answer 8

//try this
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context=".TomActivity" >

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        android:padding="5dp">
        <LinearLayout
            android:id="@+id/spinnerbox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:gravity="center_horizontal"
            android:onClick="left">

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_weight="1">
                <Button
                    android:id="@+id/leftarrow"
                    android:background="#888888"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="left"
                    android:minHeight="0dip"
                    android:minWidth="0dip"
                    android:onClick="left"
                    android:text="Button" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_weight="1">
                <TextView
                    android:id="@+id/spintitle"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:gravity="center"
                    android:text="Label" />
            </LinearLayout>

            <LinearLayout
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:gravity="center"
                android:layout_weight="1">
                <Button
                    android:id="@+id/rightarrow"
                    android:background="#888888"
                    android:layout_width="wrap_content"
                    android:layout_height="wrap_content"
                    android:minHeight="0dip"
                    android:minWidth="0dip"
                    android:onClick="right"
                    android:text="Button"
                    />
            </LinearLayout>

        </LinearLayout>


        <ViewFlipper
            android:id="@+id/view_flipper"
            android:layout_width="match_parent"
            android:layout_height="0dp"
            android:layout_weight="1"
            android:layout_marginTop="5dp">

            <LinearLayout
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:gravity="center_horizontal">

                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center" >

                    <ListView
                        android:id="@+id/CoursesView"
                        android:background="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content">
                    </ListView>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center" >

                    <ListView
                        android:id="@+id/FutureCoursesView"
                        android:layout_margin="0dip"
                        android:background="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        >
                    </ListView>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:gravity="center" >

                    <ListView
                        android:id="@+id/MessagesView"
                        android:layout_margin="0dip"
                        android:background="#ffffff"
                        android:layout_width="match_parent"
                        android:layout_height="wrap_content"
                        >
                    </ListView>
                </LinearLayout>
            </LinearLayout>
        </ViewFlipper>

        <LinearLayout
            android:id="@+id/buttonbox"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_marginTop="5dp">

            <Button
                android:id="@+id/CurrentCoursesButton"
                android:background="#888888"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Button" />

            <Button
                android:id="@+id/FutureCoursesButton"
                android:background="#888888"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Button" />

            <Button
                android:id="@+id/UnreadMessagesButton"
                android:background="#888888"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:text="Button" />

            <Button
                android:id="@+id/RefreshButton"
                android:background="#888888"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="refreshAll"
                android:text="Button" />

            <Button
                android:id="@+id/LogoffButton"
                android:background="#888888"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:onClick="logOff"
                android:text="Button" />


        </LinearLayout>
    </LinearLayout>


</LinearLayout>