创建具有多个视图的自定义视图作为具有圆角边框的子项

Question

我正在尝试设计如下的自定义布局：

到目前为止，我已经完成了以下图像，但这与预期的图像不完全相同：

这是我尝试过的代码。

*** et_rounded_corner *******

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
     <solid android:color="@android:color/white" />
     <corners android:radius="10dp" />
     <padding
          android:left="0dp"
          android:top="0dp"
          android:right="0dp"
          android:bottom="0dp"    >
     </padding>
     <stroke
          android:width="0dp"
          android:color="@color/white"/>
</shape>

---

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/et_rounded_corner"
    android:padding="5dp">

    <TextView
        android:id="@+id/et_search"
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:layout_alignParentStart="true"
        android:layout_toStartOf="@+id/imageView"          
        android:maxLines="1"
        android:padding="5dp"
        android:text="@string/loading"
        android:textAppearance="@style/Small"
        android:visibility="visible" />

    <ImageView
        android:id="@+id/imageView"
        android:layout_width="30dp"
        android:layout_height="30dp"
        android:layout_alignParentEnd="true"
        android:layout_centerVertical="true"
        android:background="@color/red"
        android:padding="5dp"
        android:visibility="visible"
        app:srcCompat="@drawable/ic_search" />

</RelativeLayout>

Answer 1

为了记录，我通过使用imageview的以下背景修复了它。

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/red" />
    <corners
        android:bottomLeftRadius="0dp"
        android:bottomRightRadius="20dp"
        android:topLeftRadius="0dp"
        android:topRightRadius="20dp" />
    <padding
        android:left="0dp"
        android:top="0dp"
        android:right="0dp"
        android:bottom="0dp"    >
    </padding>
    <stroke
        android:width="0dp"
        android:color="@color/red"/>
</shape>

Answer 2

将你的角落radius增加到一个很大的数字，比如100dp。

<corners android:radius="100dp" />

然后Android将为您创建一个圆圈。

---

将相同的技巧应用于`ImageView~的红色背景，并使实际图像具有透明背景。这将为您提供红色右侧的正确圆角。但左边现在将四舍五入。

要使红色按钮的左边框垂直，要么覆盖一个白色块，要么更好，在这个新的红色背景可绘制中添加一个负的左边距。然后左边的圆角部分将尝试在视图外部绘制，因此它不会显示。

---

如其他答案所述，您还需要从封闭视图中删除padding，因为这会添加垂直空间，并在红色图像上添加右边距。

出于同样的原因，请删除图像上的填充。