TextInputLayout

效果


布局代码:

 <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

...


版权声明:本文为dianziagen原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。