TextInputLayout和TextInputEditText使用

TextInputLayout是2015 I/O大会谷歌推出了 Android Design Support Library，主要是配合edittext（它的子类）的使用，当edittext有输入内容时，hint会自动消失，而配合TextInputLayout使用时，hint可以在edittext上方显示，当然还有其他一些功能可以使用，不废话，下面是关于TextInputLayout的使用。

先上效果图

                                                             

关于TextInputLayout一些属性

属性	说明
app:Theme	设置下划线或其他的颜色属性
android.support.design:counterEnabled	是否显示计数器
android.support.design:counterMaxLength	设置计数器的最大值,与counterEnabled同时使用
android.support.design:counterTextAppearance	计数器的字体样式
android.support.design:counterOverflowTextAppearance	输入字符大于我们限定个数字符时的字体样式
android.support.design:errorEnabled	是否显示错误信息
android.support.design:errorTextAppearance	错误信息的字体样式
android.support.design:hintAnimationEnabled	是否显示hint的动画,默认true
android.support.design:hintEnabled	是否使用hint属性,默认true
android.support.design:hintTextAppearance	设置hint的文字样式(指运行动画效果之后的样式)
android.support.design:passwordToggleDrawable	设置密码开关Drawable图片,于passwordToggleEnabled同时使用
android.support.design:passwordToggleEnabled	是否显示密码开关图片,需要EditText设置inputType
android.support.design:passwordToggleTint	设置密码开关图片颜色
android.support.design:passwordToggleTintMode	设置密码开关图片(混合颜色模式),与passwordToggleTint同时使用

TextInputLayout属于Materia Design库

首先要加上下面的依赖

compile 'com.android.support:design:26.0.0-alpha1'
compile 'com.android.support:appcompat-v7:25.3.1'

下面是layout

<android.support.design.widget.TextInputLayout
    android:id="@+id/til_account"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">
    <EditText
        android:id="@+id/et_account"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="用户名"/>
android.support.design.widget.TextInputLayout>
<android.support.design.widget.TextInputLayout
    app:passwordToggleEnabled="true"
    app:passwordToggleTint="@color/colorAccent"
    app:counterEnabled="true"
    app:counterMaxLength="15"
    app:counterTextAppearance="@style/counter_style"
    app:errorEnabled="true"
    app:errorTextAppearance="@style/error_style"
    app:hintAnimationEnabled="true"
    app:hintTextAppearance="@style/hint_style"
    android:id="@+id/til_password"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_margin="10dp">
    <android.support.design.widget.TextInputEditText
        android:id="@+id/tiet_password"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:hint="密码"
        android:inputType="textPassword"/>

android.support.design.widget.TextInputLayout>
<Button
    android:id="@+id/btn_login"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_marginLeft="10dp"
    android:layout_margin="10dp"
    android:text="登录"/>

上面布局中有两个TextInputLayout，一个包裹了TextInputEditText另一个包裹了一个EditText同样可以使用

下面是布局中一些字体的style

<style name="counter_style">
    <item name="android:textSize">14spitem>
    <item name="android:textColor">@color/colorAccentitem>
style>

<style name="error_style">
    <item name="android:textSize">12spitem>
    <item name="android:textColor">@color/colorAccentitem>
style>

<style name="hint_style">
    <item name="android:textSize">12spitem>
    <item name="android:textColor">@color/colorAccentitem>
style>

下面是关于是相关代码

/**
 * des:
 * 

 * Created by Alex on 2017/11/14.
 */

public class InputTypeEdittextAtivity extends AppCompatActivity implements View.OnClickListener {
    private EditText name;
    private TextInputEditText password;
    private Button btn;
    private TextInputLayout tilName, tilPassword;
    @Override
    public void onCreate(@Nullable Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_input_edittext);
        name = (EditText) findViewById(R.id.et_account);
        password = (TextInputEditText) findViewById(R.id.tiet_password);
        btn = (Button) findViewById(R.id.btn_login);
        tilName = (TextInputLayout) findViewById(R.id.til_account);
        tilPassword = (TextInputLayout) findViewById(R.id.til_password);
        btn.setOnClickListener(this);
        addTextChangedListener();

    }

    /** 
     * 关于edittext的监听
     * 可以动态的提示错误信息
     */

    private void addTextChangedListener() {
        name.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) {
                //validateAccount(tilName.getEditText().getText().toString());
            }
            @Override
            public void afterTextChanged(Editable s) {
                validateAccount(tilName.getEditText().getText().toString());
            }
        });

        password.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) {
                //validatePassword(tilPassword.getEditText().getText().toString());
            }

            @Override
            public void afterTextChanged(Editable s) {
                validatePassword(tilPassword.getEditText().getText().toString());
            }
        });

    }


    /**
     * 验证用户名
     *
     * @param account
     * @return
     */
    private boolean validateAccount(String account) {
        if (StringUtils.isEmpty(account)) {
            showError(tilName, "用户名不能为空");
            return false;
        }
        return true;
    }

    /**
     * 验证密码
     *
     * @param password
     * @return
     */
    private boolean validatePassword(String password) {
        if (StringUtils.isEmpty(password)) {
            showError(tilPassword, "密码不能为空");
            return false;
        }

        if (password.length() < 6 || password.length() > 15) {
            showError(tilPassword, "密码长度为6-15位");
            return false;
        }

        return true;
    }


    /**
     * 显示对应的错误提示，并获取焦点
     *
     * @param textInputLayout
     * @param error
     */
    private void showError(TextInputLayout textInputLayout, String error) {
        textInputLayout.setError(error);
        textInputLayout.getEditText().setFocusable(true);
        textInputLayout.getEditText().setFocusableInTouchMode(true);
        textInputLayout.getEditText().requestFocus();
    }


    @Override
    public void onClick(View v) {
        String account = tilName.getEditText().getText().toString();
        String pass = tilPassword.getEditText().getText().toString();

        tilName.setErrorEnabled(false);
        tilPassword.setErrorEnabled(false);
        //验证用户名和密码
        if (validateAccount(account) && validatePassword(pass)) {
            Toast.makeText(InputTypeEdittextAtivity.this, "你已经成功登录啦", Toast.LENGTH_LONG).show();
        }
    }

}

关于字符串是否为空的判断

public class StringUtils {

    /**
     * 验证是否为空串 (包括空格、制表符、回车符、换行符组成的字符串 若输入字符串为null或空字符串,返回true)
     * @param str 验证字符
     * @return boolean
     */
    public static boolean isEmpty(String str) {
        if (str == null || "".equals(str) || str.length() == 0) {
            return true;
        }
        for (int i = 0; i < str.length(); i++) {
            char c = str.charAt(i);
            if (c != ' ' && c != '\t' && c != '\r' && c != '\n') {
                return false;
            }
        }
        return true;
    }
}