• 【Android


    TextInputLayout是Android 5.0新特性——Material Design中的一个布局控件,主要用来嵌套EditText,实现数据输入时的一些效果,如:

    • 当输入框获取焦点时,输入提示语会动画移动到输入框上方;
    • 当输入框失去焦点时,如果输入框中没有文本,则提示语动画移动回到输入框中;
    • 当输入不合规范时,会在输入框下方显示错误提示语;
    • 当输入的是密码时,可以选择是否显示“显示密码”的按钮以及按钮的图案;
    • 可以显示输入框中当前文本的长度和要求的长度,等。

    需要特别注意的是,TextInputLayout作为一个布局控件,不能独立存在,必须嵌套在EditText或TextInputEditText外层。

    和其他MD控件一样,使用TextInputLayout之前必须在gradle文件中声明依赖:

    compile 'com.android.support:design:25.0.0'


    1、TextInputLayout的属性:

            app:passwordToggleEnabled:是否显示可以查看密码的Toggle按钮
            app:passwordToggleDrawable:查看密码的Toggle按钮的图片
            注:只有当包裹的EditText或TextInputEditText的InputType是密码格式时才会显示这个图标
            app:counterEnabled:是否显示文本长度计数器
            app:counterMaxLength:文本长度计数器的最大长度
            注:文本长度计数器就是在输入框的右下角显示“X/Y”字样,X表示当前输入框中的文本长度,Y表示规定的输入长度
                如果用户输入的长度超过Y,则文本计数器中的文本会变色提示

    2、布局代码示例:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/activity_main"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical">
    
        <!-- 使用TextInputLayout包裹EditText -->
        <android.support.design.widget.TextInputLayout
            android:id="@+id/textinputlayout"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            app:counterEnabled="true"
            app:counterMaxLength="6"
            app:passwordToggleDrawable="@mipmap/ic_launcher"
            app:passwordToggleEnabled="true">
    
            <!-- 这里的TextInputEditText可以使用EditText代替 -->
            <android.support.design.widget.TextInputEditText
                android:id="@+id/edittext"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                android:inputType="textPassword" />
        </android.support.design.widget.TextInputLayout>
    
    </LinearLayout>

    运行结果如下图:

    3、错误提示:

    TextInputLayout支持错误提示,即当经过判断,当前输入的文本不符合要求时,就会在输入框下方显示一行提示,提示输入错误。通过调用TextInputLayout对象的setErrorEnabled()、setError()方法可以实现这一功能。具体代码如下:

            // 是否可以弹出错误提示语
            til.setErrorEnabled(true);
            // 获取TextInputLayout中包裹的EditText
            EditText et = til.getEditText();
            // 当EditText中的文本发生变化时处理TextInputLayout的错误提示语及其显隐
            et.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) {
                    try {
                        if ("".equals(s + "")) {
                            // 设置错误提示语为null,即不显示错误提示语
                            til.setError(null);
                        } else if (s.length() > 6) {
                            // 如果输入长度超过6位,则显示错误提示
                            til.setError("密码长度超过上限!");
                        } else {
                            Integer.parseInt(s + "");
                            til.setError(null);
                        }
                    } catch (Exception e) {
                        // 设置错误提示语为具体的文本
                        til.setError("输入内容不是数字!");
                    }
                }
    
                @Override
                public void afterTextChanged(Editable s) {
                }
            });

    演示结果如图所示:

    以上就是对TextInputLayout的基本用法的介绍,下面贴出码云中的源码,供大家参考。

    DEMO地址

  • 相关阅读:
    MVVM教程[资源+分析]
    WPF 多点触摸开发[1]:Windows 7 安装多点触屏模拟器
    wpf 打印 之PirintVisual
    WPF:PrintVisual的问题
    几个漂亮的Button的CSS
    很不错的后台界面收集[提供下载]
    网页刷新方法集合
    JS各种各样的拖动效果
    CSS+DIV(盒子)
    网页刷新方法集合
  • 原文地址:https://www.cnblogs.com/itgungnir/p/6210781.html
Copyright © 2020-2023  润新知