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，因为这会在红色图像上添加垂直空间和右填充。

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

制作一个具有多个带有圆角边框的子视图的自定义视图

2 个答案: