Android UI进阶之旅5--Material Design之TextInputLayout

前言

TextInputLayout可以轻松与EditText结合实现一些炫酷的效果,例如一些常见的:

  1. Hint动画
  2. 错误提示
  3. 字数计数

基本使用

首先需要有一个布局:



    


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的错误提示、字数统计功能,基本的使用都比较简单。

  1. 在TextInputLayout可以轻松地通过getEditText方法找到它所包裹的EditText。、
  2. 在显示错误的时候,需要先设置错误的提示,每次显示的时候都要设置。
  3. 大部分属性都可以通过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 UI进阶之旅5--Material Design之TextInputLayout_第1张图片
公众号:Android开发进阶

我的群欢迎大家进来探讨各种技术与非技术的话题,有兴趣的朋友们加我私人微信huannan88,我拉你进群交(♂)流(♀)

你可能感兴趣的:(Android UI进阶之旅5--Material Design之TextInputLayout)