Android Material 文本输入布局结束图标不可见但工作

Question

我最近发现了 Material Design TexInputLayout 的一个错误以及它使 endIcon 可见的方式。

假设您已正确设置所有内容并启用了结束图标，例如：

inputLayout.endIconMode == END_ICON_CLEAR_TEXT

问题是，如果你定义一个 focusListener 如下：

inputLayout.editText?.setOnFocusChangeListener { view, hasFocus -> ...}

并导航到其中包含此 textInputLayout 的屏幕，其中包含一些已填充的文本，如下图所示

您会注意到 endIcon 没有显示，但如果您点击它应该在的位置，它就会起作用。

即使通过使其可见来确保它应该显示

inputLayout.isEndIconVisible = 

也无济于事。通过调试，您可以看到您点击了具有真实值的

public void setEndIconVisible(boolean visible)

，但仍然没有使图标可见。

我找到了一个解决方案，我已将其作为答案发布。

Answer 1

问题是

ClearTextEndIconDelegate

有一个默认的

OnFocusChangeListener

，当您单击 editText 时，它会运行一个动画，通过它，私有/内部

endIconView(which holds the endIconDrawable)

的 alpha 值从 0 更改为 1。当您覆盖并设置时您自己的

OnFocusChangeListener

实际上放弃了此过程并设置

inputLayout.isEndIconVisible = true

启用视图，但您仍然看不到它。我没有找到任何方法来访问父视图并更改 Alpha。 实际上你可以通过做类似的事情

(((inputLayout.getChildAt(0) as FrameLayout).getChildAt(2) as LinearLayout).getChildAt(1) as FrameLayout).getChildAt(0).alpha = 1f

看看下面的图片，你就会明白我是如何完成上面的事情的：

但这不是一个很好的解决方案，如果视图的层次结构发生变化，它将不再起作用。

终极解决方案

我带来的是在我的

OnFocusChangeListener

中调用原始的

OnFocusChangeListener

，例如：

val originalListener = inputLayout.editText?.onFocusChangeListener
inputLayout.editText?.setOnFocusChangeListener { view, hasFocus ->
     originalListener?.onFocusChange(view, hasFocus)

     // do your thing here
}

Answer 2

对于这种情况，最好为结束图标设置自定义模式

    textInputLayout.endIconMode = TextInputLayout.END_ICON_CUSTOM // may be set in xml 
    textInputLayout.setEndIconDrawable(R.drawable.your_icon)
    textInputLayout.setEndIconOnClickListener {
        textInputEditText.text?.clear()
    }

然后添加您的自定义 OnFocusChangeListener：

    inputLayout.editText?.setOnFocusChangeListener { view, hasFocus ->
        textInputLayout.isEndIconVisible = hasFocus

     // add your code here
    }

Answer 3

对我来说，所有解决方案都不起作用，并且结束图标不可见，因为 alpha 设置为 0。 所以我决定在 TextInputEditText 中手动设置可绘制结束。

// First, set the endIconMode to None and set the click listener to clear the text
testInputLayout.endIconMode = TextInputLayout.END_ICON_NONE
testInputLayout.setEndIconOnClickListener {
    binding.customTextInput.editText?.text?.clear()
}

// Inside the custom focusChangeListener, show/hide the drawable end
textInputLayout.editText?.setOnFocusChangeListener { _, hasFocus ->
    // This is required so that the clear text click action can be handled
    binding.customTextInput.isEndIconVisible = hasFocus

    if (hasFocus) {
        // Display Drawable end
        textInputLayout.editText?.setCompoundDrawablesWithIntrinsicBounds(null, null, ContextCompat.getDrawable(context, R.drawable.ic_clear), null)
    } else {
        // Hide Drawable end
        textInputLayout.editText?.setCompoundDrawablesWithIntrinsicBounds(null, null, null, null)
    }
    // Do what you want
}

Answer 4

TextInputLayout 的文本观察器检查视图是否具有焦点以及其 EditText 中是否有任何文本，并设置结束图标的可见性。也许，它将结束图标的可见性设置为 Visibility.GONE，因为即使其基础 EditText 中有任何文本，它也没有焦点。因此 TextInputLayout 也需要获得焦点。所以下面的代码对我有用

inputLayout.requestFocus()
inputLayout.edittext.setText(YOUR_TEXT)
inputLayout.edittext.setSelection(YOUR_TEXT_LENGTH)

Answer 5

延伸到阿米尔的答案

在 Pixel 5 API 32 设备上运行，targetSdkVersion 为 31。 TextInputEditText 的子级如下所示：

因此我们可以使用以下代码来设置此视图的 alpha：

id_of_text_input_layout.findViewById<View>(R.id.text_input_end_icon)?.alpha = 1f

Answer 6

在尝试了此线程中的解决方案并发现它们在我的情况下不起作用（

com.google.android.material.textfield.TextInputLayout

中的“清晰文本图标”并不总是显示，即使使用 alpha 0），我最终实现了“清晰文本图标”文本图标”从头开始，即：

1. 将带有我的“明文图标”的

   ImageView

   添加到

   TextInputLayout

   的父ViewGroup
2. 将

   onClickListener

   附加到

   ImageView

   并将文本清除逻辑放在那里
3. 将

   onTextChanged

   和

   onFocusChange

   监听器附加到我的

   EditText

   以触发

   ImageView

   的可见性更改。
4. 通过将其 alpha 从 0 动画到 1 并在最后将其可见性设置为

   ImageView

   ，使

   View.VISIBLE

   可见。要使其不可见，请执行相反的操作，即。将其 alpha 从 1 动画到 0，并在最后将其可见性设置为

   View.GONE

   。奇怪的是，当只是在

   GONE

   和

   VISIBLE

   之间切换可见性时，

   ImageView

   并不总是显示。
5. 当

   ImageView

   显示时，给

   TextInputLayout

   添加endPadding，这样

   EditText

   中的文字就不会显示在

   ImageView

下方