从登陆界面学习TextInputLayout

前言

源码传送门  https://github.com/xiehui999/fuseProgram

https://gold.xitu.io/post/587c1637128fe10057f745db

在 Material

Design出现之前,如果我们想写一个登陆界面是不是一般都写两组TextView,EditText及一个Button,如果你想在账号和密码后面加一个计数的功能,又需要加控件并且要自己实现计数,或者在密码框后面加个类似眼睛的密码显示开关,或者你想加一个账号或者密码输入无效或者错误的提醒,一般是显示一个Toast或者使用EditText的setError设置,不过体验并不是太好,等等这些麻烦的的处理在Material

Design

TextInputLayout出现后得到了极大改善,我们可以做最少的事达到最好的效果,今天的这篇文章就是通过一个登陆界面来学习TextInputLayout的API重要方法及其使用。先来一张效果图

这里写图片描述

添加依赖

TextInputLayout是在Material Design中的,所以我们需要在gradle 文件配置

dependencies {    compile'com.android.support:appcompat-v7:24.2.0'compile'com.android.support:design:24.2.0'}

使用

TextInputLayout官方文档API中描述它是一种新的继承自LinearLayout的布局,使用时只能包含一个EditText或其子类的控件,该布局可以通过设置hint和Error显示浮动标签。接下我们看看布局文件


使用其实很简单,只需要一个TextInputLayout(需要全路径)容器并在其中加一个EditText(或子类),需要注意的是一个TextInputLayout有且只能对应一个EditText。在TextInputLayout加入android:hint="账号"就可以显示一个浮动标签了,效果图如上,还可以通过下面代码将浮动标签关闭,如果关闭的话,设置hint也就没有效果了,默认是开启的。

app:hintEnabled="false"

对于android:hint="账号"属性在TextInputLayout或者在EditText中设置都可以达到我们浮动标签的效果,但是不能在两者中同时使用设置hint,当两者同时使用时没有获取焦点时都会显示hint(两个hint重叠显示),获取焦点时TextInputLayout设置的hint会成为悬浮标签,但是此时EditText设置的hint不会消失,有输入内容时才会消失,具体原因可以自己阅读源码查看,代码不多,很容易看出来。对于浮动标签显示隐藏切换有一个过渡动画,可以通过

app:hintAnimationEnabled="boolean"设置。

如果我们此时想在账号那一栏后面加个字数统计,例如一般情况我们的账号是固定位数的,如果使用手机号作为我们的登录账号,此时我们加一个统计输入长度可以提示用户当然也可以超过位数时限制其输入,我们只需要在TextInputLayout加入

app:counterEnabled="true"

默认是关闭的,当然我们可以设置一个输入的最大长度,此处设置11.

app:counterMaxLength="11"

当我们设置输入的最大技术长度11时并不是到达11后不能再输入计数,而是会以一种颜色提示用户强调超过设置长度。

TextInputLayout提供了设置错误提醒的功能,在此篇文章中我们用手机号及密码至少6位做判断,

