我们如何在Android中以矩形覆盖图标

Question

我要设计UI，如下图所示。 我们无法做到这一点。 这是我的代码

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">
    <EditText
        android:id="@+id/EditShop"
        android:drawableLeft="@drawable/user_icon"
        android:background="@drawable/rectangle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:hint="Shopname"
        android:inputType="text"
        android:padding="7dp"
        android:singleLine="true" />
</LinearLayout>

我想要这样的输出：

Answer 1

尝试这个。

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <EditText
        android:id="@+id/EditShop"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/rectangle"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="20dp"
        android:hint="Shopname"
        android:inputType="text"
        android:padding="7dp"
        android:singleLine="true" />

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/user_icon"
        android:layout_alignBottom="@+id/EditShop"
        android:layout_alignParentLeft="true"
        android:layout_alignParentStart="true" />

</RelativeLayout>

Answer 2

使用RelativeLayout而不是LinearLayout。

<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<EditText
    android:id="@+id/EditShop"
    android:drawableLeft="@drawable/user_icon"
    android:background="@drawable/rectangle"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="20dp"
    android:layout_marginTop="20dp"
    android:hint="Shopname"
    android:inputType="text"
    android:padding="7dp"
    android:singleLine="true" />
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/user_icon"
    android:layout_alignBottom="@+id/EditShop"
    android:layout_alignParentLeft="true"
    android:layout_alignParentStart="true" />

</RelativeLayout>

Answer 3

您可以尝试使用图层列表。 但是我不确定它是否正确缩放。 了解Android的<layer-list>

防弹解决方案是在九个补丁中绘制背景。 https://developer.android.com/studio/write/draw9patch.html

Answer 4

无需编写代码和出色的方法，请使用ContraintLayout，这里是完整的布局文件和结果图片：

调整EditText的大小和相同的结果：

布局代码：

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
        xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="@android:color/white" >

    <EditText android:layout_width="315dp" android:layout_height="65dp"
              android:id="@+id/editText" tools:layout_editor_absoluteY="131dp"
              tools:layout_editor_absoluteX="37dp"/>
    <ImageView
            android:layout_width="42dp"
            android:paddingLeft="5dp"
            android:layout_height="45dp" app:srcCompat="@android:drawable/ic_lock_lock"
            android:id="@+id/imageView2" android:layout_marginTop="8dp"
            app:layout_constraintTop_toBottomOf="@+id/editText" app:layout_constraintBottom_toTopOf="@+id/editText"
            app:layout_constraintVertical_bias="0.556"
            app:layout_constraintEnd_toStartOf="@+id/editText" android:layout_marginEnd="8dp"
            android:layout_marginRight="8dp" app:layout_constraintStart_toStartOf="@+id/editText"
            app:layout_constraintHorizontal_bias="0.34"/>
</androidx.constraintlayout.widget.ConstraintLayout>