转载 TextInputLayout

转载http://www.jianshu.com/p/9dc8d5762b7d

         

Material Design 官方文档 中的 Errors 一节里,使用的 TextInputLayout 的右下角有一个字数统计的功能,但是我在查看 TextInputLayout 的源码时发现,虽然它在 attrs.xml 里定义了相关属性,在代码中缺没有使用,所以我就把相关的代码都提取出来,单独创建了一个库。
这是文档中 TextInputLayout 的字数统计效果图:


未达到字数限制

达到字数限制

1.提取相关代码

首先从 sdk 的 sources 里,把 TextInputLayout 拷出来,根据提示与其相关的类有:


相关联的类

从 sdk/extras/android/support/design/libs 中将 android-support-design.jar 拷贝出来,修改拓展名为 .zip 并解压。
相关资源有:

attrs.xml :

<declare-styleable name="TextInputLayout">
    <attr name="hintTextAppearance" format="reference"/>
    <!-- The hint to display in the floating label -->
    <attr name="android:hint"/>
    <!-- Whether the layout is laid out as if an error will be displayed -->
    <attr name="errorEnabled" format="boolean"/>
    <!-- TextAppearance of any error message displayed -->
    <attr name="errorTextAppearance" format="reference"/>
    <!-- Whether the layout is laid out as if the character counter will be displayed -->
    <attr name="counterEnabled" format="boolean"/>
    <!-- The max length to display in the character counter -->
    <attr name="counterMaxLength" format="integer" />
    <!-- TextAppearance of the character counter -->
    <attr name="counterTextAppearance" format="reference"/>
    <!-- TextAppearance of the character counter when the text is longer than the max -->
    <attr name="counterOverflowTextAppearance" format="reference"/>
    <attr name="android:textColorHint"/>
    <!-- Whether to animate hint state changes. -->
    <attr name="hintAnimationEnabled" format="boolean"/>
</declare-styleable>

style.xml :

<style name="TextAppearance.Design.Counter" parent="TextAppearance.AppCompat.Caption"/>
<style name="TextAppearance.Design.Counter.Overflow" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">@color/design_textinput_error_color</item>
</style>
<style name="TextAppearance.Design.Error" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">@color/design_textinput_error_color</item>
</style>
<style name="TextAppearance.Design.Hint" parent="TextAppearance.AppCompat.Caption">
    <item name="android:textColor">?attr/colorControlActivated</item>
</style>

<style name="Widget.Design.TextInputLayout" parent="android:Widget">
    <item name="hintTextAppearance">@style/TextAppearance.Design.Hint</item>
    <item name="errorTextAppearance">@style/TextAppearance.Design.Error</item>
    <item name="counterTextAppearance">@style/TextAppearance.Design.Counter</item>
    <item name="counterOverflowTextAppearance">@style/TextAppearance.Design.Counter.Overflow</item>
</style>

colors.xml:

<color name="design_textinput_error_color">#FFDD2C00</color>

此时,项目终于不再报错了。

2. 思考

根据效果图中计数器的位置,我们可以知道是在与 mErrorView 同一横排的位置,所以在代码中追踪了一下 mErrorView 的创建过程。

代码中声明了一个 mErrorView 的成员变量,还有两个与其相关的属性。

private TextView mErrorView;
private boolean mErrorEnabled; // 是否显示错误提示
private int mErrorTextAppearance; // 错误提示的文字格式

接下去,我们在构造器中找到了:

// 获取 xml 里设置的属性值
mErrorTextAppearance = a.getResourceId(R.styleable.TextInputLayout_errorTextAppearance, 0);
final boolean errorEnabled = a.getBoolean(R.styleable.TextInputLayout_errorEnabled, false);

...

setErrorEnabled(errorEnabled);

我们再看一下 setErrorEnabled 方法:

