Android：语音气球 - ImageView 重叠父级

Question

我正在尝试让 ImageView 与其父级重叠并创建一个类似对话气球的复合视图。例如：

我无法让底部的三角形成为蓝色块的一部分并与位于其下方的任何其他视图/控件重叠。

有人有办法吗？

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

<LinearLayout
    android:id="@+id/appointment_ticket_signed_in_content_wrapper"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:background="@color/background_green" >

    <ImageView
        android:id="@+id/appointment_ticket_signed_in_icon"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:src="@drawable/ic_action_accept"
        android:contentDescription="@string/hello_world"
        android:layout_marginLeft="@dimen/activity_horizontal_margin"
        android:layout_marginTop="@dimen/activity_vertical_margin"
        android:layout_marginRight="@dimen/activity_horizontal_margin"
        android:layout_marginBottom="@dimen/activity_vertical_margin" />

    <TextView
        android:id="@+id/appointment_ticket_signed_in_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="@dimen/padding_large"
        android:layout_marginRight="@dimen/padding_large"
        android:layout_marginBottom="@dimen/padding_large"
        android:textColor="@android:color/white"
        android:textSize="18sp" />

</LinearLayout>

<ImageView
    android:id="@+id/appointment_ticket_signed_in_down_arrow"
    android:layout_width="25dp"
    android:layout_height="25dp"
    android:scaleType="centerInside"
    android:src="@drawable/triangle"
    android:contentDescription="@string/hello_world"
    android:layout_alignParentBottom="true"
    android:layout_gravity="bottom"
    android:paddingBottom="-25dp"
    android:background="@color/important_text_orange" />
</merge>

我认为上面的 XML 是可行的方法，但似乎负边距或填充底部无法将视图推到其父级之外。 此 XML 放置在相对布局内。

有人知道答案吗？

编辑

我的情况：

有什么方法可以重叠下一个元素填充而无需 直接访问它？

Answer 1

这是一个 xml 文件，它创建了一些可以工作的东西。试试看并告诉我：

<?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"
android:orientation="vertical"
android:padding="10sp" >

<ImageView
    android:layout_width="match_parent"
    android:layout_height="200sp"
    android:layout_below="@+id/complete_bubble"
    android:background="#123456" />

<RelativeLayout
    android:id="@+id/complete_bubble"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="-15sp" >

    <RelativeLayout
        android:id="@+id/main_block"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="#000000"
        android:padding="10sp" >

        <TextView
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:text="Some text"
            android:textColor="#FFFFFF" />
    </RelativeLayout>

    <ImageView
        android:layout_width="20sp"
        android:layout_height="20sp"
        android:layout_below="@+id/main_block"
        android:layout_marginLeft="20sp"
        android:background="#000000" />
</RelativeLayout>

</RelativeLayout>

这个负边距有效。

Answer 2

方法一：使用气球图片作为RelativeLayout的背景图片，然后在该布局中添加TextView。

方法 2（也是更棒的方法）：创建一个自定义视图，它不仅可以绘制语音气球，而且还有一个 setText(String) 方法，该方法将调整气泡中绘制的文本并调整其大小以适应总是文字。然后您将其开源并与世界分享。

如果您想创建自定义视图...

public class AwesomeTextBalloon extends View {
    // constructors here

    @Override
    protected void onDraw(Canvas canvas) {
        // first draw the balloon
        // then draw the text
    }

    public void setText(String newText) {
        // set text variable here
    }
}

然后以编程方式或在 xml 中添加 View 并调用 setText() 以更改气球文本的值。

Answer 3

试试这个

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

    <FrameLayout
        android:id="@+id/header2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="10dip"
        android:background="@android:color/transparent" />

    <ImageView
        android:id="@+id/arrow_up"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/pop_up" />

    <HorizontalScrollView
        android:id="@+id/scroll"
        android:layout_width="320dip"
        android:layout_height="80dip"
        android:layout_below="@id/header2"
        android:background="@android:color/darker_gray"
        android:fadingEdgeLength="0dip"
        android:paddingLeft="1dip"
        android:scrollbars="none" >

        <LinearLayout
            android:id="@+id/appointment_ticket_signed_in_content_wrapper"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@color/background_green"
            android:orientation="horizontal" >

            <ImageView
                android:id="@+id/appointment_ticket_signed_in_icon"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_marginBottom="@dimen/activity_vertical_margin"
                android:layout_marginLeft="@dimen/activity_horizontal_margin"
                android:layout_marginRight="@dimen/activity_horizontal_margin"
                android:layout_marginTop="@dimen/activity_vertical_margin"
                android:contentDescription="@string/hello_world"
                android:src="@drawable/ic_action_accept" />

            <TextView
                android:id="@+id/appointment_ticket_signed_in_text"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:layout_marginBottom="@dimen/padding_large"
                android:layout_marginRight="@dimen/padding_large"
                android:layout_marginTop="@dimen/padding_large"
                android:textColor="@android:color/white"
                android:textSize="18sp" />
        </LinearLayout>
    </HorizontalScrollView>

    <FrameLayout
        android:id="@+id/footer"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/scroll"
        android:background="@android:color/transparent" />

    <ImageView
        android:id="@+id/arrow_down"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/footer"
        android:layout_marginTop="-1dip"
        android:src="@drawable/pop_dwn" />

</RelativeLayout>