TextInputLayout 中的左侧图标

Question

我想给我的TextInputLayout添加左侧图标，但是文本会覆盖在图标上方。当我添加padding时，所有内容都会一起移动。

我已经尝试过：

 android:drawableLeft="@drawable/ic_store_white_48dp"
 android:drawablePadding="50dp"
 android:drawableStart="@drawable/ic_store_white_48dp"

但是它没有起作用！ 我应该为每一行实现一个LinearLayout水平布局，但我想确认是否有更简单的方法来实现。

这是我的布局代码：

        <android.support.design.widget.TextInputLayout
            android:id="@+id/til_calle"
            android:layout_width="match_parent"
            android:layout_height="wrap_content">


            <EditText
                android:id="@+id/et_calle"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:drawableLeft="@drawable/ic_store_white_48dp"
                android:drawablePadding="50dp"
                android:drawableStart="@drawable/ic_store_white_48dp"
                android:hint="Calle"
                android:inputType="text" />

        </android.support.design.widget.TextInputLayout>

- Juliatzin

---

为什么不使用 LinearLayout 或者 RelativeLayout 呢？如果你使用它们，你可以使用 android:layout_toRightOf 等属性。 - McGuile

是的，我可以做到，但这会“复制”我的代码量（我有大约40个字段，所以我想优化它）。 - Juliatzin

如果你有40个字段，为什么不使用ListView，然后用每一行填充ListView呢？ - Kevin Cronly

我有40个非同质字段。因此，ListView并不是很适合，而我的经验是使用表单+ ListView非常麻烦！ - Juliatzin

抱歉，我已经离开了这个项目，所以很难给出反馈！我不再是安卓程序员了！ - Juliatzin

Answer 1

请确保您正在使用最新的Design库，您所需的一切都在Design和AppCompat中：

compile 'com.android.support:design:23.2.0'

尝试同时使用Design库的TextInputLayout和AppCompat的AppCompatEditText。

<android.support.design.widget.TextInputLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:textColor="@android:color/white"
    android:textColorHint="@color/loginHint">

    <android.support.v7.widget.AppCompatEditText
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:imeOptions="actionNext"
        android:inputType="textEmailAddress|textNoSuggestions"
        android:minWidth="350dp"
        android:drawableLeft="@drawable/ic_store_white_48dp"
        android:drawableStart="@drawable/ic_store_white_48dp"
        android:textColor="@android:color/white"
        android:textColorHint="@color/loginHint"
        android:textCursorDrawable="@null"
        app:backgroundTint="@android:color/white"/>
</android.support.design.widget.TextInputLayout>

- Jared Burrows

---

我认为minWidth可以省略，layout_width则设置为match_parent，颜色属性与显示图标无关。此外还有drawableEnd和drawableRight可用于在末尾显示图标。 - AaA

这个例子也适用于新组件 TextInputEditText。 - Slav

Answer 2

使用Material Components库，您可以使用app:startIconDrawable属性更改TextInputLayout中左侧图标。例如：

    <com.google.android.material.textfield.TextInputLayout
        android:hint="Hint text"
        app:startIconDrawable="@drawable/ic_add_24px"
        ...>

        <com.google.android.material.textfield.TextInputEditText/>

    </com.google.android.material.textfield.TextInputLayout>

- Gabriele Mariotti

---

左侧绘制部分能够被点击吗？我的意思是左侧绘制部分和其他输入字段部分有着不同的点击事件。 - Usman Rana

@UsmanRana 是的，你可以使用 textInputLayout.setStartIconOnClickListener。 - Gabriele Mariotti

Answer 3

这是我的代码布局：

 <android.support.design.widget.TextInputLayout
            android:id="@+id/input_layout_username"
            android:layout_width="match_parent"

            android:layout_height="wrap_content">

            <EditText
                android:id="@+id/input_username"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:singleLine="true"
                android:drawableLeft="@drawable/icon_user"
                android:drawableStart="@drawable/icon_user"
                android:drawablePadding="10dp"
                android:hint="User Name" />
        </android.support.design.widget.TextInputLayout>

android:drawablePadding="10dp"

Its work

- Dharmendra Mishra

---

这在supportLibVersion 24.2.0不起作用。我不得不降级到24.1.1。 - netsuite_insights

Answer 4

这是一个在Android问题跟踪器上报告的错误

https://code.google.com/p/android/issues/detail?id=225836

现在，在最新版本的Design Support Library（v25.0.1）中已经修复了此问题。只需将所需的依赖项添加到构建gradle文件中即可...

dependencies {
    compile 'com.android.support:design:25.0.1'
}

- Leo

---

你说得对，现在我已经将Android支持库更新到40版，然后使用了compile 'com.android.support:design:25.0.1'。现在我的drawable右侧问题已经解决了，谢谢。 - jesto paul

挽救了我的一天。我也遇到了同样的问题。 - Khizar Hayat

Answer 5

很简单，当添加passwordToggleEnabled时，它会自动在右侧添加眼睛图标，并且drawableLeft会消失。所以你需要删除drawableLeft并只使用drawableStart。

<android.support.design.widget.TextInputLayout
        android:id="@+id/til_calle"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

      <EditText
            android:id="@+id/et_calle"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:drawablePadding="50dp"
            android:drawableStart="@drawable/ic_store_white_48dp"
            android:hint="Calle"
            android:inputType="text" />

- Cevin Ways

Answer 6

如果您正在使用材料输入布局，那么您只需要在输入布局的XML代码中添加一行即可。

app:startIconDrawable="@drawable/ic_baseline_content_paste_24"

- Rohit Jakhar

Answer 7

使用 Material 库，您可以使用 endIconMode="custom" 设置自定义图标：

<com.google.android.material.textfield.TextInputLayout
    android:id="@+id/date_layout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    app:endIconMode="custom"
    app:endIconDrawable="@drawable/ic_calendar">

    <com.google.android.material.textfield.TextInputEditText
        android:id="@+id/date_end"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:inputType="none"
        android:textSize="14sp"
        tools:text="30 feb" />

</com.google.android.material.textfield.TextInputLayout>

- nGL

Answer 8

是的。目前这是布局上的一个bug。 您可以尝试给EditText设置leftPadding或在文本之前添加一些空格。

- Anitha Manikandan