Android:如果文本字段很长，图像不显示

Question

我得到了我的消息传递应用程序的布局:(这是我的 ListView 的布局)

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_marginBottom="0dp"
    android:layout_marginRight="0dp"
    android:id="@+id/list_item"
    android:gravity="right">

    <RelativeLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/row_message"
        android:background="@drawable/chat_bubble"
        android:padding="5dp"
        android:layout_margin="5dip">

        <github.ankushsachdeva.emojicon.EmojiconTextView
            android:id="@+id/list_item_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="ProgramTitle"
            android:textColor="@android:color/white"
            android:textSize="20sp"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp" />

        <ImageView
            android:id="@+id/messageIcon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:padding="2dp"
            android:src="@drawable/wait"
            android:layout_toRightOf="@+id/list_item_text_view"
            android:layout_alignBottom="@+id/list_item_text_view"
            android:layout_alignParentBottom="true" />
    </RelativeLayout>

</LinearLayout>

看起来像这样:

但是如果消息变长并且变成两行，“勾号”(id=messageIcon) 就会消失:

谁能告诉我为什么？我该如何解决？谢谢!

Answer 1

我认为您的问题的原因在于您如何为 ImageView 设置 anchor 。你拥有所有这些:

android:layout_toRightOf="@+id/list_item_text_view"
            android:layout_alignBottom="@+id/list_item_text_view"
            android:layout_alignParentBottom="true"

这有点搞乱了锚定。以下是根据 RelativeLayout.Params 的文档进行的描述

layout_toRightOf:

Positions the left edge of this view to the right of the given anchor view ID.

layout_alignBottom:

Makes the bottom edge of this view match the bottom edge of the given anchor view ID.

layout_alignParentBottom:

If true, makes the bottom edge of this view match the bottom edge of the parent.

如果您针对 ImageView 的行为是将其设置为始终位于 TextView 的右下角(正下方)，您可以试试这个:

<ImageView
            android:id="@+id/messageIcon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_below="@id/list_item_text_view"
            android:layout_alignParentRight="true"
            android:padding="2dp"
            android:src="@drawable/sample_img" />

这是初始屏幕截图:

如果文本行超过 1，则如下所示:

有关 RelativeLayout.LayoutParams 行为方式的更多信息，请参阅我上面提到的链接。希望这可以帮助。祝你好运，编码愉快。 ;)

PS:如果您的目标是不同的行为，请发表评论，我会编辑答案。 ;)

EDIT

根据您的评论，宽度现在占用的空间与父级相同。所以我修改了代码，并设法进一步简化它。我没有为第一个 subview 使用 RelativeLayout，而是使用了 LinearLayout，如下所示:

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="5dip"
        android:background="@android:color/darker_gray"
        android:orientation="vertical"
        android:padding="5dp">

        <TextView
            android:id="@+id/list_item_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"

            android:text="Program\nTitasdfasdfasdfa"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

        <ImageView
            android:id="@id/messageIcon"
            android:layout_width="20dp"
            android:layout_height="20dp"
            android:layout_gravity="right"
            android:padding="2dp"
            android:src="@drawable/sample_img" />

    </LinearLayout>

提示:我认为不再需要最外层的布局(主父 LinearLayout)。我认为您可以将其删除以避免不必要的 overDraw。

EDIT 2

这是我的测试代码 fragment :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/ll_main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@android:color/black"
    android:orientation="vertical"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.example.my.myapplication.MainActivity">

    <LinearLayout
        android:id="@+id/list_item"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="0dp"
        android:background="@android:color/white"
        android:gravity="right"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dip"
            android:background="@android:color/darker_gray"
            android:padding="5dp">

            <TextView
                android:id="@+id/list_item_text_view"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:text="Program\nTitasdfasdfasdfa"
                android:textColor="@android:color/white"
                android:textSize="20sp" />

            <ImageView
                android:id="@+id/messageIcon"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignRight="@id/list_item_text_view"
                android:layout_below="@id/list_item_text_view"
                android:padding="2dp"
                android:src="@drawable/sample_img" />

        </RelativeLayout>

    </LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="2dp"
        android:background="@android:color/holo_blue_bright" />

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_gravity="left"
        android:layout_marginBottom="0dp"
        android:layout_marginRight="0dp"
        android:background="@android:color/white"
        android:orientation="horizontal">

        <RelativeLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_margin="5dip"
            android:background="@android:color/darker_gray"
            android:padding="5dp">

            <TextView
                android:id="@+id/list_item_text_view2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginLeft="5dp"
                android:layout_marginRight="5dp"
                android:text="Program\nTitasdfasdfasdfa"
                android:textColor="@android:color/white"
                android:textSize="20sp" />

            <ImageView
                android:id="@+id/messageIcon2"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:layout_alignRight="@id/list_item_text_view2"
                android:layout_below="@id/list_item_text_view2"
                android:padding="2dp"
                android:src="@drawable/sample_img" />

        </RelativeLayout>

    </LinearLayout>

</LinearLayout>

截图如下:

EDIT 3

因此，根据评论，您添加了另一个 TextView 并遇到了另一个对齐问题。所以我继续尝试，我可以为您想要的行为做出最简单的布局正在使用 LinearLayout。见以下代码:

<LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@android:color/darker_gray"
        android:orientation="vertical">

        <TextView
            android:id="@+id/list_item_text_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginLeft="5dp"
            android:layout_marginRight="5dp"
            android:text="Pro"
            android:textColor="@android:color/white"
            android:textSize="20sp" />

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

            <TextView
                android:id="@+id/timestamp"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:padding="2dp"
                android:text="Timestamp"
                android:textAppearance="?android:attr/textAppearanceSmall"
                android:textColor="@android:color/white" />

            <ImageView
                android:id="@+id/messageIcon"
                android:layout_width="20dp"
                android:layout_height="20dp"
                android:padding="2dp"
                android:src="@drawable/sample_img" />

        </LinearLayout>

    </LinearLayout>

在此布局中，timestamp 和 messageIcon 将并排放置在 list_item_text_view 下方。由于对齐，我在如何在 RelativeLayout 中实现它时遇到了问题；将诸如 alignParentRight 之类的对齐方式设置为 true 会导致 Layout 本身最大化。如果我有空闲时间，我仍将尝试使用 RelativeLayout 来执行此操作，因为使用 RelativeLayout 可以更好地避免过多的OverDraw/强>。希望这能以某种方式帮助你。祝你好运!