【问题标题】：How to achieve layout for given screen in Android?如何在Android中实现给定屏幕的布局？
【发布时间】：2015-09-08 00:36:50
【问题描述】：

我从Framelayout、LinearLayout 和RelativeLayout 尝试了很多东西，但不知道如何在 Android 中实现以下屏幕布局。

那么，让我们闯入LinearLayout。

[![在此处输入图片描述][1]][1]

第一部分是TextView，我们可以看到Manhattan, NY
第二部分是ImageView，我们可以看到心和数量。
第三部分是不同的背景颜色，有两张头像，包括文字。
第四部分是带有Drable 行的简单文本。
第五节与第四节非常相似
第六部分是一个按钮

我可以使用LinearLayout 和Bitmap 获得前两个部分来添加心形图像。

问题

如何实现Third section？我需要LinearLayout 还是FrameLayout？

我得到的是第三部分是placeholder，我们在其中设置了背景颜色并添加了两个图像。对吧？

实现整个布局最好的方法是什么？

【问题讨论】：

我没有得到任何反对意见？
您可以为整个线性布局设置灰色背景。然后对于第三部分，使用这两个图像进行线性布局。对于其他单独的部分，您使用白色背景颜色，这将覆盖为整个布局设置的灰色。
如果我们在第三部分有动态图像计数怎么办？我需要在此部分添加FrameLayout 吗？因为那将是一个滑块部分
你是对的，我错了。第三部分使用 FrameLayout。您要使用的 FrameLayout 类型是 HorizontalScrollView。 developer.android.com/reference/android/widget/…

标签： android android-layout android-fragments android-activity

【解决方案1】：

你需要RelativeLayout，这是最灵活的——你可以只用它做第 3 部分，然后把它嵌套到一个LinearLayout 中，或者用一个RelativeLayout 做整个布局（尽管后一个选项不是很有利于按比例划分可用空间，您可以轻松地将LinearLayout 与权重一起使用）

【讨论】：

所以，你建议我们 RelativeLayout 第 3 部分我需要将 Horizontal Linear layout 嵌套在 RelativeLayout 中。对吗？
不，不是真的，我的意思是将第 3 节的 RelativeLayout 嵌套到外部 LinearLayout 中，即您已经拥有的那个，不需要额外的包装 - 而不是可能放弃外部LinearLayout 并在一个 RelativeLayout 中完成整个屏幕——我刚才说过这也是一种选择。

【解决方案2】：

只是为了补充 Ivan 的答案，对于 Android XML，您必须做一些类似于基于表格的设计。

您可以使用http://developer.android.com/guide/topics/ui/layout/relative.html 作为您可以使用RelativeLayout 执行的所有操作的参考，并使用http://developer.android.com/guide/topics/ui/layout/linear.html 作为您可以使用LinearLayout 执行的操作的参考。

但一般

如果您希望元素垂直或水平相邻放置，以便每个元素占用一定的空间，您可以使用 LinearLayout。下面的示例将创建一行水平的三个文本视图，每个视图占据屏幕的 1/3。请注意，您的权重之和不必完全等于 1.0。

<LinearLayout
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  >
  <TextView
    android:layout_width="0dp"
    android:layout_height="24sp"
    android:layout_weight="0.33"
    />
  <TextView
    android:layout_width="0dp"
    android:layout_height="24sp"
    android:layout_weight="0.33"
    />
  <TextView
    android:layout_width="0dp"
    android:layout_height="24sp"
    android:layout_weight="0.33"
    />
</LinearLayout>

如果您希望一个元素位于另一个元素之上或与另一个元素相邻，请使用 RelativeLayout。以下代码将创建一个大的 ImageButton，在图片底部放置一个半透明的文本标签，并在图片下方放置一个标题

<RelativeLayout
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  />
  <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/example.png"
    android:id="@+id/exampleImage"
    />
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="24sp"
    android:layout_alignLeft="@id/exampleImage"
    android:layout_alignRight="@id/exampleImage"
    android:layout_alignBottom="@id/exampleImage"
    android:background="#80808080"
    android:text="on image label"
    />
  <TextView
    android:layout_width="wrap_content"
    android:layout_height="24sp"
    android:layout_alignLeft="@id/exampleImage"
    android:layout_alignRight="@id/exampleImage"
    android:layout_below="@id/exampleImage"
    android:background="#FF808080"
    android:text="below image caption"
    />
</RelativeLayout>

【讨论】：