·if(TextUtils.isEmpty(account)||!isAccountValid(account)) {            accountinput.setError(getString(R.string.error_invalid_account));      }if(TextUtils.isEmpty(password)||!isPasswordValid(password)) {            passwordinput.setError(getString(R.string.error_invalid_password));        }  private boolean isAccountValid(Stringname) {//TODO:Replace this with your own logicPattern pattern= Pattern.compile("^(13[0-9]|14[5|7]|15\\d|17[6|7]|18[\\d])\\d{8}$");returnpattern.matcher(name).matches();        }    private boolean isPasswordValid(Stringpassword) {//TODO:Replace this with your own logicreturnpassword.length() >6;    }

当我们输入不符合规则,设置错误,显示效果如下,

这里写图片描述

对于设置错误,可以通过app:errorEnabled="boolean"或者代码accountinput.setEnabled(boolean);将其打开或者关闭,当通过accountinput.setError()设置错误时源码中默认调用setEnabled(true)打开,无需自己再次调用,还有一个注意的地方设置后不会自动取消,需要自己调用accountinput.setError(null);取消错误提示。例如在上面图示提示错误后,我们在编辑该EditText时需要取消错误提示,那么我们可以通过addTextChangedListener监听,代码如下

mAccountView.addTextChangedListener(newTextWatcher() {            @Override            publicvoidbeforeTextChanged(CharSequence s, int start, int count, int after) {            }            @Override            publicvoidonTextChanged(CharSequence s, int start, int before, int count) {            }            @Override            publicvoidafterTextChanged(Editable s) {if(accountinput.getError()!=null){                    accountinput.setError(null);                }            }        });

当我们编辑时回调执行,我们通过getError获取设置的错误信息,如果设置的有内容则返回设置的字符,默认为null。

对于输入密码的空间我们通过TextInputLayout中EditText

的android:inputType="textPassword"设置输入密码,此时我们可以在右侧看到一个眼睛的密码开关实现将密码显示或隐藏。如果我们不想显示这个眼睛图标可以在TextInputLayout中加入

app:passwordToggleEnabled="false"

此时就看不到眼睛的图标,密码也不在隐藏,当我们想将眼睛的图标设置为我们自己设计的图标时,可以通过下面代码设置

app:passwordToggleDrawable="@drawable/common_full_open_on_phone"

我们还可以通过passwordToggleTint给图标设置着色并且通过passwordToggleTintMode设置对应模式,达到更好看的效果。

是不是很简单,这些功能要在之前布局肯定需要一大堆代码的,而现在很简单,只要几行代码。

自定义EditText下划线样式

这里写图片描述

默认情况下EditText的下划线是灰色的,当获取焦点时颜色是colorAccent,如上图,如果我们想自定义,可以给TextInputLayout加一个theme,如下代码

android:theme="@style/customLineColor"

customLineColor样式为colorControlNormal为没有获取焦点时的颜色,colorControlActivated为获取焦点时的颜色,这样就可以设置我们想要的颜色了。

@color/colorAccent

@color/drawerTextColor

自定义浮动标签

默认情况下浮动标签的颜色也是colorAccent,我们可以通过hintTextAppearance设置浮动标签字体样式,如

app:hintTextAppearance="@style/hintAppearance",

14sp

@color/colorPrimary

自定义错误提示信息

app:errorTextAppearance="@style/errorAppearance"

14sp

@color/red

自定义超出计数最大长度样式

app:counterOverflowTextAppearance="@style/counterOverflowTextAppearance"

14sp

@color/red

监控虚拟键盘

通过上面的介绍,我们将TextInputLayout的使用及常用的设置都已经都介绍了,既然文章名字是登录界面,下面简单介绍一下其他一些比较多登录界面的一些实现。如当焦点在账户上,我们输入完成后直接点击虚拟键盘上的下一项时焦点直接跳到密码项,密码输入完成,直接可以点击虚拟键盘的确定就可以登录,该怎么实现呢。如下

在账号的EditText中加入

android:imeActionId="@+id/password"android:imeOptions="actionNext"

在密码的EditText中加入

android:imeActionId="@+id/account_sign_in_button"android:imeOptions="actionDone"

mPasswordView.setOnEditorActionListener(newTextView.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();returntrue;                }returnfalse;            }        });

动态监测登录按钮

在支付宝中,当账户名或者密码有没填的项,登录按钮就是不可点击的,并通过样式给用户反馈是不是可以点击。这个也很简单,只需要给两个EditText设置addTextChangedListener监听,监听两个控件只有有没填项就将登录按钮设置为不可以点击,否则可以点击,核心代码

if(account.equals("")||password.equals("")){                    mAccountSignInButton.setClickable(false);                    mAccountSignInButton.setTextColor(getResources().getColor(R.color.btninvalid));                }else{                    mAccountSignInButton.setClickable(true);                    mAccountSignInButton.setTextColor(getResources().getColor(R.color.white));                }

#多账号自动提示

AutoCompleteTextView是EditText的子类,可以实现自动提示功能该控件有一个setAdapter方法,可以监测我们输入的内容在传入的适配器中有数据时会自动弹出下拉提示,在文章开始效果图已经展示,代码简单实现

privateString[] accounts = {"18236593333","13463373657","18235784765","18234637686"};        ArrayAdapter arrayAdapter=newArrayAdapter(this,android.R.layout.simple_list_item_1,accounts);        mAccountView.setAdapter(arrayAdapter);//输入至少两个字符才会提示

Ok,到这里本篇文章就结束了,有问题欢迎留言指出,Have a wonderful day .

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 151,829评论 1 331
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 64,603评论 1 273
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 101,846评论 0 226
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 42,600评论 0 191
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 50,780评论 3 272
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 39,695评论 1 192
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,136评论 2 293
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 29,862评论 0 182
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 33,453评论 0 229
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 29,942评论 2 233
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 31,347评论 1 242
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 27,790评论 2 236
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 32,293评论 3 221
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 25,839评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,448评论 0 181
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 34,564评论 2 249
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 34,623评论 2 249

推荐阅读更多精彩内容