Android Material Design之TextInputLayout

   <p>最近在使用知乎Android客户端的时候发现一个十分好玩的UI。如下图：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/0d459da918ab647d5bc902f57afef9a7.gif"></p>    <p style="text-align:center">图1</p>    <p>其实不难看出，知乎app使用了大量原生的Android Material Design控件，包括ToolBar、DrawerLayout、NavigationView、CardView、SwipeRefreshLayout、FloatingActionButton、BottomNavigationBar等等等等。</p>    <p>顺着这个思路，我很快找到上图这个EditText获取到焦点后，hint文本的动画效果实际上也是来源于Material Design库中的一个控件—— <strong>TextInputLayout</strong> 。下面简单介绍一下这个控件的用法以及用途。</p>    <h2><strong>1 使用</strong></h2>    <h3><strong>1.1 添加库依赖</strong></h3>    <p>要使用这个控件，需要引入 <strong>appcompat-v7</strong> 以及 <strong>Design Support Library</strong> 两个库。</p>    <pre>  <code class="language-java">dependencies {      compile 'com.android.support:appcompat-v7:23.1.1'      compile 'com.android.support:design:23.1.1'  }</code></pre>    <h3><strong>1.2 布局中的使用</strong></h3>    <p>首先我们必须了解的是， TextInputLayout 继承于 LinearLayout ，只能拥有一个直接的ChildView（类似于 ScrollView ），且这个ChildView只能是 EditText 。</p>    <pre>  <code class="language-java"><android.support.design.widget.TextInputLayout          android:layout_width="match_parent"          android:layout_height="wrap_content">            <EditText              android:id="@+id/edt_password"              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:hint="password"/>      </android.support.design.widget.TextInputLayout></code></pre>    <p>一般来说， EditText 有一个 hint 属性，当 Edittext 中没有内容时，就会显示文字提示。一旦用户开始输入时，这个文字提示就会消失，取而代之地显示用户的输入。这样有一个坏处就是用户就无法了解到当前自己输入的是关于什么的信息。</p>    <p>而TextInputLayout解决了这个问题，用户开始输入时， hint 文字提示会变成 EditText 上方的标签，并伴随一个向上平移+缩放的优雅动画。</p>    <p>就这样，就可以实现图1的效果。</p>    <h3><strong>1.3 其他</strong></h3>    <ol>     <li>Google将 <strong>Design Support Library</strong> 设计得尽善尽美。库中每个控件的设计颜色都来自 <strong>style.xml</strong> 中 <strong>theme</strong> 指定的各种颜色。在工程应用的主题中，修改 colorAccent 属性便可以指定 TextInputLayout 的标签字体颜色以及 EditText 的下划线颜色。 <pre>  <code class="language-java"><style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">   <item name="colorAccent">#3498db</item>  </style></code></pre> </li>     <li> <p>实际项目中，我们需要对用户的输入进行校验（例如 邮箱格式、密码长度、手机号码等），对用户的输入(即 mTextInputLayout.getEditText().getText().toString() )在后台进行验证，如果检查到用户输入不合法，可以通过 setError() 显示输入错误提示，以及 setErrorEnabled(fasle) 清除错误提示。</p> <pre>  <code class="language-java">public void onClick(View v) {   hideKeyboard();     String username = usernameWrapper.getEditText().getText().toString();   String password = usernameWrapper.getEditText().getText().toString();   if (!validateEmail(username)) {       usernameWrapper.setError("Not a valid email address!");   } else if (!validatePassword(password)) {       passwordWrapper.setError("Not a valid password!");   } else {       usernameWrapper.setErrorEnabled(false);       passwordWrapper.setErrorEnabled(false);       doLogin();   }  }  `</code></pre> </li>    </ol>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ab81dddf273d41f1319442e020917a63.png"></p>    <p style="text-align:center">正常状态.png</p>    <p>错误提示的效果是：标签字体颜色变红，且在EditText下方出现错误信息的标签，这时整个TextInputLayout的高度也会发生变化。如下图：</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/f00401b6cb715626efad6c33299c4308.png"></p>    <p style="text-align:center">错误提示.png</p>    <h2><strong>2 内部实现</strong></h2>    <pre>  <code class="language-java">/**   * Layout which wraps an {@link android.widget.EditText} (or descendant) to show a floating label   * when the hint is hidden due to the user inputting text.   *   * Also supports showing an error via {@link #setErrorEnabled(boolean)} and   * {@link #setError(CharSequence)}.   */  public class TextInputLayout extends LinearLayout {        ......      @Override      public void addView(View child, int index, ViewGroup.LayoutParams params) {          if (child instanceof EditText) {              setEditText((EditText) child);              super.addView(child, 0, updateEditTextMargin(params));          } else {              // Carry on adding the View...              super.addView(child, index, params);          }      }       private void setEditText(EditText editText) {    // Add a TextWatcher so that we know when the text input has changed          mEditText.addTextChangedListener(new TextWatcher() {              @Override              public void afterTextChanged(Editable s) {                  updateLabelVisibility(true);                  if (mCounterEnabled) {                      updateCounter(s.length());                  }              }                @Override              public void beforeTextChanged(CharSequence s, int start, int count, int after) {}                @Override              public void onTextChanged(CharSequence s, int start, int before, int count) {}          });        ......  }    }</code></pre>    <p>可以看出，TextInputLayout为内部的EditText设置了一个监听器，监听到有文本输入的时候，通过 updateLabelVisibility(true); 将EditText的hint转变成上方的标签。</p>    <pre>  <code class="language-java">private void updateLabelVisibility(boolean animate) {  ......          if (hasText || isFocused || isErrorShowing) {              // We should be showing the label so do so if it isn't already              collapseHint(animate);          } else {              // We should not be showing the label so hide it               expandHint(animate);          }  }</code></pre>    <p>而在 collapseHint(boolean animate) 和 expandHint(boolean animate) 内部都是执行 animateToExpansionFraction(final float target) 方法，通过属性动画来控制TextInputLayout里面EditText上方hint标签的显示。</p>    <pre>  <code class="language-java">private void animateToExpansionFraction(final float target) {  ......          mAnimator.setFloatValues(mCollapsingTextHelper.getExpansionFraction(), target);          mAnimator.start();      }</code></pre>    <h2><strong>3 Conclusion</strong></h2>    <p>TextInputLayout的简单使用，是Google推出的整个Material Design库的一个缩影：Google将UI视觉效果设计得华丽且流畅，同时代码封装更为优雅，开发者只需要在layout.xml中写好布局文件，就可以轻松在手机屏幕上展现出魔法般的动画效果，实在是妙不可言。</p>    <p> </p>    <p>来自：http://www.jianshu.com/p/dad372912dd5</p>    <p> </p>