public void setErrorEnabled(boolean enabled) {
    if (mErrorEnabled != enabled) {
        if (mErrorView != null) {
            ViewCompat.animate(mErrorView).cancel();
        }

        if (enabled) {
            // 创建 mErrorView,并进行相关设置
            mErrorView = new TextView(getContext());
            mErrorView.setTextAppearance(getContext(), mErrorTextAppearance);
            mErrorView.setVisibility(INVISIBLE);
            addView(mErrorView); // 添加到当前 textInputLayout 中

            if (mEditText != null) {
                // Add some start/end padding to the error so that it matches the EditText
                ViewCompat.setPaddingRelative(mErrorView, ViewCompat.getPaddingStart(mEditText),
                        0, ViewCompat.getPaddingEnd(mEditText), mEditText.getPaddingBottom());
            }
        } else {
            // 如果设置为不显示错误时,移除 mErrorView
            removeView(mErrorView);
            mErrorView = null;
        }
        mErrorEnabled = enabled;
    }
}

还有一个有参考价值的方法:

public void setError(@Nullable CharSequence error) {

    ...

    if (!TextUtils.isEmpty(error)) {

        ... 省略了动画效果设置

        // Set the EditText's background tint to the error color
        ViewCompat.setBackgroundTintList(mEditText,
                ColorStateList.valueOf(mErrorView.getCurrentTextColor()));
    } else {
        if (mErrorView.getVisibility() == VISIBLE) {

            ... 省略了动画效果设置

            // Restore the 'original' tint, using colorControlNormal and colorControlActivated
            final TintManager tintManager = TintManager.get(getContext());
            ViewCompat.setBackgroundTintList(mEditText,
                    tintManager.getTintList(R.drawable.abc_edit_text_material));
        }
    }
}

省略了对 mErrorView 显示和隐藏时动画效果的代码,剩下的 ViewCompat.setBackgroundTintList() 方法是对 editText 的那条底线的颜色设置。

2. 修改代码

在知道了 mErrorView 的创建流程,正式开始对代码动刀。

2.1 定义成员变量

由于 TextInputLayout 继承自 LinearLayout ,为了可以使自己定义的 mCounterView 与 mErrorView 保持在统一横排,且位于控件最右方,我在这里定义了一个 RelativeLayout,并将 mErrorView 也挪到相对布局中。

private RelativeLayout mBottomBar;
private TextView mCounterView;
private boolean mCounterEnabled;
private int mCounterMaxLength;

2.2 在构造器中添加

// 是否显示计数器
final boolean counterEnabled = a.getBoolean(R.styleable.TextInputLayout_counterEnabled, false);

// 最大字数长度限制
mCounterMaxLength = a.getInt(R.styleable.TextInputLayout_counterMaxLength, 0);

mTooltip = new RelativeLayout(context);
addView(mTooltip); // 将底部提示条添加到 TextInputLayout 中
setCounterEnabled(counterEnabled);

2.3 创建 setCounterEnabled 方法

public void setCounterEnabled(boolean enabled) {
    if (mCounterEnabled != enabled) {
        if (enabled) {
            mCounterView = new TextView(getContext());
            // 根据此时输入的文字的长度对字体格式进行设置,避免与setError产生冲突
            if (mEditText != null && mEditText.length() > mCounterMaxLength) {
                mCounterView.setTextAppearance(getContext(), mErrorTextAppearance);
            } else {
                mCounterView.setTextAppearance(getContext(), R.style.TextAppearance_Design_Counter);
            }
            // mCounterView.setVisibility(VISIBLE);
            RelativeLayout.LayoutParams params = new RelativeLayout.LayoutParams(
                    RelativeLayout.LayoutParams.WRAP_CONTENT, RelativeLayout.LayoutParams.WRAP_CONTENT);
            params.addRule(RelativeLayout.ALIGN_PARENT_RIGHT);
            params.addRule(RelativeLayout.CENTER_VERTICAL);
            mBottomBar.addView(mCounterView, params);

            if (mEditText != null) {
                // Add some start/end padding to the counter so that it matches the EditText
                ViewCompat.setPaddingRelative(mCounterView, ViewCompat.getPaddingStart(mEditText),
                        0, ViewCompat.getPaddingEnd(mEditText), mEditText.getPaddingBottom());
            } 
            mCounterView.setText(mResources.getString(R.string.counterMaxLength,
                        0, mCounterMaxLength));
        } else {
            mBottomBar.removeView(mCounterView);
            mCounterView = null;
        }
        mCounterEnabled = enabled;
    }
}

