3分钟学会TextInputLayout
rgpl3332
8年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/07eed0fe81511d0bb7ec1dc88c86211c.png"></p> <h2>从登陆页开始TextInputLayout</h2> <h2>前言</h2> <p style="text-align:center"><img src="https://simg.open-open.com/show/58714971c0b497faf5d50cf71c859d53.gif"></p> <p style="text-align:center">test2.gif</p> <h2>添加依赖</h2> <p>TextInputLayout是在Material Design中的,如果我们要使用的话,必须在gradle文件中配置</p> <pre> <code class="language-java">dependencies { compile 'com.android.support:appcompat-v7:25.0.1' compile 'com.android.support:design:25.0.1' }</code></pre> <h2>依赖完成之后开始使用</h2> <p>在 TextInputLayout官方文档API 中描述了它是一种新的继承自LinearLayout的布局,让我们使用时里面只能包含一个EditText或者其子类的控件,该布局可以通过设置 hint 和 Error 显示浮动标签.接下来我们看看布局文件</p> <pre> <code class="language-java"><?xml version="1.0" encoding="utf-8"?> <android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.design.widget.TextInputLayout android:layout_width="368dp" android:layout_height="wrap_content" android:layout_marginTop="16dp" app:layout_constraintLeft_toLeftOf="@+id/til_phone" app:layout_constraintRight_toRightOf="@+id/til_phone" app:layout_constraintTop_toBottomOf="@+id/til_phone" android:id="@+id/textInputLayout"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/hint_password" android:inputType="textPassword"/> </android.support.design.widget.TextInputLayout> <android.support.design.widget.TextInputLayout android:id="@+id/til_phone" android:layout_width="368dp" android:layout_height="wrap_content" android:layout_marginEnd="16dp" android:layout_marginLeft="16dp" android:layout_marginRight="16dp" android:layout_marginStart="16dp" android:layout_marginTop="16dp" app:counterEnabled="true" app:counterMaxLength="11" app:layout_constraintLeft_toLeftOf="parent" app:layout_constraintRight_toRightOf="parent" app:layout_constraintTop_toTopOf="parent"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="@string/hint_phone" android:inputType="phone"/> </android.support.design.widget.TextInputLayout> <Button android:text="@string/btn_text" android:layout_width="0dp" android:textColor="@android:color/white" android:layout_height="wrap_content" android:id="@+id/button" android:layout_marginStart="16dp" app:layout_constraintLeft_toLeftOf="parent" android:layout_marginLeft="16dp" android:layout_marginEnd="16dp" app:layout_constraintRight_toRightOf="parent" android:layout_marginRight="16dp" android:background="@color/colorPrimary" android:layout_marginTop="16dp" app:layout_constraintTop_toBottomOf="@+id/textInputLayout"/> </android.support.constraint.ConstraintLayout></code></pre> <p>使用 TextInputLayout 其实很简单,只需要我们使用 TextInputLayout 容器并且在其中加入一个 EditText ,需要我们特别注意的是: <strong>一个TextInputLayout有且只有一个EditText</strong> ,</p> <p>如果我们想要浮动标签的效果只需要在 TextInputLayout 或者在 EditText 中设置 hint ,但是不能在两者中同时设置 hint 属性,假如我们在 TextInputLayout 跟 EditText 都设置了 hint 属性时,当 EditText 没有获取到焦点时,这时 hint 会显示(但是要注意,这时是两个hint重叠显示)</p> <p>如果我们想要关闭浮动标签(默认是开启的),可以加入下面一句话</p> <pre> <code class="language-java">app:hintEnable="false"</code></pre> <p>浮动标签显示与隐藏之间有一个过渡动画(默认是开启的),可以通过以下方法设置</p> <pre> <code class="language-java">app:hintAnimationEnabled="boolean"</code></pre> <p>如果我们想要在账号那栏后面加个字数统计,例如当我们的账号是固定位数时(例如手机号码,),我们可以让用户看到自己当前输入的长度,我们只需要在 TextInputLayout 加入</p> <pre> <code class="language-java">app:counterEnabled="true"</code></pre> <p>默认是关闭的,我们也能设置一个输入的最大长度</p> <pre> <code class="language-java">app:counterMaxLength="11"</code></pre> <p style="text-align:center"><img src="https://simg.open-open.com/show/fda662b44a18570625d19bb1ae5f5bfd.png"></p> <p>这个设置不是说用户输入了11位账号之后就不能输入了,而是会用一种颜色提示用户你的输入长度超过了设置长度.</p> <p>TextInputLayout 也很友好,为我们提供了设置错误提醒的功能(又为我们争取了一点品咖啡的时间),</p> <pre> <code class="language-java">textInputEditText.setError(CharSequence error);</code></pre> <p>当我们调用了这个方法之后提示是会一直在的,所以我们要当用户输入正确之后我们手动调用 textInputEditText,setErro(null) 去取消错误提示.我们可以通过addTextChangedListener监听,在合适的时候调用 textInputEditText,setErro(null)</p> <p>我们可能看到过其他的app在密码那栏的最右边有个��的图标, TextInputLayout 也为我们提供了这个功能</p> <pre> <code class="language-java">app:passwordToggleEnabled="true" //默认是关闭的</code></pre> <p>我们可能用我们自己设计的图标</p> <pre> <code class="language-java">app:passwordToggleDrawable="@mipmap/ic_launcher"</code></pre> <p>passwordToggleTint 给图标加颜色</p> <pre> <code class="language-java">app:passwordToggleTint="@color/colorAccent"</code></pre> <p>passwordToggleTintMode 设置模式</p> <pre> <code class="language-java">//screen,src_in,src_atop,src_over,multiply等几种设计模式 app:passwordToggleTintMode="screen" //screen</code></pre> <p>到此,你花了多少时间,是不是很简单.</p> <h2>自定义浮动标签</h2> <p>在 TextInputLayout 中加入</p> <pre> <code class="language-java">app:hintTextAppearance="@style/hintAppearance"</code></pre> <pre> <code class="language-java"><style name="hintAppearance" parent="TextAppearance.AppCompat"> <item name="android:textSize">14sp</item> <item name="android:textColor">#ffee00</item> </style></code></pre> <h2>自定义错误提示信息样式</h2> <p>在 TextInputLayout 中加入</p> <pre> <code class="language-java">app:errorTextAppearance="@style/errorAppearance"</code></pre> <pre> <code class="language-java"><style name="errorAppearance" parent="TextAppearance.AppCompat"> <item name="android:textSize">14sp</item> <item name="android:textColor">@color/red</item> </style></code></pre> <h2>监听虚拟键盘</h2> <p>有时候我们在用虚拟键盘的时候,在输入账号之后,我们点击 下一项 ,焦点会跑到输入密码这一栏,当我们密码输入完成之后,点击 确定 按钮就能登录了,这个怎么实现的呢.</p> <p>账号EditText中加入</p> <pre> <code class="language-java">android:imeActionId="@+id/password" android:imeOptions="actionNext"</code></pre> <p>密码EditText中加入</p> <pre> <code class="language-java">android:imeActionId="@+id/button" android:imeOptions="actionDone"</code></pre> <pre> <code class="language-java">mPasswordView.setOnEditorActionListener(new TextView.OnEditorActionListener() { @Override public boolean onEditorAction(TextView textView, int id, KeyEvent keyEvent) { if ( id == EditorInfo.IME_ACTION_DONE) { InputMethodManager inputMethodManager=(InputMethodManager)getSystemService(Context.INPUT_METHOD_SERVICE); //inputMethodManager.showSoftInput(getWindow().getDecorView(),InputMethodManager.SHOW_FORCED);//显示 inputMethodManager.hideSoftInputFromWindow(getWindow().getDecorView().getWindowToken(),InputMethodManager.RESULT_UNCHANGED_SHOWN); //attemptLogin(); startLogin(); return true; } return false; } });</code></pre> <p>对于账号 EditText 的优化我们可能通过 AutoCompleteTextView 实现自动提示功能.</p> <p>OK,到这里本篇文章就结束了,</p> <p> </p> <p>来自：http://www.jianshu.com/p/a9b48dee86e0</p> <p> </p>