教你寫一個炫酷的Material Design 風格的登錄和註冊頁面

每個人都會喜歡漂亮的登錄界面，一個App 給人們的第一印象是非常重要的。

這篇文章將教你使用谷歌材料設計規範（Material design spec ）和谷歌的新的設計支持庫（ design support library）來創建一個炫酷的登錄和註冊界面。設計支持庫實現了材料設計規範的一部分，它包含了一部分炫酷的UI 部件，讓你的Android 應用給人一種優雅的感覺。

對事物的設計和布局方面，如何做到讓人感覺到屏幕上的內容是賞心悅目的，這裡是我們要權衡的重點，我們會在頂部狀態欄添加精細的觸摸事件，並使用設計支持庫的floating labels （實現自TextInputLayout）。

幾乎所有的事情都都已經照顧到你。

• 完整的代碼和樣例託管在Github

• 當介面鎖定時，防止後退按鈕顯示在登錄Activity 上。

• 自定義 ProgressDialog來顯示載入的狀態。

• 符合材料設計規範。

• 懸浮標籤（floating labels）（來自設計支持庫）

• 用戶表單輸入校驗

• 自定義狀態欄樣式

• 在每一個Activity 測試模仿驗證的方法。

剩下的就是實現自己的身份驗證邏輯。

獲取源碼：https://github.com/sourcey/materiallogindemo

登錄Activity

讓我們來設置登錄Activity，通常是開始你的應用程序，會顯示給用戶的第一個要啟動的Activity。

如果你想要添加社交登錄按鈕，請繼續，但是當前在這個文章範圍內，只給你基本的代碼，讓你有一個堅固的起點去構建你的驗證流程。

需要注意的是 onBackPressed 方法將會被重寫，這樣將會防止用戶關閉登錄Activity。

LoginActivity.java

res/layout/activity_login.xml

註冊Activity 可以讓你在App 中創建一個用戶，通常會在登錄Activity 中顯示（註冊的）鏈接。

需要注意的是當用戶註冊成功時我們會設置一個RESULT_OK 的結果值，這個結果將會在登錄Activity 中的 onActivityResult 方法中調用，並且確定註冊成功是如何處理的。當前邏輯是很簡單的，當用戶註冊成功時我們會馬上做一個記錄。當然你想要實現郵箱驗證，你需要自己來實現。

SignupActivity.java

res/layout/activity_signup.xml

配置

為了讓程序一切正常工作，我們在需要在 app 目錄下的 build.gradle 中添加一些依賴，ButterKnife 是可選的，當然我們更喜歡用它讓我們的Java 代碼更加整潔一些。

還有一個我們必須要在AndroidManifest 中添加聲明Activity。我已經把AndroidManifest 清晰完整的代碼貼了出來。

希望這篇文章對你是有幫助的，如果這篇文章真的節約你寶貴的開發時間，請給我留言。

本文作者：sourcey

本文譯者：Tikitoo

原文鏈接：http://sourcey.com/beautiful-android-login-and-signup-screens-with-material-design/

翻譯鏈接：http://tikitoo.github.io/2016/05/17/beautiful-android-login-and-signup-screens-with-material-design-zh

非商業轉載轉載請在開頭註明作者詳細信息和本文出處，以及本文所有內容。

本文首發我的微信公眾號，分享Android 開發和互聯網內容。

微信號：AndroidMate

公眾號：安卓同學

推薦閱讀：