本文實(shí)現(xiàn)了以下功能

• 完整的代碼和樣例托管在Github
• 當(dāng)接口鎖定時(shí)，防止后退按鈕顯示在登錄Activity 上。
• 自定義 ProgressDialog來(lái)顯示加載的狀態(tài)。
• 符合材料設(shè)計(jì)規(guī)范。
• 懸浮標(biāo)簽（floating labels）（來(lái)自設(shè)計(jì)支持庫(kù)）
• 用戶表單輸入校驗(yàn)
• 自定義狀態(tài)欄樣式
• 在每一個(gè)Activity 測(cè)試模仿驗(yàn)證的方法。

剩下的就是實(shí)現(xiàn)自己的身份驗(yàn)證邏輯。

源碼

獲取源碼地址

登錄Activity

如果你想要添加社交登錄按鈕，請(qǐng)繼續(xù)，但是當(dāng)前在這個(gè)文章范圍內(nèi)，只給你基本的代碼，讓你有一個(gè)堅(jiān)固的起點(diǎn)去構(gòu)建你的驗(yàn)證流程。
需要注意的是 onBackPressed 方法將會(huì)被重寫，這樣將會(huì)防止用戶關(guān)閉登錄Activity。

@Overridepublic void onBackPressed() {// Disable going back to the MainActivitymoveTaskToBack(true);}

moveTaskToBack用戶在按返回鍵的時(shí)候你并不希望退出（默認(rèn)就finish了），而是只希望置后臺(tái)，就可以調(diào)這個(gè)方法

參考鏈接

moveTaskToback退后臺(tái) - 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;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_login);ButterKnife.bind(this);_loginButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {login();}});_signupLink.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// Start the Signup activityIntent 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 onLoginFailedonLoginSuccess();// onLoginFailed();progressDialog.dismiss();}}, 3000);}@Overrideprotected 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 automaticallythis.finish();}}}@Overridepublic void onBackPressed() {// Disable going back to the MainActivitymoveTaskToBack(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>

注冊(cè)Activity

注冊(cè)Activity 可以讓你在App 中創(chuàng)建一個(gè)用戶，通常會(huì)在登錄Activity 中顯示（注冊(cè)的）鏈接。

需要注意的是當(dāng)用戶注冊(cè)成功時(shí)我們會(huì)設(shè)置一個(gè)RESULT_OK 的結(jié)果值，這個(gè)結(jié)果將會(huì)在登錄Activity 中的 onActivityResult 方法中調(diào)用，并且確定注冊(cè)成功是如何處理的。當(dāng)前邏輯是很簡(jiǎn)單的，當(dāng)用戶注冊(cè)成功時(shí)我們會(huì)馬上做一個(gè)記錄。當(dāng)然你想要實(shí)現(xiàn)郵箱驗(yàn)證，你需要自己來(lái)實(shí)現(xiàn)。

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;@Overridepublic void onCreate(Bundle savedInstanceState) {super.onCreate(savedInstanceState);setContentView(R.layout.activity_signup);ButterKnife.bind(this);_signupButton.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {signup();}});_loginLink.setOnClickListener(new View.OnClickListener() {@Overridepublic void onClick(View v) {// Finish the registration screen and return to the Login activityfinish();}});}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 successonSignupSuccess();// 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>

配置

為了讓程序一切正常工作，我們?cè)谛枰?app 目錄下的 build.gradle 中添加一些依賴，ButterKnife 是可選的，當(dāng)然我們更喜歡用它讓我們的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()，一直以來(lái)的做法都是一個(gè)個(gè)定義，然后在 setContentView() 或 inflate() 之后一一來(lái)findViewById()進(jìn)行實(shí)例化，而使用 ButterKnife，你只需要在代碼中 使用注解方式進(jìn)行對(duì)象申明，然后在 setContentView() 或 inflate() 之后調(diào)用一句話，那么申明的所有對(duì)象自動(dòng)創(chuàng)建出來(lái)。

@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);

參考鏈接

推薦一個(gè)Android開(kāi)發(fā)懶人庫(kù) – ButterKnife - balenofly - 博客園

原文鏈接

教你寫一個(gè)炫酷的Material Design 風(fēng)格的登錄和注冊(cè)頁(yè)面

總結(jié)

以上是生活随笔為你收集整理的Material Design风格登录注册的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。