android design support library 大全,Android Design Support Library系列之三:TextInputLayout的使用...

原标题:Android Design Support Library系列之三:TextInputLayout的使用

EditText作为Android中最常用的组件之一,相信很多人对它都很熟悉,EditText有一个属性hint,能提示我们输入什么信息,当用户在EditText输入文字时,hint属性提示的文字就消失了。说到这,就要介绍今天的主角TextInputLayout了,使用TextInputLayout能让hint属性提示的文字在用户输入时不消失,而是显示为EditText上方的浮动标签。

a1e8574efefd1c7fcf861fa901c7d4a3.png

TextInputLayout官方文档

一、TextInputLayout的简单使用

惯例,使用前先添加依赖

dependencies { compile fileTree(include: ['*.jar'], dir: 'libs') compile 'com.android.support:appcompat-v7:25.3.1' compile 'com.android.support:design:25.3.1' }

TextInputLayout继承自LinearLayout,是一个容器。跟ScrollView只能嵌套一个子元素特性一样,TextInputLayout也只接受一个子元素。子元素需要是一个EditText

布局文件

上面的布局文件中有2个EditText,都声明了hint属性,其中一个EditText用TextInputLayout包裹了,另外一个没有.PS: 其实hint属性直接设置给TextInputLayout也是可以的

来看看效果图:

d04e2a4b880d5e1008fce657d3483306.gif

我们可以看到,一个单一的EditText 在输入文字的时候会隐藏hint提示的文本,而被包含在TextInputLayout中的EditText则会让hin提示的文本变成一个在EditText上方的浮动标签,同时还包括一个漂亮的material动画。

关于Android Design Support Library主题

我们在AndroidStudio中创建项目时,系统在res/values/style.xml中的主题一般向上面这样,大多数时候我们只是在这里去除ActionBar:

Theme.AppCompat.Light.NoActionBar

Material Design设计语言鼓励大家使用充满活力的鲜艳色彩,并在同一界面建议使用三种色调,Android Design Support Library中每个控件的设计颜色都来自 style.xml 中 theme 指定的三种颜色。在此处,我们通过修改 colorAccent 属性便可以指定 TextInputLayout 的浮动标签的字体颜色以及 EditText 的下划线颜色。

@android:color/holo_blue_dark二、TextInputLayout的一些属性、方法

属性

android:hint="" 直接把hint属性设置给TextInputLayout也是可以的 android:textColorHint="" hint提示内容的颜色(在下划线上时) app:hintEnabled="true" 设置是否可以使用hint属性,默认是true app:hintAnimatimock="false" 控制hint提示信息的动画是否开启 app:hintTextAppearance="" 设置hint提示文本(在浮动标签时)的样式(大小、颜色等等) app:errorTextAppearance="" 设置错误信息文本的样式(大小、颜色等等)

方法

getEditText() 返回TextInputLayout包裹的EditText getHint() 返回TextInputLayout包裹的EditText中的hint信息 setHint() 设置TextInputLayout包裹的EditText中的hint信息 setError() 设置错误显示信息 setErrorEnabled() 设置错误信息是否显示,true显示,false不显示

当然,Android中的属性和方法一般是一一对应的,你既可以在布局文件中设置,也可以通过代码设置。

三、TextInputLayout处理错误

在以前,我们一般都是在提交信息时才检验EditText中内容格式正不正确,如果用户输入了一大堆信息之后你再提示用户输入的格式不正确,这是一种很糟糕的体验。

而用TextInputLayout处理错误,可以实时验证EditText的内容,反馈结果给用户,防止用户输入无效的、错误的信息。

package com.my; import android.os.Bundle; import android.support.design.widget.TextInputLayout; import android.support.v7.app.AppCompatActivity; import android.text.Editable; import android.text.TextWatcher; import android.widget.EditText; public class MainActivity extends AppCompatActivity { private EditText etName; private TextInputLayout mTextInputLayout; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); etName = (EditText) findViewById(R.id.et_name); mTextInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout); /** * 为EditText 添加文本内容改变时的监听 */ etName.addTextChangedListener(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) { if (s.length() < 6) { mTextInputLayout.setErrorEnabled(true); mTextInputLayout.setError("用户名不能小于6位"); } else { mTextInputLayout.setErrorEnabled(false); } } @Override public void afterTextChanged(Editable s) { } }); } }

在EditText 内容发生改变时,我们通过判断EditText 内容来提示用户,这里我判断EditText 内容长度是否小于6,当然,你完全可以在这里通过正则表达式判断更多的东西.

cb4ae3469272e4d9b462dbb925d27c58.gif

可以看到,在EditText 内容不正确的时候,下方有一个错误信息显示,同时EditText 的下划线变成红色,这样就能实时的提示用户输入的内容是否正确了.

TextInputLayout使用比较简单,就介绍到这里,现在市场上有这种效果的app不是很多,不过相信在以后这种效果的估计会慢慢变多的。返回搜狐,查看更多

责任编辑:

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值