Material Design 入门(一)——TextInputLayout和TextInputEditText

原创 2016年08月29日 17:04:45

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

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

compile 'com.android.support:design:24.1.1'即可。下面就开始Material Design的学习之旅吧。
本节为大家讲解的是TextInputLayoutTextInputEditText
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) {

            }
        });
效果如图:(红色框内的字体颜色还没有找到方法修改,各位可以研究下,有方法可以给我留言。)

     

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

给 Android 开发者的 RxJava 详解

该文章转自扔物线的文章,写的非常不错,清晰易懂。http://gank.io/post/560e15be2dca930e00da1083 前言 我从去年开始使用 RxJava ,到...

Design库-TextInputLayout属性详解

1.什么是TextInputLayout 2.为什么要用TextInputLayout 3.TextInputLayout的基本使用 4.TextInputLayout的基本属性

TextInputLayout与TextInputEditText详解

导读:Android 从5.0版本开始,新增了Android Materia Design库,让开发者高效的实现炫酷的UI效果本篇文章将介绍Materia Design库的TextInputLayou...

Material Design之TextInputLayout

使用TextInputLayout,首先要添加design library依赖, 打开build.gradle(Module:app),加入 compile 'com.android.support...
  • wu_wxc
  • wu_wxc
  • 2015-08-04 11:04
  • 1004

Materail Design 入门(三)——FloatingActionButton和Snackbar

这节我们蒋一起学习两个小控件FloatingActionButton和Snackbar 1、FloatingActionButton 一个负责显示界面基本操作的圆形按钮。Design library中...

Android获取系统的硬件信息、系统版本以及如何检测ROM类型

一、获取手机信息Android获取手机制作商,系统版本等获取Android 的Rom信息,以及判断是否为MIUI及获取MIUI版本在开发中 我们有时候会需要获取当前手机的系统版本来进行判断,或者需要获...

TextInputLayout、Snackbar使用

这篇博客带来Android M 里面的TextInputLayout和Snackbar的使用,及简单介绍。首先我们必须更新sdk,引入Android M: compile 'com.android.s...

<Android 基础(十二)> TextInputLayout,让输入框更有灵性

TextInputLayout简单介绍和简单使用记录

《学习记录》TextInputLayout一般用法

《学习记录》TextInputLayout一般用法design库已经出现相当长一段时间了,平时除了用一用TabLayout,其他基本没用到!这怎么能忍,看到谷歌给的LoginActivity的temp...

Android中EditText输入框焦点从文字前面变成文字后面

Android中一个EditText,通过代码已经设置了默认的值为字符串0了: ? 1 2 etxtSingleAddress = (E...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)