前言
TextInputLayout可以轻松与EditText结合实现一些炫酷的效果，例如一些常见的：
- Hint动画
- 错误提示
- 字数计数
基本使用
首先需要有一个布局：
<android.support.design.widget.TextInputLayout
android:id="@+id/til_input"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:hintAnimationEnabled="true">
<EditText
android:id="@+id/et_name"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:hint="请输入用户名"/>
</android.support.design.widget.TextInputLayout>
hintAnimationEnabled属性是设置是否开启Hint的动画。
需要注意的是，TextInputLayout必须包含一个EditText。
下面是一个基本的例子：
public class TextInputMainActivity extends AppCompatActivity {
private TextInputLayout til_input;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_text_input);
til_input = (TextInputLayout) findViewById(R.id.til_input);
til_input.getEditText().addTextChangedListener(new MaxTextTextWatcher(til_input, "字数不能大于6", 6));
//开启计数
til_input.setCounterEnabled(true);
til_input.setCounterMaxLength(6);
}
class MaxTextTextWatcher implements TextWatcher {
private TextInputLayout mTextInputLayout;
private String mErrorString;
private int maxTextCount;
public MaxTextTextWatcher(TextInputLayout textInputLayout, String errorString, int maxTextCount) {
mTextInputLayout = textInputLayout;
mErrorString = errorString;
this.maxTextCount = maxTextCount;
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {
}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {
}
@Override
public void afterTextChanged(Editable s) {
String str = mTextInputLayout.getEditText().getText().toString().trim();
if (!TextUtils.isEmpty(str)) {
if (str.length() > maxTextCount) {
//显示错误
//设置错误提示
mTextInputLayout.setError(mErrorString);
mTextInputLayout.setErrorEnabled(true);
} else {
//关闭错误
mTextInputLayout.setErrorEnabled(false);
}
}
}
}
}
在这个例子里面，我们利用了TextInputLayout的错误提示、字数统计功能，基本的使用都比较简单。
- 在TextInputLayout可以轻松地通过getEditText方法找到它所包裹的EditText。、
- 在显示错误的时候，需要先设置错误的提示，每次显示的时候都要设置。
- 大部分属性都可以通过xml的方式设置，这里通过代码动态设置只是为了方便演示。
TextInputLayout源码分析
作为一个父容器，TextInputLayout继承了线性布局：
public class TextInputLayout extends LinearLayout {
}
下面来看看它的构造函数：
public TextInputLayout(Context context, AttributeSet attrs, int defStyleAttr) {
//检查主题是不是AppCompatTheme
ThemeUtils.checkAppCompatTheme(context);
//设置线性布局的布局方向
setOrientation(VERTICAL);
setWillNotDraw(false);
setAddStatesFromChildren(true);
//添加输入框的帧布局
mInputFrame = new FrameLayout(context);
mInputFrame.setAddStatesFromChildren(true);
addView(mInputFrame);
//Hint的动画相关，包括字体大小以及颜色的变化动画
mCollapsingTextHelper.setTextSizeInterpolator(AnimationUtils.FAST_OUT_SLOW_IN_INTERPOLATOR);
mCollapsingTextHelper.setPositionInterpolator(new AccelerateInterpolator());
mCollapsingTextHelper.setCollapsedTextGravity(Gravity.TOP | GravityCompat.START);
mHintExpanded = mCollapsingTextHelper.getExpansionFraction() == 1f;
//初始化一些参数
}
其中，我们关心一下 颜色渐变的核心代码：
/**
* Blend {@code color1} and {@code color2} using the given ratio.
*
* @param ratio of which to blend. 0.0 will return {@code color1}, 0.5 will give an even blend,
* 1.0 will return {@code color2}.
*/
private static int blendColors(int color1, int color2, float ratio) {
final float inverseRatio = 1f - ratio;
float a = (Color.alpha(color1) * inverseRatio) + (Color.alpha(color2) * ratio);
float r = (Color.red(color1) * inverseRatio) + (Color.red(color2) * ratio);
float g = (Color.green(color1) * inverseRatio) + (Color.green(color2) * ratio);
float b = (Color.blue(color1) * inverseRatio) + (Color.blue(color2) * ratio);
return Color.argb((int) a, (int) r, (int) g, (int) b);
}
这个方法就是根据ratio，返回一个颜色值。如果是0，那么返回color1，如果是1，那么返回color2。这是一个线性变化的过程。
重写addView了，如果是EditText，那么就需要手动生成一个帧布局：
@Override
public void addView(View child, int index, final ViewGroup.LayoutParams params) {
if (child instanceof EditText) {
mInputFrame.addView(child, new FrameLayout.LayoutParams(params));
// Now use the EditText's LayoutParams as our own and update them to make enough space
// for the label
mInputFrame.setLayoutParams(params);
updateInputLayoutMargins();
setEditText((EditText) child);
} else {
// Carry on adding the View...
super.addView(child, index, params);
}
}
另外TextInputLayout是通过两种方式添加文字的，一种是直接利用画笔画布绘制，一种是直接new一个TextView，这也是我们自定义View的基本功。
TextInputLayout内部就已经给EditText添加了TextWatcher，用于字数的处理：
mEditText.addTextChangedListener(new TextWatcher() {
@Override
public void afterTextChanged(Editable s) {
updateLabelState(true);
if (mCounterEnabled) {
updateCounter(s.length());
}
}
@Override
public void beforeTextChanged(CharSequence s, int start, int count, int after) {}
@Override
public void onTextChanged(CharSequence s, int start, int before, int count) {}
});
如果觉得我的文字对你有所帮助的话，欢迎关注我的公众号：
公众号：Android开发进阶
我的群欢迎大家进来探讨各种技术与非技术的话题，有兴趣的朋友们加我私人微信huannan88，我拉你进群交（♂）流（♀）。
