Design下TextInputLayout结合EditText的简单使用

原创 2016年08月30日 17:29:43

今天写的是Design下的TextInputLayout。

稍微介绍一下,一般我们在App上面登录注册页面时,都需要去检测用户输入的内容是否正确,然后给出提醒或错误显示。之前我们都是布局写一大堆代码,显示错误信息,判断控件内容。总的来说比较麻烦。而现在有了TextInputLayout,我们不在需要这么麻烦。

TextInputLayout给我们提供了两种功能:

1,给EditText添加一个带有动画效果的提示标签(利用EditTexthint属性的值作为提示标签内容),
2,处理错误输入,将错误输入提示信息显示在EditText附近,便于提示用户更好地完成输入。
TextInputLayout只是一个ViewGroup,里面可以定义Edittext,而且会把EditText中hint属性作为提示标签。
首先需先导入Design包:
之后build.gradle文件下会多下面一句代码:
先看下activity_mian.xml布局文件:
<?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:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="main.hwh.com.textinputtext.MainActivity"
    android:orientation="vertical">

    <android.support.design.widget.TextInputLayout
        android:id="@+id/usernameLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/username"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:hint="Username"/>

    </android.support.design.widget.TextInputLayout>
    <android.support.design.widget.TextInputLayout
        android:id="@+id/passwordLayout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content">

        <EditText
            android:id="@+id/password"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:inputType="textEmailAddress"
            android:hint="Password"/>

    </android.support.design.widget.TextInputLayout>

    <Button
        android:id="@+id/loginBtn"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginLeft="20dp"
        android:layout_marginRight="20dp"
        android:layout_marginTop="50dp"
        android:text="Login"
        android:onClick="loginOnClick"
        android:layout_gravity="center"/>

</LinearLayout>

这个是个简单登录页面。两个TextInputLayout分别包裹UserName和Password。
注意:当EditText设置了Hint属性时,它的内容将作为TextInputLayout的提示标签,不是错误标签。
下面看一下用法,MainActivity.java:
<pre style="font-family: Consolas; font-size: 10.5pt; background-color: rgb(255, 255, 255);"><pre name="code" class="java">public class MainActivity extends AppCompatActivity {

    private TextInputLayout usernameLayout;
    private TextInputLayout passwordLayout;
    private Button loginBtn;


//
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        initView();
    }

    private void initView() {
        usernameLayout = ((TextInputLayout) findViewById(R.id.usernameLayout));
        passwordLayout = ((TextInputLayout) findViewById(R.id.passwordLayout));
        loginBtn = ((Button) findViewById(R.id.loginBtn));
    }

    public void loginOnClick(View v){
        hideKeyboard();
        String username = usernameLayout.getEditText().getText().toString();
        String password = passwordLayout.getEditText().getText().toString();

        if (!"Tmac".equals(username)){
            usernameLayout.setError("你不是麦迪。请重新输入");
        }else if(!"123456".equals(password)){
            passwordLayout.setError("密码错误,请重新输入");
        }else{
            //用户名密码都正确。取消Error显示
            usernameLayout.setErrorEnabled(false);
            passwordLayout.setErrorEnabled(false);
            Toast.makeText(this,"欢迎回来",Toast.LENGTH_LONG).show();

        }
    }

    //隐藏虚拟键盘
    private void hideKeyboard() {
        View view = getCurrentFocus();
        if (view != null) {
            ((InputMethodManager) getSystemService(Context.INPUT_METHOD_SERVICE)).
                    hideSoftInputFromWindow(view.getWindowToken(), InputMethodManager.HIDE_NOT_ALWAYS);
        }
    }
}


其中
usernameLayout.getEditText().getText().toString();

可以到EditText中输入的内容。
usernameLayout.setError("你不是麦迪。请重新输入");
这个方法是判断用户名错误之后希望他显示的错误信息。
usernameLayout.setErrorEnabled(false);
这个方法是用户名,密码都正确之后把他的错误提示设置为false,不这样设置的话,错误信息会一直显示。
下面看下效果图:



Android开发之TextInputLayout的简单使用(增强EditText)

前言:TextInputLayout是来增强EditText的,也是Google封装的很强大吧!从官方文档中可以看到TextInputLayout继承自LinearLayout,一般都是把EditTe...

Android Design Support Library(一):FloatingActionButton、TextInputLayout、TextInputEditText简单用法

Android Design Support Library(一):FloatingActionButton、TextInputLayout、TextInputEditText简单用法...

Material Design之TextInputLayout、Snackbar的使用

这两个控件也是Google在2015 I/O大会上发布的Design Library包下的控件,使用比较简单,就放在一起讲了,但有的地方也是需要特别注意一下。 TextInputLayout...

Material Design (二),TextInputLayout的使用

前言 一般登录注册界面都需要EditText这个控件来让用户输入信息,同时我们一般会设置一个标签(使用TextView)和EditText的hint属性来提示用户输入的内容,而设计库中高级组件Text...
  • ydxlt
  • ydxlt
  • 2016年03月16日 20:11
  • 2525

TextInputLayout使用以及EditText自己实现监听

TextInputLayout介绍: 首先呢,TextInputLayout是什么?TextInputLayout是一个能够把EditText包裹在当中的一个布局,当输入文字时,它可以把Hint文字飘...

使用TextInputLayout提升EditText的输入用户体验

TextInputLayout属于MD风格的控件,TextInputLayout这个控件主要是配合EditText来使用的,以前在EditText中我们经常需要给EditText设置一个hint属性告...

Material Design风格文本输入样式TextInputLayout的使用

TextInputLayout介绍TextInputLayout是Google基于Material Design风格出现的一个文本输入布局。主要特点在样式上,官方第一句介绍是当输入的文本显示或者隐藏的...

Android进阶系列--Design Support Library使用详解(Snackbar,TextInputLayout,TabLayout,NavigationView...)

Material Design 设计风格非常受欢迎,那么支持其效果的Design Support Library(Android 2.1  API  level 7及其以上)库又有哪些控件呢。主要包括...

Material Design之TextInputLayout使用示例

Google在2015的IO大会上,给我们带来了更加详细的Material Design设计规范,同时,也给我们带来了全新的Android Design Support Library,在这个supp...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Design下TextInputLayout结合EditText的简单使用
举报原因:
原因补充:

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