Android XML 布局 - 一个屏幕上有 4 个 ImageView答案

【问题标题】：Android XML Layout - 4 ImageViews on one screenAndroid XML 布局 - 一个屏幕上有 4 个 ImageView
【发布时间】：2010-06-21 19:12:11
【问题描述】：

我以为我已经了解了Android的XML布局，但似乎我还没有。我想在一个屏幕上有四个 ImageView，同时查看四个图像。

它应该看起来像这样，其中 A 到 D 代表图像视图：

DDDAAA
DDDAAA
BBBCCC
BBBCCC

我该怎么做？我以这种方式尝试过，但它不起作用。 Eclipse 编辑器似乎也不是很好。有没有更好的方法来创建这些布局？

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    >
    <TableRow>
<ImageView android:id="@+id/ImageView01" android:layout_height="wrap_content" android:layout_width="wrap_content" ></ImageView>
<ImageView android:id="@+id/ImageView02" android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
  </TableRow>

  <TableRow>
<ImageView android:id="@+id/ImageView03" android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
<ImageView android:id="@+id/ImageView04" android:layout_height="wrap_content" android:layout_width="wrap_content"></ImageView>
  </TableRow>
</RelativeLayout>

【问题讨论】：

标签： xml android layout

【解决方案1】：

怎么样：

LinearLayout，vertical 方向，包含所有内容
然后是第一个LinearLayout，方向为horizontal
- 将包含 D 和 A，
和horizontal 方向相同的LinearLayout，第二次，用于B 和C

并使用

android:layout_weight
和android:gravity="center"

所以每个布局都占据了足够的位置并且居中？

有点像这样，我想说：

<?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="fill_parent"
    android:orientation="vertical"
    >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:layout_weight="1"
        >

        <LinearLayout
            android:id="@+id/DashboardNewPost"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/new_post"
            />
        </LinearLayout>
        <LinearLayout
            android:id="@+id/DashboardPostsList"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/posts_list"
            />
        </LinearLayout>

    </LinearLayout>

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:orientation="horizontal"
        android:layout_weight="1"
        >
        <LinearLayout
            android:id="@+id/DashboardCommentsList"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/comments_list"
            />
        </LinearLayout>

        <LinearLayout
            android:id="@+id/DashboardBlogParameters"
            android:layout_width="fill_parent"
            android:layout_height="fill_parent"
            android:orientation="vertical"
            android:layout_weight="1"
            android:gravity="center"
            >
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/blog_params"
            />
        </LinearLayout>

    </LinearLayout>

</LinearLayout>

我想（未尝试）您甚至可以删除每个 ImageView 周围的 LinearLayout，而是将其具有的属性添加到 ImageViews...

（在我从中获取这个的应用程序中，我必须添加那些LinearLayout，因为不仅仅是这些图像）

【讨论】：

酷！这正是我所寻找的。我使用编辑器时不知道LinearLayout的垂直和水平选项，在我看来很难使用。非常感谢:)

【解决方案2】：

在RelativeLayout 中有TableRows 没有意义。它可能会帮助您通读介绍性布局documentation。它解释了不同的布局类型及其用法。

对于您的情况，您应该能够将 RelativeLayout 更改为 TableLayout。

此外，在询问布局问题时，如果您解释您在尝试中看到的行为，而不是仅仅说它不起作用，这会很有帮助。

【讨论】：