浮动视图,以便它们不占用布局中的空间

时间:2012-09-25 22:58:28

标签: android android-layout layout

是否可以在Android中的其他元素上方浮动元素,以便它们不会影响其容器的布局?

我想要实现的效果是一个浮动的讲话泡泡元素:

enter image description here

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

RelativeLayout可以适当地定位元素,但我找不到一种方法来使定位元素不扩展其容器的边界。这在Android上甚至可能吗?


类比

  • 在网络世界中,等价物是一个具有'position:absolute'的元素,因此不算作“流”的一部分(即:布局)
  • 在WPF世界中,等价物将是位于Canvas内部的元素。 Canvas有自己的边界,占用了布局中的空间,但是它的子节点可以位于边界之外而不会影响布局
  • 在iOS世界中,每个视图都被定位为画布(因为没有布局管理器)所以这种行为是通过简单地抵消元素框架的x和y属性来实现的。

2 个答案:

答案 0 :(得分:11)

  

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>

Floating buttons

这里,小按钮浮在大按钮的顶部。小按钮不会“扩展其容器的边界”,只是因为容器是整个内容视图。

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

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

Floating Undo Bar

答案 1 :(得分:1)

看看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更快;)看看他漂亮的答案!