Android TextInputLayout
2015-12-11 14:46
627 查看
TextInputLayout是Google在2015 I/O大会上发布的Design Library包下的控件,使用比较简单,简单的用了下确实挺方便的。
先来看下效果图:
我们可以看 1、,当EditText获得焦点时候,TextInputLayout会在左上角默认的生成一个Label用来显示EditText中hint的内容,所以当用户输入时候hint内容会浮动到左上角,并且伴随动画。
2、当EditText中输入的内容不合法时,TextInputLayout便会在EditText的左下角用红色显示错误的提示信息。
下面看一下具体的代码实现,布局文件如下:
Activity中的调用代码如下:
可以看出代码量很少,用起来很方便,但是有几点需要注意:
1、TextInputLayout布局中只能包含一个EditText子View,不能包含多个EditText。
2、想获得TextInputLayout里面的EditText可以直接通过getEditText()方法获取,也有相对应的setEditText(EditText editText)方法。
3、如果要显示error提示,需要先进行setErrorEnabled为true,如果想关闭提示可以直接设置setErrorEnabled为false。
4、在设置hint的颜色时,如果对EditText设置android:textColorHint是不起作用的,需要对theme中的colorAccent进行设置,下面一张图能很好的说明colorAccent的作用
style的代码如下
5、即使当前焦点不在TextInputLayout了,但是如果还设置error呢,显示效果也相当于获取焦点,效果如下图,此时焦点在test上。
6、默认error的颜色为红色,如果红色不是我们的UI要求需要更改呢,我们可以通过设置TextInputLayout的errorTextAppearance属性,至于为什么我们先看下TextInputLayout的源码,当我们调用setError的时候其中有一段代码如下:
通过上述源码我们发现其实色setError就是调用 mErrorView.setText(error);这句代码,但是我们这里没有mErrorView的创建,因为我们调用setError之前需要先设置setErrorEnabled,所以我们再看下setErrorEnabled的源码:
我们可以发现mErrorView是在setErrorEnabled的时候创建的,并且创建的时候设置了mErrorTextAppearance,然后我们再查找mErrorTextAppearance的赋值发现在TextInputLayout的构造方法中有如下代码:
到这里我们发现可以通过errorTextAppearance来设置TextInputLayout的error样式,进一步完善TextInputLayout的创建如下:
error_style的代码如下:
运行效果如下:
如有什么错误希望大家指出。
先来看下效果图:
我们可以看 1、,当EditText获得焦点时候,TextInputLayout会在左上角默认的生成一个Label用来显示EditText中hint的内容,所以当用户输入时候hint内容会浮动到左上角,并且伴随动画。
2、当EditText中输入的内容不合法时,TextInputLayout便会在EditText的左下角用红色显示错误的提示信息。
下面看一下具体的代码实现,布局文件如下:
[code]<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:hint="test"/> <android.support.design.widget.TextInputLayout android:id="@+id/text_input_layout" android:layout_width="match_parent" android:layout_height="wrap_content"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="20sp" android:textColor="#0F0" android:hint="请输入手机号"/> </android.support.design.widget.TextInputLayout> </LinearLayout>
Activity中的调用代码如下:
[code] private TextInputLayout textInputLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.test_text_layout); textInputLayout = (TextInputLayout) findViewById(R.id.text_input_layout); EditText editText = textInputLayout.getEditText(); editText.addTextChangedListener(textWatcher); } private TextWatcher textWatcher = new TextWatcher() { @Override public void beforeTextChanged(CharSequence s, int start, int count, int after) { } @Override public void onTextChanged(CharSequence s, int start, int before, int count) { } @Override public void afterTextChanged(Editable s) { String text = s.toString(); if(text.length() < 3 && text.length() > 0){ //setError 之后需要手动清除 textInputLayout.setErrorEnabled(true); textInputLayout.setError("长度最小为3位"); }else{ textInputLayout.setErrorEnabled(false); } } };
可以看出代码量很少,用起来很方便,但是有几点需要注意:
1、TextInputLayout布局中只能包含一个EditText子View,不能包含多个EditText。
2、想获得TextInputLayout里面的EditText可以直接通过getEditText()方法获取,也有相对应的setEditText(EditText editText)方法。
3、如果要显示error提示,需要先进行setErrorEnabled为true,如果想关闭提示可以直接设置setErrorEnabled为false。
4、在设置hint的颜色时,如果对EditText设置android:textColorHint是不起作用的,需要对theme中的colorAccent进行设置,下面一张图能很好的说明colorAccent的作用
style的代码如下
[code] <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> <!-- Customize your theme here. --> <item name="colorPrimary">@color/colorPrimary</item> <item name="colorAccent">#F123F9</item> </style>
5、即使当前焦点不在TextInputLayout了,但是如果还设置error呢,显示效果也相当于获取焦点,效果如下图,此时焦点在test上。
6、默认error的颜色为红色,如果红色不是我们的UI要求需要更改呢,我们可以通过设置TextInputLayout的errorTextAppearance属性,至于为什么我们先看下TextInputLayout的源码,当我们调用setError的时候其中有一段代码如下:
[code] public void setError(@Nullable CharSequence error) { if (!mErrorEnabled) { if (TextUtils.isEmpty(error)) { // If error isn't enabled, and the error is empty, just return return; } // Else, we'll assume that they want to enable the error functionality setErrorEnabled(true); } if (!TextUtils.isEmpty(error)) { ViewCompat.setAlpha(mErrorView, 0f); mErrorView.setText(error); ViewCompat.animate(mErrorView) .alpha(1f) .setDuration(ANIMATION_DURATION) .setInterpolator(AnimationUtils.FAST_OUT_SLOW_IN_INTERPOLATOR) .setListener(new ViewPropertyAnimatorListenerAdapter() { @Override public void onAnimationStart(View view) { view.setVisibility(VISIBLE); } }) .start(); // Set the EditText's background tint to the error color mErrorShown = true; updateEditTextBackground(); updateLabelVisibility(true); } else { ......... //省略内容自行查看 } }
通过上述源码我们发现其实色setError就是调用 mErrorView.setText(error);这句代码,但是我们这里没有mErrorView的创建,因为我们调用setError之前需要先设置setErrorEnabled,所以我们再看下setErrorEnabled的源码:
[code]public void setErrorEnabled(boolean enabled) { if (mErrorEnabled != enabled) { if (mErrorView != null) { ViewCompat.animate(mErrorView).cancel(); } if (enabled) { mErrorView = new TextView(getContext()); mErrorView.setTextAppearance(getContext(), mErrorTextAppearance); mErrorView.setVisibility(INVISIBLE); ViewCompat.setAccessibilityLiveRegion(mErrorView, ViewCompat.ACCESSIBILITY_LIVE_REGION_POLITE); addIndicator(mErrorView, 0); } else { mErrorShown = false; updateEditTextBackground(); removeIndicator(mErrorView); mErrorView = null; } mErrorEnabled = enabled; } }
我们可以发现mErrorView是在setErrorEnabled的时候创建的,并且创建的时候设置了mErrorTextAppearance,然后我们再查找mErrorTextAppearance的赋值发现在TextInputLayout的构造方法中有如下代码:
[code]mErrorTextAppearance = a.getResourceId(R.styleable.TextInputLayout_errorTextAppearance, 0);
到这里我们发现可以通过errorTextAppearance来设置TextInputLayout的error样式,进一步完善TextInputLayout的创建如下:
[code] <android.support.design.widget.TextInputLayout android:id="@+id/text_input_layout" android:layout_width="match_parent" app:errorTextAppearance="@style/error_style" android:layout_height="wrap_content"> <EditText android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="20sp" android:textColor="#0F0" android:hint="请输入手机号"/> </android.support.design.widget.TextInputLayout>
error_style的代码如下:
[code] <style name="erroe_style"> <item name="android:textColor">#FFFF33</item> </style>
运行效果如下:
如有什么错误希望大家指出。
相关文章推荐
- Android 多渠道打包原理和使用
- Android实现手机拍照功能
- Android-Androidstudio的快捷键
- Android判断屏幕锁屏的方法总结
- android4.4系统源码编译(四)_问题总结
- 轻松实现Android指南针功能
- Android 多渠道打包原理和使用
- Robotframework框架AndroidLibrary库安装
- Android Studio 导入第三方jar包
- Android GridView 指定行数,动态行宽,占满空间
- Android 学习资源收集
- android mvvm初探
- 15个必知的Android开发者选项
- Android学习笔记-View的位置参数以及手势的监听
- Android Watchdog框架看门狗解析、死锁应用与改造(下)
- 简单实现Android学生管理系统(附源码)
- 如何让Android service进程变成前台进程
- Android的输入验证,如邮箱正则验证...
- android动画深入学习
- Android自动填充短信验证码