前言
TextInputLayout可以轻松与EditText结合实现一些炫酷的效果,例如一些常见的:
- Hint动画
- 错误提示
- 字数计数
基本使用
首先需要有一个布局:
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) {}
});
如果觉得我的文字对你有所帮助的话,欢迎关注我的公众号:
我的群欢迎大家进来探讨各种技术与非技术的话题,有兴趣的朋友们加我私人微信huannan88,我拉你进群交(♂)流(♀)。