Material Design风格登录注册

本文实现了以下功能

完整的代码和样例托管在Github
当接口锁定时，防止后退按钮显示在登录Activity 上。
自定义 ProgressDialog来显示加载的状态。
符合材料设计规范。
悬浮标签（floating labels）（来自设计支持库）
用户表单输入校验
自定义状态栏样式
在每一个Activity 测试模仿验证的方法。

剩下的就是实现自己的身份验证逻辑。

源码

登录Activity

如果你想要添加社交登录按钮，请继续，但是当前在这个文章范围内，只给你基本的代码，让你有一个坚固的起点去构建你的验证流程。

需要注意的是 onBackPressed 方法将会被重写，这样将会防止用户关闭登录Activity。

 @Override

    public void onBackPressed() {

        // Disable going back to the MainActivity

        moveTaskToBack(true);

    }

moveTaskToBack用户在按返回键的时候你并不希望退出（默认就finish了），而是只希望置后台，就可以调这个方法

参考链接

moveTaskToback退后台 - Android探索之路 - 博客频道 - CSDN.NET

LoginActivity

package com.sourcey.materiallogindemo;

import android.app.ProgressDialog;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.util.Log;

import android.content.Intent;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

import android.widget.Toast;

import butterknife.ButterKnife;

import butterknife.Bind;

public class LoginActivity extends AppCompatActivity {

    private static final String TAG = "LoginActivity";

    private static final int REQUEST_SIGNUP = 0;

    @Bind(R.id.input_email) EditText _emailText;

    @Bind(R.id.input_password) EditText _passwordText;

    @Bind(R.id.btn_login) Button _loginButton;

    @Bind(R.id.link_signup) TextView _signupLink;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_login);

        ButterKnife.bind(this);

        _loginButton.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                login();

            }

        });

        _signupLink.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                // Start the Signup activity

                Intent intent = new Intent(getApplicationContext(), SignupActivity.class);

                startActivityForResult(intent, REQUEST_SIGNUP);

            }

        });

    }

    public void login() {

        Log.d(TAG, "Login");

        if (!validate()) {

            onLoginFailed();

            return;

        }

        _loginButton.setEnabled(false);

        final ProgressDialog progressDialog = new ProgressDialog(LoginActivity.this,

                R.style.AppTheme_Dark_Dialog);

        progressDialog.setIndeterminate(true);

        progressDialog.setMessage("Authenticating...");

        progressDialog.show();

        String email = _emailText.getText().toString();

        String password = _passwordText.getText().toString();

        // TODO: Implement your own authentication logic here.

        new android.os.Handler().postDelayed(

                new Runnable() {

                    public void run() {

                        // On complete call either onLoginSuccess or onLoginFailed

                        onLoginSuccess();

                        // onLoginFailed();

                        progressDialog.dismiss();

                    }

                }, 3000);

    }

    @Override

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {

        if (requestCode == REQUEST_SIGNUP) {

            if (resultCode == RESULT_OK) {

                // TODO: Implement successful signup logic here

                // By default we just finish the Activity and log them in automatically

                this.finish();

            }

        }

    }

    @Override

    public void onBackPressed() {

        // Disable going back to the MainActivity

        moveTaskToBack(true);

    }

    public void onLoginSuccess() {

        _loginButton.setEnabled(true);

        finish();

    }

    public void onLoginFailed() {

        Toast.makeText(getBaseContext(), "Login failed", Toast.LENGTH_LONG).show();

        _loginButton.setEnabled(true);

    }

    public boolean validate() {

        boolean valid = true;

        String email = _emailText.getText().toString();

        String password = _passwordText.getText().toString();

        if (email.isEmpty() || !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {

            _emailText.setError("enter a valid email address");

            valid = false;

        } else {

            _emailText.setError(null);

        }

        if (password.isEmpty() || password.length() < 4 || password.length() > 10) {

            _passwordText.setError("between 4 and 10 alphanumeric characters");

            valid = false;

        } else {

            _passwordText.setError(null);

        }

        return valid;

    }

}

res/layout/activity_login.xml

