Android高级UI开发（十二）之 TextInputLayout用法

TextInputLayout见名知义与文本输入有关系，TextInputLayout控件通过内嵌EditText来实现输入文本时，根据预先设定的属性向用户展示相应的提醒文字并附有酷炫的动画效果。例如，当文本框里的字符长度大于10的时候自动给用户提示，无需编写额外的代码，同时文本框获取或失去焦点时,EditText的hint文本会动态显示和隐藏。下图为TextInputLayout结合EditText控件所实现的动态提醒效果：

1. 布局文件

     activity_main.xml

  

   

    

     

    
    

     

      <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
     
    
   

    

     

    
    

     
 xmlns:tools="http://schemas.android.com/tools"
     
    
   

    

     

    
    

     
 android:layout_width="match_parent"
     
    
   

    

     

    
    

     
 android:layout_height="match_parent"
     
    
   

    

     

    
    

     
 xmlns:app="http://schemas.android.com/apk/res-auto"
     
    
   

    

     

    
    

     
 android:orientation="vertical">
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 <android.support.design.widget.TextInputLayout
     
    
   

    

     

    
    

     
 android:id="@+id/textInputLayout"
     
    
   

    

     

    
    

     
 android:layout_width="fill_parent"
     
    
   

    

     

    
    

     
 android:layout_height="wrap_content"
     
    
   

    

     

    
    

     
 app:hintAnimationEnabled="true"
     
    
   

    

     

    
    

     
 app:errorEnabled="true"
     
    
   

    

     

    
    

     

       >
     
    
   

    

     

    
    

     
 <EditText
     
    
   

    

     

    
    

     
 android:layout_width="fill_parent"
     
    
   

    

     

    
    

     
 android:layout_height="wrap_content"
     
    
   

    

     

    
    

     
 android:hint="请输入账号" />
     
    
   

    

     

    
    

     
 </android.support.design.widget.TextInputLayout>
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 <EditText
     
    
   

    

     

    
    

     
 android:layout_width="fill_parent"
     
    
   

    

     

    
    

     
 android:layout_height="wrap_content"
     
    
   

    

     

    
    

     
 android:hint="请输入密码" />
     
    
   

    

     

    
    

     
 <Button
     
    
   

    

     

    
    

     
 android:layout_width="fill_parent"
     
    
   

    

     

    
    

     
 android:layout_height="wrap_content"
     
    
   

    

     

    
    

     
 android:hint="登录" />
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      </LinearLayout>
     
    
  
 

布局分析：TextInputLayout内嵌一个EditText来实现具有动态效果的提醒给用户。

2. 代码

MainActivity.java

  

   

    

     

    
    

     

      package com.example.administrator.textinputlayout;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      import android.os.Bundle;
     
    
   

    

     

    
    

     

      import android.support.annotation.Nullable;
     
    
   

    

     

    
    

     

      import android.support.design.widget.TextInputLayout;
     
    
   

    

     

    
    

     

      import android.support.v7.app.AppCompatActivity;
     
    
   

    

     

    
    

     

      import android.text.Editable;
     
    
   

    

     

    
    

     

      import android.text.TextWatcher;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

      public class Main2Activity extends AppCompatActivity {
     
    
   

    

     

    
    

     

       TextInputLayout textInputLayout;
     
    
   

    

     

    
    

     
 @Override
     
    
   

    

     

    
    

     
 protected void onCreate(@Nullable Bundle savedInstanceState) {
     
    
   

    

     

    
    

     
 super.onCreate(savedInstanceState);
     
    
   

    

     

    
    

     

       setContentView(R.layout.activity_main);
     
    
   

    

     

    
    

     

       initView();
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     
 public void initView()
     
    
   

    

     

    
    

     

       {
     
    
   

    

     

    
    

     

       textInputLayout = (TextInputLayout)findViewById(R.id.textInputLayout);
     
    
   

    

     

    
    

     
 //检测长度应该低于10位数
     
    
   

    

     

    
    

     

       textInputLayout.getEditText().addTextChangedListener(new MyTextWatcher(textInputLayout, "长度应低于10位数!"));
     
    
   

    

     

    
    

     
 //开启计数
     
    
   

    

     

    
    

     

       textInputLayout.setCounterEnabled(true);
     
    
   

    

     

    
    

     

       textInputLayout.setCounterMaxLength(10);//最大输入限制数
     
    
   

    

     

    
    

     
 return;
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 class MyTextWatcher implements TextWatcher {
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 private String errorStr;
     
    
   

    

     

    
    

     
 private TextInputLayout textInputLayout;
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 public MyTextWatcher(TextInputLayout textInputLayout, String errorStr) {
     
    
   

    

     

    
    

     
 // TODO Auto-generated constructor stub
     
    
   

    

     

    
    

     
 this.textInputLayout = textInputLayout;
     
    
   

    

     

    
    

     
 this.errorStr = errorStr;
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 @Override
     
    
   

    

     

    
    

     
 public void beforeTextChanged(CharSequence s, int start, int count,
     
    
   

    

     

    
    

     
 int after) {
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 @Override
     
    
   

    

     

    
    

     
 public void onTextChanged(CharSequence s, int start, int before,
     
    
   

    

     

    
    

     
 int count) {
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     
 @Override
     
    
   

    

     

    
    

     
 public void afterTextChanged(Editable s) {
     
    
   

    

     

    
    

     
 // 文字改变后回调
     
    
   

    

     

    
    

     
 if(s.toString().length()<=10){
     
    
   

    

     

    
    

     

       textInputLayout.setErrorEnabled(false);
     
    
   

    

     

    
    

     

       }else{
     
    
   

    

     

    
    

     

       textInputLayout.setErrorEnabled(true);
     
    
   

    

     

    
    

     

       textInputLayout.setError(errorStr);
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     
 
     
    
   

    

     

    
    

     

       }
     
    
   

    

     

    
    

     

      }
     
    
  
 

代码分析：

  

   

    

     

    
    

     

      textInputLayout.setCounterEnabled(true);
     
    
   

    

     

    
    

     

      textInputLayout.setCounterMaxLength(10);//最大输入限制数
     
    
  
 

这两行代码开启了错误提醒，预设条件为输入字符数不能大于10，一旦textInputLayout控件内嵌的EditText超过10个字符，textInputLayout会自动提醒用户。

还有一种方法就是监听textInputLayout.getEditText()的输入字符的改变情况来判断字符数是否超过10个，核心代码如下：

textInputLayout.getEditText().addTextChangedListener(new MyTextWatcher(textInputLayout, "长度应低于10位数!"));
 

这里的代码比较简单，相信大家都可以看懂在此就不再赘述了。DEMO代码下载地址：

https://download.csdn.net/download/gaoxiaoweiandy/10704337

文章来源: blog.csdn.net，作者：冉航--小虾米，版权归原作者所有，如需转载，请联系作者。

原文链接：blog.csdn.net/gaoxiaoweiandy/article/details/82957021