浅析Android Material Design之TextInputLayout
来源:互联网 发布:淘宝首页 javascript 编辑:程序博客网 时间:2024/06/05 05:48
Material Design(质感设计)是Google工程师基于传统优秀的设计原则,结合丰富的创意和科学技术所发明的一套全新的界面设计语言,主要用于解决Android平台界面风格不统一的问题。在2015年的Google I/O大会上退出的Design Support库将Material Design中最具代表性的一些控件和效果进行了封装,从而方便开发者调用相应的API来实现相应的MD风格。
本篇主要介绍TextInputLayout的使用。
首先声明:
TextInputLayout是一个类似于LinearLayout存放空间的容器,TextInputLayout和ScrollView一样只能接受一个子元素,并且子元素是EditText的类型。
接下来介绍TextInputLayout的使用:
首先添加Gradle依赖:
现在我们就可以使用TextInputLayout控件了。
布局文件中具体使用:
<?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>
其中,android:hint属性指定了浮动标签所显示的内容。当然也可以直接使该属性失效:app:hintEnabled="false"
,
此外对于浮动标签的显示隐藏切换有一个过渡动画,我们可以通过app:hintAnimationEnabled="false"
来取消该效果。
指定输入的最大值:app:counterMaxLength="11"
,一旦在xml代码中指定了最大值,代码中可以通过accountinput.getcounterMaxLength()
来获取设置的值。
设置错误提示:
首先确保错误提示的功能是开启的。
xml方式:app:errorEnabled="true"
代码方式:accountinput.setErrorEnabled(true)
如果要关闭错误提示:
取消错误提示:
方式一:
accoutinput.setEnable(true); passwordinput.setEnable(true); //setEnabled设置之后不会自动的取消错误提示,只有置为空之后才会取消 accoutinput.setError(null); passwordinput.setError(null);
方式二:
accountinput.setErrorEnable(false);passwordinput.setErrorEnable(false);
方式三:
app:errorEnabled="false"
我这里辨析一下,xml和java代码是一致的,其中errorEnable是表示是否开启显示错误的功能;error指的是当错误发生时在TextInputLayout下会有错误的提示并且我们仍然可以输入;而enable不同,当我们设置为false的时候,整个空间处于不可用的状态,我们无法输入值
常见使用方式:
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) { } });
在实际的应用中,如果我们需要在编辑的时候自动的取消错误的提示
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); } } });
关于密码效果的使用,在EditText中指定类型为textPassword,并且在TextInputLayout中指定app:passwordToggleEnabled="true"
,可以得到密码是否可见的效果。
<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>
当然我们也会在输入完成的时候取消烦人的软键盘,此时我们可以在TextInputLayout上设置监听事件onClick:
<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>
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); } }
- 浅析Android Material Design之TextInputLayout
- Android Material Design之TextInputLayout
- Android Material Design之TextInputLayout
- Android Material Design 之 TextInputLayout
- Material Design之TextInputLayout
- Material Design之TextInputLayout
- Material Design之TextInputLayout
- Material Design之TextInputLayout
- Android Material Design -TextInputLayout
- Android Material Design系列之TextInputLayout
- Android Material Design系列之TextInputLayout
- Android Material Design之TextInputLayout、TextInputEditText解析
- Android:Material Design之TextInputLayout使用
- Material Design系列之TextInputLayout
- Material Design-UI之TextInputLayout
- Material Design控件之TextInputLayout
- Android进阶——Material Design新控件之TextInputLayout
- Android开发——Material Design系列之TextInputLayout
- TCP-IP协议族(二) HTTP报文头解析
- 字符串匹配的三种算法
- JAVA基础知识-常用但容易出错的代码
- mtk 主题功能学习笔记
- test title
- 浅析Android Material Design之TextInputLayout
- navicat mysql导入数据sq文件时 USING BTREE 错误解决办法
- Android开发——设置权限
- 用golang写的一个链表
- 【C#源码】爱流量活动免费领取300M移动流量 Q群验证
- 博客迁移
- BigDecimal总结
- vs2013新建类时自动添加头注释
- EDA软件_Cadence_Allegro 16.6添加封装库路径(导入网表时需要)