<?xml version="1.0" encoding="utf-8"?>

<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:fitsSystemWindows="true">

    <LinearLayout

        android:orientation="vertical"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingTop="56dp"

        android:paddingLeft="24dp"

        android:paddingRight="24dp">

        <ImageView android:src="@drawable/logo"

            android:layout_width="wrap_content"

            android:layout_height="72dp"

            android:layout_marginBottom="24dp"

            android:layout_gravity="center_horizontal" />

        <!--  Email Label -->

        <android.support.design.widget.TextInputLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="8dp"

            android:layout_marginBottom="8dp">

            <EditText android:id="@+id/input_email"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:inputType="textEmailAddress"

                android:hint="Email" />

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

        <!--  Password Label -->

        <android.support.design.widget.TextInputLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="8dp"

            android:layout_marginBottom="8dp">

            <EditText android:id="@+id/input_password"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:inputType="textPassword"

                android:hint="Password"/>

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

        <android.support.v7.widget.AppCompatButton

            android:id="@+id/btn_login"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="24dp"

            android:layout_marginBottom="24dp"

            android:padding="12dp"

            android:text="Login"/>

        <TextView android:id="@+id/link_signup"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_marginBottom="24dp"

            android:text="No account yet? Create one"

            android:gravity="center"

            android:textSize="16dip"/>

    </LinearLayout>

</ScrollView>

注册Activity

注册Activity 可以让你在App 中创建一个用户，通常会在登录Activity 中显示（注册的）链接。

需要注意的是当用户注册成功时我们会设置一个RESULT_OK 的结果值，这个结果将会在登录Activity 中的 onActivityResult 方法中调用，并且确定注册成功是如何处理的。当前逻辑是很简单的，当用户注册成功时我们会马上做一个记录。当然你想要实现邮箱验证，你需要自己来实现。

SignupActivity.java

package com.sourcey.materiallogindemo;

import android.app.ProgressDialog;

import android.os.Bundle;

import android.support.v7.app.AppCompatActivity;

import android.util.Log;

import android.view.View;

import android.widget.Button;

import android.widget.EditText;

import android.widget.TextView;

import android.widget.Toast;

import butterknife.ButterKnife;

import butterknife.Bind;

public class SignupActivity extends AppCompatActivity {

    private static final String TAG = "SignupActivity";

    @Bind(R.id.input_name) EditText _nameText;

    @Bind(R.id.input_email) EditText _emailText;

    @Bind(R.id.input_password) EditText _passwordText;

    @Bind(R.id.btn_signup) Button _signupButton;

    @Bind(R.id.link_login) TextView _loginLink;

    @Override

    public void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_signup);

        ButterKnife.bind(this);

        _signupButton.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                signup();

            }

        });

        _loginLink.setOnClickListener(new View.OnClickListener() {

            @Override

            public void onClick(View v) {

                // Finish the registration screen and return to the Login activity

                finish();

            }

        });

    }

    public void signup() {

        Log.d(TAG, "Signup");

        if (!validate()) {

            onSignupFailed();

            return;

        }

        _signupButton.setEnabled(false);

        final ProgressDialog progressDialog = new ProgressDialog(SignupActivity.this,

                R.style.AppTheme_Dark_Dialog);

        progressDialog.setIndeterminate(true);

        progressDialog.setMessage("Creating Account...");

        progressDialog.show();

        String name = _nameText.getText().toString();

        String email = _emailText.getText().toString();

        String password = _passwordText.getText().toString();

        // TODO: Implement your own signup logic here.

        new android.os.Handler().postDelayed(

                new Runnable() {

                    public void run() {

                        // On complete call either onSignupSuccess or onSignupFailed

                        // depending on success

                        onSignupSuccess();

                        // onSignupFailed();

                        progressDialog.dismiss();

                    }

                }, 3000);

    }

    public void onSignupSuccess() {

        _signupButton.setEnabled(true);

        setResult(RESULT_OK, null);

        finish();

    }

    public void onSignupFailed() {

        Toast.makeText(getBaseContext(), "Login failed", Toast.LENGTH_LONG).show();

        _signupButton.setEnabled(true);

    }

    public boolean validate() {

        boolean valid = true;

        String name = _nameText.getText().toString();

        String email = _emailText.getText().toString();

        String password = _passwordText.getText().toString();

        if (name.isEmpty() || name.length() < 3) {

            _nameText.setError("at least 3 characters");

            valid = false;

        } else {

            _nameText.setError(null);

        }

        if (email.isEmpty() || !android.util.Patterns.EMAIL_ADDRESS.matcher(email).matches()) {

            _emailText.setError("enter a valid email address");

            valid = false;

        } else {

            _emailText.setError(null);

        }

        if (password.isEmpty() || password.length() < 4 || password.length() > 10) {

            _passwordText.setError("between 4 and 10 alphanumeric characters");

            valid = false;

        } else {

            _passwordText.setError(null);

        }

        return valid;

    }

}

