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>

看起来像这样：

但是如果消息变得很长并且它有两个内衬，那么＆＃34; tick＆＃34; （id = messageIcon）消失了：

谁能告诉我为什么？我该如何解决这个问题？谢谢！

Answer 1

我认为问题的原因在于如何为ImageView设置锚点。你拥有所有这些：

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

哪种方式会弄乱锚定。以下是RelativeLayout.Params

的文档说明

layout_toRightOf：

  

将此视图的左边缘定位到给定锚点视图ID的右侧。

layout_alignBottom：

  

使此视图的下边缘与给定锚点视图ID的下边缘匹配。

layout_alignParentBottom：

  

如果为true，则使此视图的下边缘与父视图的下边缘匹配。

如果您针对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：如果你的目标是采取不同的行为，只需发表评论，我就会编辑答案。 ;）

  

修改

根据你的评论，宽度现在占用的空间与父代相同。所以我修改了代码，并设法进一步简化它。我没有使用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。

  

编辑2

这是我的测试代码段：

<?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>

以下是它的截图：

  

编辑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会使布局本身最大化。如果我有空闲时间，仍会尝试使用RelativeLayout执行此操作，因为使用RelativeLayout最好避免过多 OverDraw 。希望这能以某种方式帮助你。祝你好运！