Question

我尝试创建这样的聊天泡泡 -

this image
但我希望这个泡沫能够包含它的内容。现在的问题是，每当我尝试将'alignparentRight = true'用于'double-ticks'时，它会扩展为查看占据整个父级宽度。

我怎么能把它的内容包裹在蜱停留在右下角并且文本'英雄'留在左上角。

<RelativeLayout
    android:id="@+id/wrapper"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="5dp"
    android:background="@drawable/bubble_send"
    android:gravity="right"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/chat_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/chat_comment"
        android:src="@drawable/rotate"
        android:visibility="visible"/>


    <TextView
        android:id="@+id/chat_comment"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toLeftOf="@+id/time"
        android:maxWidth="200dp"
        android:text="Hero"
        android:textColor="@android:color/primary_text_light"/>


    <TextView
        android:id="@+id/time"
        android:layout_width="50dp"
        android:layout_height="wrap_content"
        android:layout_alignBottom="@+id/tick"

        android:layout_toLeftOf="@id/tick"
        android:text="11:25 am"
        android:textColor="@color/black"
        android:textSize="10sp"/>

    <ImageView
        android:id="@+id/tick"
        android:layout_width="15dp"
        android:layout_height="15dp"
        android:layout_alignParentRight="true"
        android:layout_below="@+id/chat_comment"
        android:layout_marginTop="5dp"
        android:src="@drawable/ic_tick_double"
        android:visibility="visible"/>
</RelativeLayout>

Answer 1

我想避免多次嵌套，但这是唯一的手段。 -

<LinearLayout
    android:id="@+id/wrapper"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/bubble_send"
    android:minWidth="100dp"
    android:orientation="vertical">

    <ImageView
        android:id="@+id/chat_image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/chat_comment"
        android:layout_gravity="center_horizontal"
        android:src="@drawable/rotate"
        android:visibility="gone"/>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_margin="5dp"
        android:orientation="vertical">

        <TextView
            android:id="@+id/chat_comment"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/time"
            android:maxWidth="200dp"
            android:text="Hero"
            android:textColor="@android:color/primary_text_light"/>

    </LinearLayout>

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="right">

        <TextView
            android:id="@+id/time"
            android:layout_width="50dp"
            android:layout_height="wrap_content"
            android:layout_gravity="bottom"
            android:layout_toLeftOf="@id/tick"
            android:text="11:25 am"
            android:textColor="@color/black"
            android:textSize="10sp"/>

        <ImageView
            android:id="@+id/tick"
            android:layout_width="15dp"
            android:layout_height="15dp"
            android:layout_alignParentRight="true"
            android:layout_marginTop="5dp"
            android:src="@drawable/ic_tick_double"
            android:visibility="visible"/>
    </LinearLayout>
</LinearLayout>

Answer 2

<RelativeLayout
android:id="@+id/wrapper"
android:layout_width="250dp"
android:layout_height="wrap_content"
android:layout_margin="5dp"
android:background="@drawable/bubble_send"
android:gravity="right"
android:orientation="vertical">

<ImageView
    android:id="@+id/chat_image"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_above="@+id/chat_comment"
    android:src="@drawable/rotate"
    android:visibility="visible"/>


<TextView
    android:id="@+id/chat_comment"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/time"
    android:maxWidth="200dp"
    android:text="Hero"
    android:textColor="@android:color/primary_text_light"/>


<TextView
    android:id="@+id/time"
    android:layout_width="50dp"
    android:layout_height="wrap_content"
    android:layout_alignBottom="@+id/tick"

    android:layout_toLeftOf="@id/tick"
    android:text="11:25 am"
    android:textColor="@color/black"
    android:textSize="10sp"/>

<ImageView
    android:id="@+id/tick"
    android:layout_width="15dp"
    android:layout_height="15dp"
    android:layout_alignParentRight="true"
    android:layout_below="@+id/chat_comment"
    android:layout_marginTop="5dp"
    android:src="@drawable/ic_tick_double"
    android:visibility="visible"/>

- 而不是让您的主要布局包装内容，而是将其设为固定宽度

alignParentRight使布局采用父级的宽度，尽管在聊天气泡中是“换行内容”

2 个答案: