TextInputLayout的使用

前言

 一般登录注册界面都需要EditText这个控件来让用户输入信息，同时我们一般会设置一个标签（使用TextView）和EditText的hint属性来提示用户输入的内容，而设计库中高级组件TextInputLayout则专门为EditText设计的，即通过使用TextInputLayout包裹EditText实现当用户开始输入时hint属性值将显示在EditText上面作为一个提示标签，这个过程还带有动画效果，这样就避免了用户输入时输入提示消失的情况，同时，还可以更好地向用户提示错误输入信息。

TextInputLayout的两个功能：

给EditText添加一个带有动画效果的提示标签（利用EditText的hint属性的值作为提示标签内容）；
处理错误输入，将错误输入提示信息显示在EditText附近，便于提示用户更好地完成输入。
1. 实现浮动标签提示效果

 TextInputLayout和FrameLayout一样都是一个ViewGroup，而TextInputLayout包裹的是EditText，并且会将EditText的android:hint属性值作为提示标签，所以，使用非常简单，如下：

<code class="language-java hljs  has-numbering"><android.support.design.widget.TextInputLayout
android:layout_width=<span class="hljs-string">"match_parent"</span>
android:layout_margin=<span class="hljs-string">"20dp"</span>
android:id=<span class="hljs-string">"@+id/usernameWraper"</span>
android:layout_height=<span class="hljs-string">"wrap_content"</span>>
<EditText
android:layout_width=<span class="hljs-string">"match_parent"</span>
android:hint=<span class="hljs-string">"请输入用户名"</span>
android:layout_height=<span class="hljs-string">"wrap_content"</span>/>

</android.support.design.widget.TextInputLayout></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li></ul>

用TextInputLayout包裹EditText并给EditText设置了hint属性后，这个EditText就带有了浮动提示标签的效果了，为了更好地看到效果，丰富一下这个xml布局文件：

<code class="language-xml hljs  has-numbering"><span class="hljs-pi"><?xml version="1.0" encoding="utf-8"?></span>
<span class="hljs-tag"><<span class="hljs-title">LinearLayout</span> <span class="hljs-attribute">xmlns:android</span>=<span class="hljs-value">"http://schemas.android.com/apk/res/android"</span>
<span class="hljs-attribute">android:orientation</span>=<span class="hljs-value">"vertical"</span>
<span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
<span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"match_parent"</span>></span>

<span class="hljs-tag"><<span class="hljs-title">RelativeLayout
</span>        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
<span class="hljs-attribute">android:background</span>=<span class="hljs-value">"#ff9900"</span>
<span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"200dp"</span>></span>

<span class="hljs-tag"><<span class="hljs-title">TextView
</span>            <span class="hljs-attribute">android:text</span>=<span class="hljs-value">"用户登录"</span>
<span class="hljs-attribute">android:layout_centerInParent</span>=<span class="hljs-value">"true"</span>
<span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"wrap_content"</span>
<span class="hljs-attribute">android:textColor</span>=<span class="hljs-value">"#fff"</span>
<span class="hljs-attribute">android:textSize</span>=<span class="hljs-value">"30sp"</span>
<span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>/></span>
<span class="hljs-tag"></<span class="hljs-title">RelativeLayout</span>></span>

<span class="hljs-tag"><<span class="hljs-title">android.support.design.widget.TextInputLayout
</span>        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
<span class="hljs-attribute">android:layout_margin</span>=<span class="hljs-value">"20dp"</span>
<span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/usernameWraper"</span>
<span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">EditText
</span>            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
<span class="hljs-attribute">android:hint</span>=<span class="hljs-value">"请输入用户名"</span>
<span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>/></span>

<span class="hljs-tag"></<span class="hljs-title">android.support.design.widget.TextInputLayout</span>></span>

<span class="hljs-tag"><<span class="hljs-title">android.support.design.widget.TextInputLayout
</span>        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
<span class="hljs-attribute">android:layout_margin</span>=<span class="hljs-value">"20dp"</span>
<span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/passwordWraper"</span>
<span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>></span>
<span class="hljs-tag"><<span class="hljs-title">EditText
</span>            <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
<span class="hljs-attribute">android:hint</span>=<span class="hljs-value">"请输入密码"</span>
<span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>/></span>

<span class="hljs-tag"></<span class="hljs-title">android.support.design.widget.TextInputLayout</span>></span>

<span class="hljs-tag"><<span class="hljs-title">Button
</span>        <span class="hljs-attribute">android:layout_width</span>=<span class="hljs-value">"match_parent"</span>
<span class="hljs-attribute">android:layout_margin</span>=<span class="hljs-value">"20dp"</span>
<span class="hljs-attribute">android:text</span>=<span class="hljs-value">"登录"</span>
<span class="hljs-attribute">android:id</span>=<span class="hljs-value">"@+id/btn_login"</span>
<span class="hljs-attribute">android:layout_height</span>=<span class="hljs-value">"wrap_content"</span>/></span>
<span class="hljs-tag"></<span class="hljs-title">LinearLayout</span>></span></code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li><li>47</li><li>48</li><li>49</li><li>50</li><li>51</li></ul>

2. 显示错误输入信息

 TextInputLayout使得我们在验证输入数据是可以更加方便地显示错误输入提示，这样可以使得输入更加友好。

对于处理错误信息，TextInputLayout提供了两个方法：

setError(String message)：设置错误提示信息，这个信息将会显示在EditText附近。
setErrorEnabled(boolean enabled)：设置错误信息不可以用，也就是移除setError(String message)添加的错误提示信息。
代码例子：

<code class="language-java hljs  has-numbering"><span class="hljs-keyword">package</span> com.example.lt.meterialdesign;

<span class="hljs-keyword">import</span> android.support.design.widget.TextInputLayout;
<span class="hljs-keyword">import</span> android.support.v7.app.AppCompatActivity;
<span class="hljs-keyword">import</span> android.os.Bundle;
<span class="hljs-keyword">import</span> android.text.TextUtils;
<span class="hljs-keyword">import</span> android.view.View;
<span class="hljs-keyword">import</span> android.widget.Button;

<span class="hljs-keyword">public</span> <span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">LoginActivity</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">AppCompatActivity</span> <span class="hljs-keyword">implements</span> <span class="hljs-title">View</span>.<span class="hljs-title">OnClickListener</span> {</span>

<span class="hljs-keyword">private</span> TextInputLayout mUsernameWraper;
<span class="hljs-keyword">private</span> TextInputLayout mPasswordWraper;

<span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">protected</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onCreate</span>(Bundle savedInstanceState) {
<span class="hljs-keyword">super</span>.onCreate(savedInstanceState);
setContentView(R.layout.activity_login);
mUsernameWraper = (TextInputLayout) findViewById(R.id.usernameWraper);
mPasswordWraper = (TextInputLayout) findViewById(R.id.passwordWraper);

Button btn_login = (Button) findViewById(R.id.btn_login);
btn_login.setOnClickListener(<span class="hljs-keyword">this</span>);
}

<span class="hljs-annotation">@Override</span>
<span class="hljs-keyword">public</span> <span class="hljs-keyword">void</span> <span class="hljs-title">onClick</span>(View v) {
<span class="hljs-comment">// TextInputLayout可以取得包裹的EditText</span>
String username = mUsernameWraper.getEditText().getText().toString().trim();
String password = mPasswordWraper.getEditText().getText().toString().trim();
<span class="hljs-keyword">if</span>(TextUtils.isEmpty(username)){
mUsernameWraper.setError(<span class="hljs-string">"用户名不能为空"</span>);
<span class="hljs-keyword">return</span>;
}<span class="hljs-keyword">else</span>{
<span class="hljs-comment">// 移除错误提示信息</span>
mUsernameWraper.setErrorEnabled(<span class="hljs-keyword">false</span>);
}
<span class="hljs-keyword">if</span>(TextUtils.isEmpty(password)){
mPasswordWraper.setError(<span class="hljs-string">"密码不能为空"</span>);
<span class="hljs-keyword">return</span>;
}<span class="hljs-keyword">else</span>{
<span class="hljs-comment">// 移除错误提示信息</span>
mPasswordWraper.setErrorEnabled(<span class="hljs-keyword">false</span>);
}
}
}</code><ul style="display: block;" class="pre-numbering"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li><li>9</li><li>10</li><li>11</li><li>12</li><li>13</li><li>14</li><li>15</li><li>16</li><li>17</li><li>18</li><li>19</li><li>20</li><li>21</li><li>22</li><li>23</li><li>24</li><li>25</li><li>26</li><li>27</li><li>28</li><li>29</li><li>30</li><li>31</li><li>32</li><li>33</li><li
a0a0
>34</li><li>35</li><li>36</li><li>37</li><li>38</li><li>39</li><li>40</li><li>41</li><li>42</li><li>43</li><li>44</li><li>45</li><li>46</li></ul>

这里只是对用户名和密码是否为空进行了判断，如果要指定格式可以结合正则表达式验证数据格式。对于EditText可以给它添加文本改变监听addTextChangedListener，当用户改变输入的文本后进行数据格式的验证，然后更加情况显示输入提示。

运行效果：



可以看到，当我们开始在EditText中输入信息的时候，EditText的hint属性值将会显示在EditText上面，并且带有一个动画效果，显示为一个浮动标签。而且，当输入的数据格式不对时，还会显示错误提示在EditText下面。