Android ApplicationMaterial-Design新控件

#####介绍：
首先来看一下TextInputLayout，TextInputLayout 是EditText(或者EditText子类)的一个包装类，它主要用于在用户输入文本的时候显示一个浮动标签，也支持显示错误信息和字符计数等功能。同样它也支持密码可见切换按钮，通过setPasswordVisibilityToggleEnabled(boolean)API 或者 xml 中的属性，如果设置该属性为可用（enable）,那么当EditText 显示设置的密码时，会显示一个切换密码可见和隐藏的按钮。
#####TextInputLayout 重要方法和属性:

  • app:counterEnabled 字符计数是否可用
    代码中对应的方法为：setCounterEnabled（boolean）
  • app:counterMaxLength 计数最大的长度
    代码中对应的方法为：setCounterMaxLength（int ）
  • app:counterOverflowTextAppearance 计数超过最大长度时显示的文本样式
  • app:counterTextAppearance 显示的计数的文本样式。
  • app:errorEnabled 显示错误信息是否可用
  • app:errorTextAppearance 显示错误信息的文本样式
  • android:hint 浮动标签
    代码对应方法：setHint(CharSequence)
  • app:hintAnimationEnabled 控制是否需要浮动标签的动画
    代码对应方法：setHintAnimationEnabled(boolean)
  • app:hintEnabled 控制是否显示浮动标签
    代码对应方法：setHintEnabled(boolean)
  • app:hintTextAppearance 浮动标签的文本样式
    代码对应方法：setHintTextAppearance(int)
  • app:passwordToggleDrawable 密码可见切换图标
    代码对应方法：setPasswordVisibilityToggleDrawable(int)或者setPasswordVisibilityToggleDrawable(Drawable)
  • app:passwordToggleEnabled 控制是否显示密码可见切换图标
    代码对应方法：setPasswordVisibilityToggleEnabled(boolean)
  • app:counterOverflowTextAppearance 设置超出字符数后提示文字的颜色，如果不设置默认为@color/colorAccent的颜色

#####基础用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<android.support.design.widget.TextInputLayout
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:layout_centerInParent="true"
      android:hint="账号"
      android:paddingLeft="16dp"
      android:scrollbarAlwaysDrawHorizontalTrack="true"
      app:counterMaxLength="8"
      app:counterOverflowTextAppearance="@style/TextOverCount">

      <android.support.design.widget.TextInputEditText
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:gravity="center_vertical"
          android:textColor="@color/black"
          android:textColorHint="@color/gray"
          android:textSize="14dp"/>
  </android.support.design.widget.TextInputLayout>

######修改默认样式：
改变TextInputLayout默认下划线颜色和点击时颜色，默认hint颜色，在TextInputLayout控件设置textColorHint设置默认hint颜色
在EditText控件中设置android:theme属性设置 style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<android.support.design.widget.TextInputLayout
      android:id="@+id/login_textinput_id"
      android:layout_width="match_parent"
      android:layout_height="wrap_content"
      android:textColorHint="@color/mintcream">
      <!--android:textColorHint" 默认hint字体及下划线颜色-->
      <EditText
          android:id="@+id/login_userId"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:hint="请输入账号"
          android:inputType="number"
          android:maxLines="1"
          android:singleLine="true"
          android:textColor="@color/darkorange"
          android:theme="@style/TextAppTheme" />
      <!--textColor设置输入时字体颜色-->
  </android.support.design.widget.TextInputLayout>
  
 <!--改变TextInputLayout 里面的EditText默认下划线和点击时下划线的颜色-->
  <style name="TextAppTheme" parent="Theme.AppCompat.Light.NoActionBar">
      <item name="colorControlNormal">@color/gray</item><!--默认显示下划线的颜色-->
      <item name="colorControlActivated">@color/gray</item><!--点击后下划线的颜色-->
      <item name="colorAccent">@color/qmui_config_color_red</item>
  </style>

######超出字符数后的提示样式：

1
2
3
<style name="TextOverCount" parent="Base.TextAppearance.AppCompat.Light.Widget.PopupMenu.Small">
      <item name="android:textColor">@android:color/holo_red_light</item>
  </style>

#####设置错误提示文字

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_marginTop="20dp"
        app:errorEnabled="true" //设置为true
        android:id="@+id/textinputlayout_email"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:hint="请输入邮箱"
            android:id="@+id/et_email"
            android:layout_height="wrap_content" />
</android.support.design.widget.TextInputLayout>


editText_email=findViewById(R.id.et_email);
        textInputLayout =findViewById(R.id.textinputlayout_email);
        editText_email.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) {
                if(!RegexUtils.isEmail(charSequence)){
                    textInputLayout.setError("邮箱格式错误");
                    textInputLayout.setErrorEnabled(true);
                }else {
                    textInputLayout.setErrorEnabled(false);
                }
            }

            @Override
            public void afterTextChanged(Editable editable) {

            }
        });

image
######设置密码是否可见

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<android.support.design.widget.TextInputLayout
        android:layout_width="match_parent"
        android:layout_marginTop="20dp"
        app:errorEnabled="true"
        app:passwordToggleEnabled="true" //设置为true
        android:id="@+id/textinputlayout_password"
        android:layout_height="wrap_content">
        <EditText
            android:layout_width="match_parent"
            android:hint="请输入密码"
            android:id="@+id/et_password"
            android:inputType="textPassword"
            android:layout_height="wrap_content" />
    </android.support.design.widget.TextInputLayout>

image