Material Design 入门（一）——TextInputLayout和TextInputEditText

来源：互联网发布：临床药物查询软件编辑：程序博客网时间：2024/06/06 09:42

Material Design 入门（一）——TextInputLayout和TextInputEditText

2016-08-29 17:04 2199人阅读评论(0)收藏举报

本文章已收录于：

分类：

Android Matarial Design（9）

作者同类文章X

最近学习了Material Design中提供的一些控件，下面就他们的使用方法陈述给大家，希望能够帮助大家快速上手。

本例子使用在控件都在com.Android.support:design包中，如果使用的是Android studio开发工具，在build.gradle 中直接添加

compile 'com.android.support:design:24.1.1'即可。下面就开始Material Design的学习之旅吧。

本节为大家讲解的是TextInputLayout和TextInputEditText

1、TextInputLayout

java.lang.Object   ↳android.view.View    ↳android.view.ViewGroup     ↳android.widget.LinearLayout      ↳android.support.design.widget.TextInputLayout

Layout which wraps an EditText (or descendant) to show a floating label when the hint is hidden due to the user

inputting text.
根据TextInputLayout的继承结构可以看出，它就是一种新的layout布局，并且在这个布局中包含了EditText或者其子类这个控件，这个

布局可以显示一个浮动的文字，用来展示EditText的提示文字hint和EditText输入错误时的错误提示文字。

setHint():设置EditText的提示文字

 setErrorEnabled(boolean):设置是否显示编辑框的错误提示

 setError(CharSequence)：设置编辑框的错误提示文字

下面给出基本例子：

<android.support.design.widget.TextInputLayout    android:id="@+id/textInputLayout"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="?attr/colorPrimaryDark"    android:padding="10dp"    android:visibility="gone">    <EditText        android:id="@+id/editText"        android:layout_width="match_parent"        android:layout_height="wrap_content"        android:background="@drawable/selector_edittext_bg"        android:inputType="number"        android:padding="5dp"        android:textColor="?attr/colorAccent"        android:textColorHint="@android:color/holo_red_light"/></android.support.design.widget.TextInputLayout>Java代码如下：
        textInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout);        textInputLayout.setHint("请输入4位学号");        editText = (EditText) findViewById(R.id.editText);        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.length() > 4) {
                    textInputLayout.setError("学号输入错误");                    textInputLayout.setErrorEnabled(true);                } else {                    textInputLayout.setErrorEnabled(false);                }            }            @Override            public void afterTextChanged(Editable editable) {            }        });  效果如图：
  
2、TextInputEditText
TextInputEditText是EditText的子类，可以和EditText一样和TextInputLayout一起使用实现hint提示和错误提示，只是UI效果有所差别。
setError（）：设置出错提示信息
代码如下：
<android.support.design.widget.TextInputLayout    android:id="@+id/textInputLayout"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="?attr/colorPrimaryDark"    android:padding="10dp"    android:visibility="visible">    <android.support.design.widget.TextInputEditText    android:id="@+id/editText"    android:layout_width="match_parent"    android:layout_height="wrap_content"    android:background="@drawable/selector_edittext_bg"   android:inputType="number"    android:padding="5dp"    android:textColor="?attr/colorAccent"    android:textColorHint="@android:color/holo_red_light"    android:visibility="gone"/>
</android.support.design.widget.TextInputLayout>
Java代码和上面差不多
        textInputLayout = (TextInputLayout) findViewById(R.id.textInputLayout);        textInputLayout.setHint("请输入4位学号");        editText = (EditText) findViewById(R.id.editText);        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.length() > 4) {                    editText.setError("学号输入错误");//                    textInputLayout.setError("学号输入错误");//                    textInputLayout.setErrorEnabled(true);                } else {//                    textInputLayout.setErrorEnabled(false);                }            }            @Override            public void afterTextChanged(Editable editable) {            }        });
效果如图：（红色框内的字体颜色还没有找到方法修改，各位可以研究下，有方法可以给我留言。）

顶: 0

踩: 2

上一篇Materail Design 入门（五）—— 使用DrawerLayout实现仿qq6.0的侧滑菜单功能
下一篇Material Design 入门（二）——CardView

我的同类文章

Android Matarial Design（9）

http://blog.csdn.net

•Materail Design 入门（八）——CollapsingToolbarLayout的使用方法2017-03-10阅读202
•Materail Design 入门（六）—— TabLayout之标题中添加自定义View（2）2017-03-07阅读181
•Materail Design 入门（四）——Toolbar的使用方法（2）2016-11-30阅读77
•Materail Design 入门（三）——FloatingActionButton和Snackbar2016-08-29阅读474
•Materail Design 入门（五）—— 使用DrawerLayout实现仿qq6.0的侧滑菜单功能2016-08-15阅读131

•Materail Design 入门（七）——AppBarLayout的使用方法2017-03-10阅读205
•Materail Design 入门（六）—— TabLayout之使用介绍（1）2017-03-06阅读87
•Materail Design 入门（四）——Toolbar的使用方法（1）2016-11-29阅读155
•Material Design 入门（二）——CardView2016-08-29阅读135

0 0