我仿照 setErrorEnabled 在自己创建的 setCounterEnabled 方法中完成了对 mCounterView 的创建,设置布局参数,设置初始文字等操作。

2.4 更新显示效果

在 TextInputLayout 中,对起内部的 mEditText 添加了一个 TextWatcher 监听,我在其中添加了 updateCounterView 方法

mEditText.addTextChangedListener(new TextWatcher() {

    @Override
    public void afterTextChanged(Editable s) {
        updateLabelVisibility(true);
        updateCounterText(s);
    }
    ... 
}

private void updateCounterText(Editable text) {
    if (mCounterView != null) {
        final int currentLength = text.length();

        //<string name="counterMaxLength">%1$d/%2$d</string>
        mCounterView.setText(mResources.getString(R.string.counterMaxLength,
                currentLength, mCounterMaxLength));

        // 如果超过最大限制,则将文字和底线变成红色
        if (currentLength == mCounterMaxLength + 1) {
            mCounterView.setTextAppearance(getContext(), mErrorTextAppearance);
            ViewCompat.setBackgroundTintList(mEditText,
                    ColorStateList.valueOf(mResources.getColor(R.color.design_textinput_error_color)));
        } else if (currentLength == mCounterMaxLength) {
            // 当字数从超出限制回到了允许的长度范围,则恢复默认颜色
            mCounterView.setTextAppearance(getContext(), R.style.TextAppearance_Design_Counter);
            // 当不显示 error 信息时,对底线颜色进行修改
            if (!mErrorEnabled) {
                ViewCompat.setBackgroundTintList(mEditText, mFocusedTextColor);
            }
        }
    }
}

为了避免重复设置,我这里根据判断临界值来设置当前状态下的显示颜色。

2.5 修改 setError

public void setError(@Nullable CharSequence error) {

    ...

    if (!TextUtils.isEmpty(error)) {

        ... 

    } else {
        if (mErrorView.getVisibility() == VISIBLE) {

            ... 省略了动画效果设置

            // 避免与计数器的效果冲突
            if (mEditText.length() > mCounterMaxLength) {
                return;
            }            

            final TintManager tintManager = TintManager.get(getContext());
            ViewCompat.setBackgroundTintList(mEditText,
                    tintManager.getTintList(R.drawable.abc_edit_text_material));
        }
    }
}

3. 总结

通过上面的修改,TextInputLayout已经具有了字数统计的功能,下面是效果图:


效果图
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Android TextInputLayout是一个支持Material Design风格的输入框容器,它可以用来包装任何EditText或EditText的子类,提供了一些功能,如错误提示、计数器、密码可见性切换等。 TextInputLayout的主要功能有: 1.错误提示:当用户输入无效数据时,可以显示错误消息。 2.计数器:可以显示已输入字符的数量和最大字符数量。 3.密码可见性切换:可以在明文和密码模式之间切换。 4.动画效果:包含了一些动画效果,如标签浮动和错误消息上移等。 使用TextInputLayout,需要在XML中将EditText包装在TextInputLayout中,并在TextInputLayout中设置相关属性。例如: ``` <com.google.android.material.textfield.TextInputLayout android:id="@+id/textInputLayout" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="Enter your name"> <com.google.android.material.textfield.TextInputEditText android:id="@+id/editText" android:layout_width="match_parent" android:layout_height="wrap_content"/> </com.google.android.material.textfield.TextInputLayout> ``` 在代码中,可以使用以下方法来设置错误消息、计数器等: ``` // 设置错误消息 textInputLayout.setError("Invalid input"); // 显示计数器 textInputLayout.setCounterEnabled(true); textInputLayout.setCounterMaxLength(50); // 密码可见性切换 textInputLayout.setEndIconMode(TextInputLayout.END_ICON_PASSWORD_TOGGLE); ``` 总之,TextInputLayout是一个非常有用的控件,可以提高Android应用程序的用户体验。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值