java - 安卓 : Create translucent edittext with image inside

Question

我正在开发一个 Android 项目，我在其中有一个登录页面，我想在其中添加用户名和密码字段。我的设计要求我以这种半透明的方式放置它们，并在里面放置图像。我可以为 EditText 更改什么以使其半透明和塑造它的任何想法，有许多线程通过将背景设置为 null 或按颜色等使其透明，但我发现没有这样的东西。

设计:

我正在使用相对布局，右侧的那些图标，我将它们放在单独的 PNG 文件中。我可以直接将它们添加到 Edittext 中，但我担心如果用户名和密码很长，它会开始遍历图像。有什么策略吗？谢谢。

代码:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 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:background="@drawable/background"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:text="Text"
        android:id="@+id/textView"
        android:textSize="32sp"
        android:textColor="@color/common_signin_btn_dark_text_default"
        android:layout_marginTop="75dp"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" />

    <EditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/editText"
        android:layout_below="@+id/textView"
        android:layout_marginTop="41dp"

        android:layout_alignRight="@+id/textView"
        android:layout_alignEnd="@+id/textView"
        android:layout_alignLeft="@+id/textView"
        android:layout_alignStart="@+id/textView" />
</RelativeLayout>

更新截图

更新的 EditText

 <EditText
        android:layout_width="wrap_content"
        android:layout_height="45dp"
        android:id="@+id/emailEditText"
        android:inputType="textEmailAddress"
        android:layout_below="@+id/textView"
        android:layout_marginTop="41dp"
        android:drawableEnd="@drawable/Mail"
        android:drawableRight="@drawable/Mail"
        android:maxLines="1"
        android:ellipsize="end"
        android:hint="Email"
        android:textColorHint="@color/common_signin_btn_dark_text_focused"
        android:background="@drawable/layout_bg"
        android:layout_alignRight="@+id/textView"
        android:layout_alignEnd="@+id/textView"
        android:layout_alignLeft="@+id/textView"
        android:layout_alignStart="@+id/textView" >
    </EditText>

layout_bg.xml :

<?xml version="1.0" encoding="UTF-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@color/traslucent_background" />
    <stroke android:width="1dip" android:color="#B1BCBE" />
    <corners android:radius="17dip"/>
    <padding android:left="0dip" android:top="0dip" android:right="0dip" android:bottom="0dip" />
</shape>

Answer 1

对于图像，您应该能够使用 android:drawableEnd="@drawable/..." 和 android:drawableRight="@drawable/..." 这也会限制文本长度。

对于背景，您可以像这样定义自定义可绘制对象:

<!-- background_edittext.xml -->
<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">

    <corners android:radius="8dp" />
    <solid android:color="@color/traslucent_background" />

</shape>

traslucent_color 将在 colors.xml 中定义，例如，如下所示:

<color name="shadow_lighter_color">#64000000</color>

编辑:这将是如何使用 drawableEnd/drawableRight 并在文本和图标之间留一个空格的示例:

    <EditText
        android:background="@drawable/background_edittext"
        android:drawablePadding="16dp"
        android:drawableEnd="@drawable/icon"
        android:drawableRight="@drawable/icon"
        android:maxLines="1"
        android:ellipsize="end"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />