【问题标题】:Float views so they do not take up space in the layout浮动视图,因此它们不会占用布局中的空间
【发布时间】:2012-09-17 12:31:32
【问题描述】:

是否可以在 Android 中将元素浮动到其他元素之上,这样它们就不会影响其容器的布局?

我想要实现的效果是一个浮动的类似气泡的元素:


上面的黄色框是我想要浮动在其他元素之上的元素,但正如您所见,它会将其容器向下推,在绿色条下方创建黑色空间,而不是浮动在其下方的灰色区域之上。

RelativeLayout 可以适当地定位元素,但我找不到使定位的元素不扩展其容器边界的方法。这在 Android 上是否可行?


类比

  • 在网络世界中,等价的元素是具有“位置:绝对”的元素,因此不计为“流”的一部分(即:布局)
  • 在 WPF 世界中,等效的元素是位于 Canvas 内的元素。 Canvas 有自己的边界,占用布局中的空间,但其子级可以位于其边界之外并且不会影响布局
  • 在 iOS 世界中,每个视图都被定位为画布(因为没有布局管理器),因此此行为只需偏移元素框架的 x 和 y 属性即可实现

【问题讨论】:

  • “RelativeLayout 可以适当地定位元素,但我找不到使定位的元素不扩展其容器边界的方法”是什么意思?容器是relativeLayout?

标签: android android-layout layout


【解决方案1】:

RelativeLayout 可以适当地定位元素,但我找不到使定位的元素不扩展其容器边界的方法。

那么你有错误的容器。

例如:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <Button
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:text="@string/big"
        android:textSize="120dip"
        android:textStyle="bold"/>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:text="@string/small"/>

</RelativeLayout>

在这里,小按钮浮动在大按钮上方。小按钮并没有“扩展其容器的边界”,仅仅是因为容器是整个内容视图。

您将RelativeLayout(或FrameLayout)容器设置为包含您的孩子可以漂浮的可能区域的容器。无论是整个屏幕还是只是一个子集都取决于您。反之,如果您的孩子影响了其容器的边界,则说明您使用了错误的容器,或者需要专门为该角色设置一个容器。

在另一个示例中,Roman Nurik shows how to implement a floating "undo bar",类似于 Gmail:

【讨论】:

  • 很棒的答案!听起来答案是否定的,Android 不支持不计算元素作为布局的一部分)。所以解决方法是 1)将 RelativeLayout 容器放在 UI 树的更高位置,以便其边界包含您需要的所有空间(即:所有屏幕的元素)或 2)将所有元素包装在 FrameLayout 中并使用'layout_gravity ' 和边距来定位元素(根据您上面链接的撤消示例)。感谢您的想法!
  • @Marchy: “Android 不支持不计算元素作为布局的一部分”——没错。
【解决方案2】:

看看 android 中的相对布局:例如,当您没有在相对布局中的所有视图中指定位置时,它们将浮动在彼此之上。

http://developer.android.com/guide/topics/ui/layout/relative.html

例子:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent" >

    <TextView
        android:id="@+id/update"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:background="#444444"
        android:text="Update"
        android:textAppearance="?android:attr/textAppearanceLarge" />


    <TextView
        android:id="@+id/lost_of_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/some_button"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:text="text view with lots of text"
        android:textAppearance="?android:attr/textAppearanceMedium" />

    <Button
        android:id="@+id/some_button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:text="Some Button" />

</RelativeLayout>

编辑:CommonsWare 更快;)看看他的漂亮答案!

【讨论】:

  • +1 表示如果未指定相对对齐方式,RelativeLayout 中的元素将相互叠放
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2012-02-24
  • 1970-01-01
  • 1970-01-01
  • 2012-01-03
  • 2023-04-05
  • 2018-07-12
相关资源
最近更新 更多