在文本和ImageView之间添加空格

Question

我有以下xml。我有一个textview和一个imageview。我希望这些元素之间有一点空间（比如说20dp），但是基于textview的长度，有时会重叠。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical|left"
    android:id="@+id/myName"
    android:textSize="14sp" />
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_toLeftOf="@+id/myName"
    android:gravity="center_vertical|right"
    android:layout_centerVertical="true"
    android:layout_alignParentRight="true"
    android:src="@drawable/ic_arrow_drop_down_red"
    android:paddingLeft="20dp" />
</RelativeLayout>

您可以在以下图像中看到问题。有一段文字和一张图片。图片是红色的。

更新:

我已经按照以下方法使用了 android:drawableRight，但仍然得到了相同的结果。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical">
<TextView
    android:textColor="@color/primary_text"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical|left"
    android:id="@+id/myName"
    android:textSize="14sp"
    android:drawableRight="@drawable/ic_arrow_drop_down_red"
    android:drawablePadding="20dp" />
 </RelativeLayout>

- casillas

Answer 1

如果您只想在TextView的右侧（或任何其他侧面）显示可绘制项，请考虑使用android:drawableRight属性，而不是两个视图。

可以使用android:drawablePadding进一步分离图像。如果您的UI更加复杂，则可能不足以使用一个视图。

请参考下图：

- Juan Cortés

---

这也是一个相当不错的方法。 - Vucko

Answer 2

你可以像这样在它们之间插入所需宽度的空视图（也可能明智地将布局更改为LinearLayout）。

编辑：更改为线性布局后，空视图解决方案和drawableRight解决方案都可行，因此我将我的编辑得更漂亮。所有drawableRight的功劳归@JuanCortes所有：

<?xml version="1.0" encoding="utf-8"?>
<LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android"
xmlns:local="http://schemas.android.com/apk/res-auto"
android:layout_width="wrap_content"
android:layout_height="wrap_content">
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical|left"
    android:id="@+id/myName"
    android:textSize="14sp"
    android:drawableRight="@drawable/ic_arrow_drop_down_red"
    android:paddingLeft="20dp" />

</LinearLayout>

- Vucko

---

不幸的是，我仍然得到相同的结果。即使我删除了应用程序并进行了清理和重建。 - casillas

嗯，去掉相对布局，将其放置在线性布局中。同时也要去掉 toLeftOf 等属性，因为它们只适用于相对布局。相对布局让我感到不舒服。 - Vucko

没错，即使使用了drawableRight，也不需要额外的视图或图片视图。请更新您的答案，然后我会将其标记为答案。 - casillas

好的，很酷。谢谢。编辑过了。你需要开始学习如何使用线性布局，它们是我所征服并且最舒适地使用和控制的布局方式。你可以按任何你想要的方式嵌套它们，并使用权重来给它们相对大小。 - Vucko

Answer 3

为什么不使用这些属性呢？

- margin - padding - 或者复合属性？ 如何使用复合绘图而不是包含ImageView和TextView的LinearLayout

- ceph3us

Answer 4

尝试使用 Framelayout 可能会对您有所帮助。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:local="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:gravity="center_vertical">
    <FrameLayout
        android:layout_width="match_parent"
        android:paddingLeft="10dp"
        android:paddingRight="10dp"
        android:layout_height="wrap_content">
        <TextView

            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|left"
            android:id="@+id/myName"
            android:textSize="14sp"
             />
        <ImageView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_toLeftOf="@+id/myName"
            android:layout_gravity="center_vertical|right"
            android:layout_centerVertical="true"
            android:layout_alignParentRight="true"
            android:paddingLeft="20dp" />
    </FrameLayout>

</RelativeLayout>

- Asmaa Rashad