AutoCompleteTextView中眼睛指示器与提示错误图标重叠问题

我之前也踩过这个烦人的坑！当给AutoCompleteTextView调用setError()或者设置error属性时，密码可见性切换的眼睛指示器经常会和错误提示的感叹号图标挤在一起，界面看起来乱糟糟的。下面分享几个亲测有效的解决方案：

方案1：动态调整内边距（简单快速） #

当显示错误提示时，给控件右侧增加足够的内边距，让错误图标避开眼睛图标。可以在设置error前后手动调整：

// 设置错误提示前，调整右侧内边距（数值根据图标大小自行调整，比如转成px后设为48）
autoCompleteTextView.setPadding(
    autoCompleteTextView.getPaddingLeft(),
    autoCompleteTextView.getPaddingTop(),
    getResources().getDimensionPixelSize(R.dimen.error_icon_padding),
    autoCompleteTextView.getPaddingBottom()
);
autoCompleteTextView.setError("输入格式不正确");

// 清除错误时，恢复原始内边距
autoCompleteTextView.setError(null);
autoCompleteTextView.setPadding(
    autoCompleteTextView.getPaddingLeft(),
    autoCompleteTextView.getPaddingTop(),
    getResources().getDimensionPixelSize(R.dimen.default_right_padding),
    autoCompleteTextView.getPaddingBottom()
);

Kotlin版本：

// 设置错误时
autoCompleteTextView.setPadding(
    autoCompleteTextView.paddingLeft,
    autoCompleteTextView.paddingTop,
    resources.getDimensionPixelSize(R.dimen.error_icon_padding),
    autoCompleteTextView.paddingBottom
)
autoCompleteTextView.error = "输入格式不正确"

// 清除错误时
autoCompleteTextView.error = null
autoCompleteTextView.setPadding(
    autoCompleteTextView.paddingLeft,
    autoCompleteTextView.paddingTop,
    resources.getDimensionPixelSize(R.dimen.default_right_padding),
    autoCompleteTextView.paddingBottom
)

方案2：自定义AutoCompleteTextView（一劳永逸） #

如果项目里多处用到这个控件，自定义一个控件重写setError()方法，自动处理内边距会更省心：

public class CustomAutoCompleteTextView extends AutoCompleteTextView {
    private int originalRightPadding;

    public CustomAutoCompleteTextView(Context context) {
        super(context);
        init();
    }

    public CustomAutoCompleteTextView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }

    public CustomAutoCompleteTextView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }

    private void init() {
        // 保存控件原始的右侧内边距
        originalRightPadding = getPaddingRight();
    }

    @Override
    public void setError(CharSequence error, Drawable icon) {
        super.setError(error, icon);
        if (error != null) {
            // 显示错误时，追加右侧内边距
            int errorPadding = getResources().getDimensionPixelSize(R.dimen.error_icon_padding);
            setPadding(getPaddingLeft(), getPaddingTop(), originalRightPadding + errorPadding, getPaddingBottom());
        } else {
            // 清除错误时，恢复原始内边距
            setPadding(getPaddingLeft(), getPaddingTop(), originalRightPadding, getPaddingBottom());
        }
    }
}

布局中直接使用自定义控件：

<com.yourpackage.CustomAutoCompleteTextView
    android:id="@+id/autoCompleteTextView"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:inputType="textPassword|textVisiblePassword" />

方案3：手动调整错误图标位置（进阶） #

如果不想改变控件内边距，也可以重写onDraw()方法，把错误图标往左偏移，避开眼睛图标：

@Override
protected void onDraw(Canvas canvas) {
    super.onDraw(canvas);
    Drawable errorIcon = getError();
    // 仅当错误图标存在且当前是密码输入状态时调整
    if (errorIcon != null && getInputType() == (InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD)) {
        // 眼睛图标宽度（根据实际图标大小调整）
        int eyeIconWidth = getResources().getDimensionPixelSize(R.dimen.eye_icon_width);
        // 错误图标左移对应距离
        errorIcon.setBounds(
            errorIcon.getBounds().left - eyeIconWidth,
            errorIcon.getBounds().top,
            errorIcon.getBounds().right - eyeIconWidth,
            errorIcon.getBounds().bottom
        );
    }
}

这个方法需要准确知道眼睛图标的宽度，适配性稍弱，但适合不想改变控件布局的场景。

内容的提问来源于stack exchange，提问作者Malwinder Singh