效果
布局代码:
<android.support.design.widget.TextInputLayout android:id="@+id/repeat_password" android:layout_width="match_parent" android:layout_height="wrap_content" app:passwordToggleTint="@drawable/password_color_selector" app:passwordToggleDrawable="@drawable/password_visible_invisible" app:hintTextAppearance="@style/FloatingStyle" app:passwordToggleEnabled="true"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="密码" android:inputType="textPassword" android:theme="@style/MyEditText"/> </android.support.design.widget.TextInputLayout>
1添加下面的依赖
两个库,一个是appcompat-v7,保证material styles可以向下兼容。另一个是Design Support Library。
compile 'com.android.support:design:27.1.1' compile 'com.android.support:appcompat-v7:22.2.0'
2.使用TextInputLayout
TextInputLayout 控件表现得就像LinearLayout 一样,它是一个容器。TextInputLayout 中只能放一个子元素,和ScrollView有点类似,并且子元素必须是EditText
3.设置hint提示动画的文字样式
app:hintTextAppearance=”@style/FloatingStyle” 用于设置floating字体的样式。
当EditText中输入第一个字母要隐藏hint的时候,TextInputLayout中会出现一个悬浮的标签来显示这个hint,还负责一个炫酷的的material 动画。
<style name="FloatingStyle" parent="@android:style/TextAppearance"> <item name="android:textColor">#e0ffffff</item> <item name="android:textSize">12sp</item> </style>
注:EditText的高度可以固定, TextInputLayout 的高度不要固定,否则TextInputLayout 的setError()的信息可能会无法正常显示。
参考:https://www.cnblogs.com/butterfly-clover/p/5145644.html
4.设置自定义的密码提示图标(显示和隐藏)
app:passwordToggleEnabled="true"//控制密码可见开关启用
app:passwordToggleDrawable="@drawable/password_visible_invisible"//设置密码可见开关的图标
图片选择器(mimakejian是png图标,推荐svg图片)
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/ic_mimakejian_28" android:state_checked="true"/> <item android:drawable="@drawable/ic_mimabukejian" android:state_checked="false"/> </selector>
图片资源
ic_mimakejian_28
<vector android:height="28dp" android:viewportHeight="200.0" android:viewportWidth="200.0" android:width="28dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#488EDC" android:pathData="M99.88,75.97c-11.52,0 -20.33,8.81 -20.33,20.33s8.81,20.33 20.33,20.33c11.52,0 20.33,-8.81 20.33,-20.33S111.39,75.97 99.88,75.97zM99.88,130.17C80.91,130.17 66,115.26 66,96.29c0,-18.97 14.91,-33.88 33.88,-33.88c18.97,0 33.88,14.9 33.88,33.88C133.75,115.26 118.85,130.17 99.88,130.17zM99.88,45.48C66,45.48 36.87,66.48 25.35,96.29C36.87,126.1 66,147.11 99.88,147.11c33.88,0 63.01,-21 74.53,-50.81C162.89,66.48 133.75,45.48 99.88,45.48z"/> </vector>
。ic_mimabukejian
<vector android:height="28dp" android:viewportHeight="200.0" android:viewportWidth="200.0" android:width="28dp" xmlns:android="http://schemas.android.com/apk/res/android"> <path android:fillColor="#989898" android:pathData="M98.64,75.9L119.68,96.94c0,-0.68 0,-0.68 0,-1.36c0,-11.54 -8.82,-20.36 -20.36,-20.36C99.32,75.9 99.32,75.9 98.64,75.9zM69.46,81.33l10.18,10.18c0,2.04 0,3.39 0,4.75c0,11.54 8.82,20.36 20.36,20.36c1.36,0 2.71,0 4.75,-0.68l10.18,10.18c-4.75,2.71 -9.5,4.07 -14.93,4.07c-19,0 -33.93,-14.93 -33.93,-33.93C66.07,90.83 67.43,86.08 69.46,81.33zM32.14,44.01l15.61,15.61l2.71,2.71C38.92,71.15 30.1,82.69 25.35,96.26c11.54,29.86 40.72,50.9 74.65,50.9c10.18,0 20.36,-2.04 29.86,-5.43l2.71,2.71l19.68,19.68l8.82,-8.82L40.96,35.19L32.14,44.01zM100,62.33c19,0 33.93,14.93 33.93,33.93c0,4.07 -0.68,8.82 -2.71,12.22l19.68,19.68c10.18,-8.82 18.32,-19.68 23.07,-31.9c-11.54,-29.86 -40.72,-50.9 -74.65,-50.9c-9.5,0 -18.32,2.04 -27.15,4.75l14.93,14.93C91.18,63.01 95.93,62.33 100,62.33z"/> </vector>
。。。注意:不管上面的图片是什么颜色,显示的都是灰色!!!。可以通过如下属性修改:
app:passwordToggleTint="@drawable/password_color_selector"
颜色选择器
<?xml version="1.0" encoding="utf-8"?> <selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:color="#005dad" android:state_checked="true"/> <item android:color="#989898" android:state_checked="false"/> </selector>
5.设置EditText光标和下划线颜色
<style name="MyEditText" parent="Theme.AppCompat.Light"> <item name="colorAccent">@color/blue</item> </style>参考: https://www.jianshu.com/p/4b3e430f6937
...