res/layout/activity_signup.xml

<?xml version="1.0" encoding="utf-8"?>

<ScrollView

    xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent"

    android:fitsSystemWindows="true">

    <LinearLayout

        android:orientation="vertical"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:paddingTop="56dp"

        android:paddingLeft="24dp"

        android:paddingRight="24dp">

        <ImageView android:src="@drawable/logo"

            android:layout_width="wrap_content"

            android:layout_height="72dp"

            android:layout_marginBottom="24dp"

            android:layout_gravity="center_horizontal" />

        <!-- Name Label -->

        <android.support.design.widget.TextInputLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="8dp"

            android:layout_marginBottom="8dp">

            <EditText android:id="@+id/input_name"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:inputType="textCapWords"

                android:hint="Name" />

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

        <!--  Email Label -->

        <android.support.design.widget.TextInputLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="8dp"

            android:layout_marginBottom="8dp">

            <EditText android:id="@+id/input_email"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:inputType="textEmailAddress"

                android:hint="Email" />

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

        <!-- Password Label -->

        <android.support.design.widget.TextInputLayout

            android:layout_width="match_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="8dp"

            android:layout_marginBottom="8dp">

            <EditText android:id="@+id/input_password"

                android:layout_width="match_parent"

                android:layout_height="wrap_content"

                android:inputType="textPassword"

                android:hint="Password"/>

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

        <!-- Signup Button -->

        <android.support.v7.widget.AppCompatButton

            android:id="@+id/btn_signup"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_marginTop="24dp"

            android:layout_marginBottom="24dp"

            android:padding="12dp"

            android:text="Create Account"/>

        <TextView android:id="@+id/link_login"

            android:layout_width="fill_parent"

            android:layout_height="wrap_content"

            android:layout_marginBottom="24dp"

            android:text="Already a member? Login"

            android:gravity="center"

            android:textSize="16dip"/>

    </LinearLayout>

</ScrollView>

配置

为了让程序一切正常工作，我们在需要在 app 目录下的 build.gradle 中添加一些依赖，ButterKnife 是可选的，当然我们更喜欢用它让我们的Java 代码更加整洁一些。

dependencies {

    compile fileTree(dir: 'libs', include: ['*.jar'])

    compile 'com.android.support:appcompat-v7:22.2.0'

    compile 'com.android.support:design:22.2.0'

    compile 'com.jakewharton:butterknife:7.0.1'

}

本文中使用了ButterKnife

也就是 findViewById()，一直以来的做法都是一个个定义，然后在 setContentView() 或 inflate() 之后一一来findViewById()进行实例化，而使用 ButterKnife，你只需要在代码中使用注解方式进行对象申明，然后在 setContentView() 或 inflate() 之后调用一句话，那么申明的所有对象自动创建出来。

 @Bind(R.id.input_email) EditText _emailText;

    @Bind(R.id.input_password) EditText _passwordText;

    @Bind(R.id.btn_login) Button _loginButton;

    @Bind(R.id.link_signup) TextView _signupLink;

 ButterKnife.bind(this);

参考链接

原文链接

教你写一个炫酷的Material Design 风格的登录和注册页面