浅析 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>