错误(或提示)文本中的Android TextInputLayout图标

时间:2018-01-16 15:32:25

标签: android kotlin android-drawable

我正在使用TextInputLayoutHelper小部件,以遵循浮动标签输入的材料指南。它目前看起来像这样:

floating input label with error message

我的代码

在我的onCreate活动中,我有:

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)

    val passwordInputLayout = this.findViewById<TextInputLayoutHelper>(R.id.input_layout_password)
    passwordInputLayout.error = "8+ characters and at least one uppercase letter, a number, and a special character (\$, #, !)"
    passwordInputLayout.isErrorEnabled = true
}

我的xml中的小部件看起来像......

<TextInputLayout
    android:id="@+id/input_layout_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:theme="@style/EditTextTheme"
    app:errorEnabled="true"
    app:errorTextAppearance="@style/ErrorAppearance"
    app:passwordToggleDrawable="@drawable/asl_password_visibility"
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="?colorControlNormal">

    <EditText
        android:id="@+id/password_edit_text"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:ems="10"
        android:hint="@string/set_a_password"
        android:inputType="textPassword"
        android:singleLine="true" />

</TextInputLayout>

我想做什么

我想在错误文本右侧的错误/提示文本(感叹号三角形)中放置一个图标。

mock up of input with error icon

我的尝试

尝试1

I found an implementation使用setError(text, drawable),但我使用KotlinsetError不可用。

所以我试过了:

val warningIcon = ResourcesCompat.getDrawable(resources, R.drawable.ic_warning_black_24dp, null)
warningIcon?.setBounds(0, 0, warningIcon.intrinsicWidth, warningIcon.intrinsicHeight)

passwordInputLayout.error = "8+ characters and at least one uppercase letter, a number, and a special character (\$, #, !) $warningIcon"

但是这不会渲染drawable,只是资源路径的一个字符串。

尝试2

我发现another one会覆盖TextInputLayoutHelper,以便在文本旁边设置一个drawable。如您所见,setError仅包含没有override fun setError(error: CharSequence?)参数的接口drawable

override fun setError(error: CharSequence?) {
    super.setError(error)

    val warningIcon = ResourcesCompat.getDrawable(resources, R.drawable.ic_warning_black_24dp, null)
    warningIcon?.setBounds(0, 0, warningIcon.intrinsicWidth, warningIcon.intrinsicHeight)
    // mHelperView is a TextView used in my custom `TextInputLayout` override widget
    mHelperView!!.setCompoundDrawables(null, null, warningIcon, null)
}

是否有覆盖或内置“Android方式”以在错误/提示文字旁边添加此图标?

3 个答案:

答案 0 :(得分:0)

这可能会帮助那些陷入类似麻烦的人。我查看了源代码。事情是setError(text, drawable)已在EditText类中定义,而不是TextInputLayout,因为您的布局基于。

我有类似的代码和问题,因为TextInputLayout没有任何方法可以替换Drawable,所以我们必须在TextInputLayout下面创建一个TextView来模拟错误信息。

答案 1 :(得分:0)

您可以像这样将SpannableString与ImageSpan一起使用

val errorDrawable = ContextCompat.getDrawable(context!!, R.drawable.ic_error)
your_text_input_layout.error = SpannableString("your string").apply {
                setSpan(ImageSpan(errorDrawable, ImageSpan.ALIGN_BASELINE), 0, 1, Spanned.SPAN_INCLUSIVE_EXCLUSIVE)

答案 2 :(得分:0)

您要在TextInputLayout的错误容器中放置一个图标

如果您查看实际布局

enter image description here

您会发现您的textview甚至是换行内容。

也在SDK来源中

if (enabled) {
    mErrorView = new AppCompatTextView(getContext());
    mErrorView.setId(R.id.textinput_error);
    ...

因此没有地方在右侧按原样插入图标。

  • 一种可能的解决方案是在布局内以编程方式找到该视图,更改宽度并应用可绘制对象。
  • 第二种(可能也是最简单的)解决方案是实施自己的简单错误布局,而不是为TextInputLayout设置错误,而是由您自己管理错误状态