用TextInputLayout打造友好的Login页面

看下面的gif是不是感觉比一般的登陆页面要人性化的多啊，App除了数据是活的，界面在我们的手中也要动起来，今天一起来实现一个这样的友好的Login界面。

上面的两个实际上就是我们平时用的EditText，不一样的是我们给EditText又穿了一件花衣裳，他才会变成这样
android.support.design.widget.TextInputLayout
写到这里你有可能知道了，想用这个你要在你的gradle中引入
compile 'com.android.support:design:23.1.1'。
就好了
来看布局代码

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

      <EditText
          android:id="@+id/emailEt"
          android:layout_width="match_parent"
          android:layout_height="wrap_content"
          android:hint="UserName"
          android:inputType="textEmailAddress" />
</android.support.design.widget.TextInputLayout>

就这么简单，文章都在java代码，我们来实现它。

TextInputLayout tl_email = (TextInputLayout) findViewById(R.id.emailView);
tl_username.setHint("请输入正确的邮箱地址");
//点击登录按钮
findViewById(R.id.btn).setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                String email = tl_username.getEditText().getText().toString().trim();
                //正则匹配邮箱地址
                if (!validateEmail(email)) {
                //友好的错误提示
                    tl_username.setError("The emailAddress error");
                }else {
                   //将错误提示关掉
                   tl_username.setErrorEnabled(false);
                   //执行登录操作
                    doLogin();
                }
            }
        });  
        
  public void doLogin(){
  //下方提示登录成功，第一个参数为父布局就好
  Snackbar.make(parentView, "Login Sucess", 
  Snackbar.LENGTH_SHORT).setAction("login Sucess", null).show();
   }

你可以试一试

版权声明：

---

除非注明，本博文章均为原创，转载请以链接形式标明本文地址。