MD风格及效果很棒,不得不去学习!
1、看下效果(之前有个第三方包有这个效果)
2、添加依赖(并非最新依赖库)
implementation 'com.android.support:design:26.1.0'
2、默认activity_main.xml
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:id="@+id/main_content" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" android:orientation="vertical" tools:context="com.gm.demo0205.MainActivity"> <!-- 账号 --> <android.support.design.widget.TextInputLayout android:id="@+id/til_account" android:layout_width="match_parent" android:layout_height="wrap_content" android:textColorHint="#999999" app:counterEnabled="true" app:counterMaxLength="11" app:errorEnabled="true" app:hintTextAppearance="@style/ETextHintAppearance" app:errorTextAppearance="@style/ETextErrorAppearance" app:counterTextAppearance="@style/ETextCounterAppearance"> <EditText android:id="@+id/et_account" android:layout_width="match_parent" android:layout_height="wrap_content" android:maxLength="11" android:hint="手机号" /> </android.support.design.widget.TextInputLayout> <!-- 密码 --> <android.support.design.widget.TextInputLayout android:id="@+id/til_psw" android:layout_width="match_parent" android:layout_height="wrap_content" app:counterEnabled="true" app:counterMaxLength="50" app:errorEnabled="true"> <EditText android:id="@+id/et_psw" android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="年龄" /> </android.support.design.widget.TextInputLayout> </LinearLayout>属性说明:
counterEnabled:效果图右下角那个分母分子式的文本计数
counterMaxLength:最大计数,超过未设置字体颜色会有默认颜色
errorEnabled:错误提示,会在左下角显示
hintTextAppearance、errorTextAppearance、counterTextAppearance:分别显示该效果的颜色切换
3、以上style
<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorPrimaryDark">@color/colorPrimaryDark</item> <!--修改输入框的下划线颜色--> <item name="colorAccent">@color/colorCursor</item> </style> <style name="ETextHintAppearance" parent="TextAppearance.AppCompat"> <item name="android:textSize">14sp</item> <item name="android:textColor">#fc1004</item> </style> <style name="ETextErrorAppearance" parent="TextAppearance.AppCompat"> <item name="android:textSize">14sp</item> <item name="android:textColor">#fc1004</item> </style> <style name="ETextCounterAppearance" parent="TextAppearance.AppCompat"> <item name="android:textSize">14sp</item> <item name="android:textColor">#999999</item> </style>4、然后就是简单的控件逻辑应用了,这里我简单描述下,就是当密码框获取焦点的时候可以校验账号框的信息是否符合要求,
然后相应提示信息。
etAccount.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void afterTextChanged(Editable editable) { String temp = editable.toString(); if (temp.length() == 11 || temp.length() == 0) { tilAccount.setError(""); } } }); etAccount.setOnFocusChangeListener(new View.OnFocusChangeListener() { @Override public void onFocusChange(View view, boolean b) { if (!b && etAccount.getText().toString().trim().length() < 11) { tilAccount.setError("请输入11位手机号码"); } } }); etPsw.addTextChangedListener(new TextWatcher() { @Override public void beforeTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void onTextChanged(CharSequence charSequence, int i, int i1, int i2) { } @Override public void afterTextChanged(Editable editable) { if (TextUtils.equals("24", editable.toString())) { tilPsw.setError("错误提示:24"); } else { tilPsw.setError(""); } } });