揭秘 Android TextInputLayout：从源码深度剖析其使用原理
一、引言
在 Android 应用开发中，用户输入是一个至关重要的交互环节。良好的输入体验不仅能提升用户满意度，还能增强应用的易用性。Android 提供了一系列用于处理用户输入的组件，其中 TextInputLayout 是一个非常实用且强大的控件。它为 EditText 提供了丰富的功能增强，如浮动标签、错误提示、字符计数等。本文将从源码层面深入剖析 TextInputLayout 的使用原理，带你了解其背后的工作机制。
二、TextInputLayout 概述
2.1 什么是 TextInputLayout
TextInputLayout 是 Android Design Support Library 中的一个布局组件，它继承自 LinearLayout。其主要作用是包裹 EditText 或其子类，为输入框提供额外的视觉效果和交互功能。例如，当用户输入内容时，输入框的提示文本会以浮动标签的形式显示在输入框上方，这样既不影响用户输入，又能持续提供提示信息。
2.2 基本使用示例
以下是一个简单的 TextInputLayout 使用示例：
xml
<com.google.android.material.textfield.TextInputLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="Username">
<com.google.android.material.textfield.TextInputEditText
android:layout_width="match_parent"
android:layout_height="wrap_content" />
</com.google.android.material.textfield.TextInputLayout>在这个示例中，TextInputLayout 包裹了一个 TextInputEditText，并设置了提示文本为 "Username"。当用户点击输入框时，"Username" 会以浮动标签的形式显示在输入框上方。
三、TextInputLayout 的初始化过程
3.1 构造函数
TextInputLayout 有多个构造函数，我们主要分析包含 AttributeSet 和 defStyleAttr 参数的构造函数，因为它是在 XML 布局中使用时调用的构造函数。
java
public TextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
// 调用父类的构造函数进行初始化
super(context, attrs, defStyleAttr);
// 从属性集中获取自定义属性
final TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.TextInputLayout, defStyleAttr,
R.style.Widget_MaterialComponents_TextInputLayout_OutlinedBox);
// 获取提示文本
mHint = a.getString(R.styleable.TextInputLayout_android_hint);
// 获取是否启用浮动标签的属性
mHintEnabled = a.getBoolean(R.styleable.TextInputLayout_hintEnabled, true);
// 获取错误提示文本
mError = a.getString(R.styleable.TextInputLayout_error);
// 获取是否启用字符计数的属性
mCounterEnabled = a.getBoolean(R.styleable.TextInputLayout_counterEnabled, false);
// 获取最大字符数
mCounterMaxLength = a.getInt(R.styleable.TextInputLayout_counterMaxLength, -1);
// 回收 TypedArray 以避免内存泄漏
a.recycle();
// 初始化内部状态和视图
init();
}在这个构造函数中，首先调用父类的构造函数进行基本的初始化。然后通过 TypedArray 从 XML 属性集中获取自定义属性，如提示文本、是否启用浮动标签、错误提示文本等。最后调用 init 方法进行内部状态和视图的初始化。
3.2 init 方法
java
private void init() {
// 设置布局方向为垂直
setOrientation(VERTICAL);
// 创建浮动标签视图
mHintView = new FloatingLabel(this, getContext());
// 设置浮动标签的初始状态
mHintView.setHintEnabled(mHintEnabled);
mHintView.setHint(mHint);
// 创建错误提示视图
mErrorView = new AppCompatTextView(getContext());
mErrorView.setVisibility(GONE);
mErrorView.setTextAppearance(getContext(), R.style.TextAppearance_MaterialComponents_Caption_Error);
// 创建字符计数视图
mCounterView = new AppCompatTextView(getContext());
mCounterView.setVisibility(GONE);
mCounterView.setTextAppearance(getContext(), R.style.TextAppearance_MaterialComponents_Caption);
// 添加浮动标签视图
addView(mHintView, 0);
// 添加错误提示视图
addView(mErrorView);
// 添加字符计数视图
addView(mCounterView);
}init 方法主要完成了内部视图的创建和添加。首先将布局方向设置为垂直，然后依次创建浮动标签视图 mHintView、错误提示视图 mErrorView 和字符计数视图 mCounterView，并设置它们的初始状态。最后将这些视图添加到 TextInputLayout 中。
四、TextInputLayout 与 EditText 的关联
4.1 查找子 EditText
在 TextInputLayout 中，需要找到包裹的 EditText 以进行后续的交互和处理。这通常在 onFinishInflate 方法中完成。
java
@Override
protected void onFinishInflate() {
super.onFinishInflate();
// 查找子 EditText
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
if (child instanceof EditText) {
mEditText = (EditText) child;
// 关联 EditText
setupEditText();
break;
}
}
// 如果没有找到 EditText，抛出异常
if (mEditText == null) {
throw new IllegalArgumentException("TextInputLayout must have a child EditText");
}
}onFinishInflate 方法在布局文件解析完成后调用。它会遍历 TextInputLayout 的所有子视图，找到第一个 EditText 并将其赋值给 mEditText。然后调用 setupEditText 方法进行关联设置。如果没有找到 EditText，则会抛出异常。
4.2 setupEditText 方法
java
private void setupEditText() {
// 设置 EditText 的提示文本为 null，因为提示文本由 TextInputLayout 处理
mEditText.setHint(null);
// 添加文本变化监听器
mEditText.addTextChangedListener(new TextWatcher() {
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
// 文本变化前的处理
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
// 文本变化时的处理
updateLabelState(true);
if (mCounterEnabled) {
updateCounter(s.length());
}
}
@Override
public void afterTextChanged(Editable s) {
// 文本变化后的处理
}
});
// 添加焦点变化监听器
mEditText.setOnFocusChangeListener(new OnFocusChangeListener() {
@Override
public void onFocusChange(View v, boolean hasFocus) {
// 焦点变化时的处理
updateLabelState(true);
}
});
// 初始化浮动标签状态
updateLabelState(false);
}setupEditText 方法主要完成了 EditText 的一些关联设置。首先将 EditText 的提示文本设置为 null，因为提示文本由 TextInputLayout 负责处理。然后为 EditText 添加了文本变化监听器和焦点变化监听器，当文本发生变化或焦点改变时，会调用 updateLabelState 方法更新浮动标签的状态。如果启用了字符计数，还会调用 updateCounter 方法更新字符计数。最后，调用 updateLabelState 方法初始化浮动标签的状态。
五、浮动标签的实现原理
5.1 浮动标签的状态管理
浮动标签有两种状态：正常状态和浮动状态。在正常状态下，提示文本显示在输入框内；在浮动状态下，提示文本以浮动标签的形式显示在输入框上方。updateLabelState 方法负责管理浮动标签的状态。
java
private void updateLabelState(boolean animate) {
final boolean isFocused = mEditText.hasFocus();
final boolean isEmpty = TextUtils.isEmpty(mEditText.getText());
final boolean shouldBeFloating =!isEmpty || isFocused;
if (mHintEnabled) {
if (shouldBeFloating) {
if (!mHintView.isFloating()) {
mHintView.setFloating(true, animate);
}
} else {
if (mHintView.isFloating()) {
mHintView.setFloating(false, animate);
}
}
}
}updateLabelState 方法首先获取 EditText 的焦点状态和文本是否为空的状态。然后根据这两个状态判断浮动标签是否应该处于浮动状态。如果启用了浮动标签功能，并且根据判断结果需要改变浮动标签的状态，则调用 mHintView.setFloating 方法进行状态切换。
5.2 FloatingLabel 类
FloatingLabel 类负责实现浮动标签的具体逻辑，包括动画效果和状态管理。
java
private static class FloatingLabel extends AppCompatTextView {
private boolean mIsFloating;
private ValueAnimator mAnimator;
public FloatingLabel(TextInputLayout parent, Context context) {
super(context);
// 设置文本颜色和大小
setTextColor(ContextCompat.getColor(context, R.color.material_on_surface_emphasis_medium));
setTextSize(TypedValue.COMPLEX_UNIT_SP, 12);
// 设置初始可见性为 GONE
setVisibility(GONE);
}
public void setFloating(boolean floating, boolean animate) {
if (mIsFloating == floating) {
return;
}
mIsFloating = floating;
if (animate) {
if (mAnimator != null && mAnimator.isRunning()) {
mAnimator.cancel();
}
mAnimator = ValueAnimator.ofFloat(mIsFloating? 0f : 1f, mIsFloating? 1f : 0f);
mAnimator.addUpdateListener(new ValueAnimator.AnimatorUpdateListener() {
@Override
public void onAnimationUpdate(ValueAnimator animation) {
final float fraction = animation.getAnimatedFraction();
// 根据动画进度更新视图的透明度和位置
setAlpha(fraction);
setTranslationY(-fraction * getHeight());
}
});
mAnimator.setDuration(200);
mAnimator.start();
} else {
setAlpha(mIsFloating? 1f : 0f);
setTranslationY(mIsFloating? -getHeight() : 0);
}
setVisibility(mIsFloating? VISIBLE : GONE);
}
public boolean isFloating() {
return mIsFloating;
}
}FloatingLabel 类继承自 AppCompatTextView，它有一个布尔变量 mIsFloating 用于记录浮动标签的状态。setFloating 方法用于切换浮动标签的状态。如果需要动画效果，则创建一个 ValueAnimator 来实现透明度和位置的渐变动画；如果不需要动画效果，则直接设置透明度和位置。最后根据状态设置视图的可见性。
六、错误提示的实现原理
6.1 设置错误提示文本
TextInputLayout 提供了 setError 方法来设置错误提示文本。
java
public void setError(@Nullable CharSequence error) {
mError = error;
if (!TextUtils.isEmpty(error)) {
// 显示错误提示视图
mErrorView.setText(error);
mErrorView.setVisibility(VISIBLE);
// 设置 EditText 的背景为错误状态
setErrorEnabled(true);
} else {
// 隐藏错误提示视图
mErrorView.setVisibility(GONE);
// 设置 EditText 的背景为正常状态
setErrorEnabled(false);
}
}setError 方法接受一个字符序列作为错误提示文本。如果文本不为空，则将其设置到 mErrorView 中并显示该视图，同时将 EditText 的背景设置为错误状态；如果文本为空，则隐藏 mErrorView 并将 EditText 的背景设置为正常状态。
6.2 错误状态的视觉效果
setErrorEnabled 方法负责设置 EditText 的错误状态视觉效果。
java
private void setErrorEnabled(boolean enabled) {
if (mErrorEnabled == enabled) {
return;
}
mErrorEnabled = enabled;
if (mEditText instanceof TextInputEditText) {
((TextInputEditText) mEditText).setErrorEnabled(enabled);
}
// 更新背景颜色和边框颜色
updateBoxBackgroundColor();
updateBoxStrokeColor();
}setErrorEnabled 方法根据传入的布尔值更新 mErrorEnabled 状态。如果 EditText 是 TextInputEditText 类型，则调用其 setErrorEnabled 方法设置错误状态。最后调用 updateBoxBackgroundColor 和 updateBoxStrokeColor 方法更新背景颜色和边框颜色，以显示错误状态的视觉效果。
七、字符计数的实现原理
7.1 启用字符计数
通过 setCounterEnabled 方法可以启用或禁用字符计数功能。
java
public void setCounterEnabled(boolean enabled) {
if (mCounterEnabled == enabled) {
return;
}
mCounterEnabled = enabled;
mCounterView.setVisibility(enabled? VISIBLE : GONE);
if (enabled) {
// 初始化字符计数显示
updateCounter(mEditText.getText().length());
}
}setCounterEnabled 方法根据传入的布尔值更新 mCounterEnabled 状态，并设置 mCounterView 的可见性。如果启用了字符计数功能，则调用 updateCounter 方法初始化字符计数显示。
7.2 更新字符计数
updateCounter 方法用于更新字符计数的显示。
java
private void updateCounter(int currentLength) {
if (mCounterMaxLength > 0) {
// 显示字符计数和最大字符数
mCounterView.setText(getResources().getString(R.string.text_input_counter_max_length,
currentLength, mCounterMaxLength));
} else {
// 只显示字符计数
mCounterView.setText(String.valueOf(currentLength));
}
}updateCounter 方法根据当前输入的字符长度和最大字符数更新 mCounterView 的文本显示。如果设置了最大字符数，则显示当前字符数和最大字符数的格式；否则只显示当前字符数。
八、TextInputLayout 的测量和布局
8.1 测量过程
TextInputLayout 的测量过程主要在 onMeasure 方法中完成。
java
@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
// 先测量子视图
measureChildren(widthMeasureSpec, heightMeasureSpec);
int width = 0;
int height = 0;
// 遍历子视图，计算最大宽度和总高度
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
if (child.getVisibility() != GONE) {
width = Math.max(width, child.getMeasuredWidth());
height += child.getMeasuredHeight();
}
}
// 考虑内边距
width += getPaddingLeft() + getPaddingRight();
height += getPaddingTop() + getPaddingBottom();
// 根据测量规格确定最终的宽度和高度
width = resolveSizeAndState(width, widthMeasureSpec, 0);
height = resolveSizeAndState(height, heightMeasureSpec, 0);
setMeasuredDimension(width, height);
}onMeasure 方法首先调用 measureChildren 方法测量所有子视图。然后遍历子视图，计算最大宽度和总高度。接着考虑内边距，将其加到宽度和高度上。最后使用 resolveSizeAndState 方法根据测量规格确定最终的宽度和高度，并调用 setMeasuredDimension 方法设置测量结果。
8.2 布局过程
TextInputLayout 的布局过程在 onLayout 方法中完成。
java
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
int childTop = getPaddingTop();
// 遍历子视图，进行布局
final int childCount = getChildCount();
for (int i = 0; i < childCount; i++) {
final View child = getChildAt(i);
if (child.getVisibility() != GONE) {
final int childLeft = getPaddingLeft();
final int childWidth = child.getMeasuredWidth();
final int childHeight = child.getMeasuredHeight();
child.layout(childLeft, childTop, childLeft + childWidth, childTop + childHeight);
childTop += childHeight;
}
}
}onLayout 方法首先初始化子视图的顶部位置为内边距的顶部值。然后遍历子视图，根据子视图的测量宽度和高度，以及当前的顶部位置进行布局。每布局一个子视图，就更新顶部位置，以便下一个子视图进行布局。
九、总结与展望
9.1 总结
通过对 TextInputLayout 源码的深入分析，我们了解到它是一个功能强大且灵活的布局组件。它通过包裹 EditText 为输入框提供了浮动标签、错误提示、字符计数等实用功能。其实现原理涉及到视图的初始化、状态管理、动画效果、测量和布局等多个方面。浮动标签通过状态管理和动画效果实现了平滑的显示和隐藏；错误提示通过设置错误文本和更新视觉效果来提醒用户输入错误；字符计数则根据输入长度动态更新显示。在测量和布局过程中，TextInputLayout 会考虑子视图的大小和内边距，确保布局的正确性。
9.2 展望
随着 Android 开发技术的不断发展，TextInputLayout 可能会有更多的改进和扩展。例如，可能会提供更多的自定义选项，让开发者可以更灵活地定制浮动标签的样式、错误提示的动画效果等。同时，也可能会进一步优化性能，减少内存占用和提高响应速度。此外，随着 Material Design 设计理念的不断更新，TextInputLayout 可能会融入更多新的设计元素和交互方式，为用户带来更好的输入体验。开发者在使用 TextInputLayout 时，也可以根据自己的需求进行扩展和定制，以满足不同应用场景的要求。总之，TextInputLayout 在未来的 Android 开发中仍将发挥重要的作用。