浅析 TextInputLayout

haojie0120 8年前
   <p>Material Design(质感设计)是Google工程师基于传统优秀的设计原则,结合丰富的创意和科学技术所发明的一套全新的界面设计语言,主要用于解决Android平台界面风格不统一的问题。在2015年的Google I/O大会上退出的Design Support库将Material Design中最具代表性的一些控件和效果进行了封装,从而方便开发者调用相应的API来实现相应的MD风格。</p>    <p>本篇主要介绍TextInputLayout的使用。</p>    <p>首先声明:</p>    <p>TextInputLayout是一个类似于LinearLayout存放空间的容器,TextInputLayout和ScrollView一样只能接受一个子元素,并且子元素是EditText的类型。</p>    <p>接下来介绍TextInputLayout的使用:</p>    <p>首先添加Gradle依赖:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/45a25df923bb38c9ea266169aea1793c.png"></p>    <p>现在我们就可以使用TextInputLayout控件了。</p>    <p>布局文件中具体使用:</p>    <pre>  <code class="language-java"><?xml version="1.0" encoding="utf-8"?>  <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"      xmlns:tools="http://schemas.android.com/tools" android:id="@+id/activity_main"      android:layout_width="match_parent" android:layout_height="match_parent"      android:orientation="vertical"      tools:context="com.fuyunwang.myapplication.MainActivity">      <android.support.design.widget.TextInputLayout          android:id="@+id/accoutinput"          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:hint="请输入手机号"          >          <EditText              android:id="@+id/accout"              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:inputType="phone"              android:singleLine="true"              />      </android.support.design.widget.TextInputLayout>      <android.support.design.widget.TextInputLayout          android:id="@+id/passwordinput"          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:hint="请输入密码"          >          <EditText              android:id="@+id/password"              android:layout_width="match_parent"              android:layout_height="wrap_content" />      </android.support.design.widget.TextInputLayout>      <Button          android:id="@+id/accout_sign_in_button"          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:layout_marginTop="16dp"          style="?android:textAppearanceSmall"          android:text="注册"          android:textStyle="bold"          android:textColor="@color/colorAccent"          android:background="@color/colorPrimary"          />  </LinearLayout></code></pre>    <p>其中,android:hint属性指定了浮动标签所显示的内容。当然也可以直接使该属性失效: app:hintEnabled="false" ,</p>    <p>此外对于浮动标签的显示隐藏切换有一个过渡动画,我们可以通过 app:hintAnimationEnabled="false" 来取消该效果。</p>    <p>指定输入的最大值: app:counterMaxLength="11" ,一旦在xml代码中指定了最大值,代码中可以通过 accountinput.getcounterMaxLength() 来获取设置的值。</p>    <p><strong>设置错误提示:</strong></p>    <p>首先确保错误提示的功能是开启的。</p>    <p>xml方式: app:errorEnabled="true"</p>    <p>代码方式: accountinput.setErrorEnabled(true)</p>    <p>如果要关闭错误提示:</p>    <p>取消错误提示:</p>    <p>方式一:</p>    <pre>  <code class="language-java">accoutinput.setEnable(true);      passwordinput.setEnable(true);         //setEnabled设置之后不会自动的取消错误提示,只有置为空之后才会取消          accoutinput.setError(null);          passwordinput.setError(null);</code></pre>    <p>方式二:</p>    <pre>  <code class="language-java">accountinput.setErrorEnable(false);  passwordinput.setErrorEnable(false);</code></pre>    <p>方式三:</p>    <pre>  <code class="language-java">app:errorEnabled="false"</code></pre>    <p>我这里辨析一下,xml和java代码是一致的,其中errorEnable是表示是否开启显示错误的功能;error指的是当错误发生时在TextInputLayout下会有错误的提示并且我们仍然可以输入;而enable不同,当我们设置为false的时候,整个空间处于不可用的状态,我们无法输入值</p>    <p>常见使用方式:</p>    <pre>  <code class="language-java">editText.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 (charSequence.toString().length()>5){                      inputLayout.setCounterMaxLength(5);                      inputLayout.setError("您的输入超出了5个字符");  //                    inputLayout.setEnabled(false);       当输入的值为6个的时候控件处于不可用状态,一般这种处理方式极少用                  }else{  //                    inputLayout.setErrorEnabled(false); //注意此代码作用相当于下面的两行代码                      inputLayout.setEnabled(true);                      inputLayout.setError(null);                  }              }              @Override              public void afterTextChanged(Editable editable) {              }          });</code></pre>    <p>在实际的应用中,如果我们需要在编辑的时候自动的取消错误的提示</p>    <pre>  <code class="language-java">accout.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) {              }              @Override              public void afterTextChanged(Editable editable) {                  if(accoutinput.getError()!=null){                      accoutinput.setError(null);                  }              }          });</code></pre>    <p>关于密码效果的使用,在EditText中指定类型为textPassword,并且在TextInputLayout中指定 app:passwordToggleEnabled="true" ,可以得到密码是否可见的效果。</p>    <pre>  <code class="language-java"><android.support.design.widget.TextInputLayout          android:id="@+id/passwordinput"          android:layout_width="match_parent"          android:layout_height="wrap_content"          android:hint="请输入密码"          app:hintAnimationEnabled="false"          app:passwordToggleEnabled="true"          >          <EditText              android:id="@+id/password"              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:inputType="textPassword"              />      </android.support.design.widget.TextInputLayout></code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/b04e16c5f4e5c21366f7d7fdf81c9fec.png"></p>    <p>当然我们也会在输入完成的时候取消烦人的软键盘,此时我们可以在TextInputLayout上设置监听事件onClick:</p>    <pre>  <code class="language-java"><android.support.design.widget.TextInputLayout              android:id="@+id/textInputLayout"              android:layout_width="match_parent"              android:layout_height="wrap_content"              android:layout_marginTop="10dp"              android:onClick="hideKeyBord"              app:hintAnimationEnabled="true"              app:counterMaxLength="5"              app:errorEnabled="true"              >              <EditText                  android:id="@+id/editText"                  android:layout_width="match_parent"                  android:layout_height="wrap_content"                  android:inputType="text"                  android:hint="请输入用户名:"                  />          </android.support.design.widget.TextInputLayout></code></pre>    <pre>  <code class="language-java">public void hideKeyBord(View v) {          View view=getCurrentFocus();          if(null!=view){              InputMethodManager manager= (InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE);              manager.hideSoftInputFromWindow(view.getWindowToken(),InputMethodManager.HIDE_NOT_ALWAYS);          }      }</code></pre>    <p> </p>    <p>来自:http://blog.csdn.net/James_shu/article/details/55098500</p>    <p> </p>