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

時(shí)間：2023-06-29 07:21:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-06-29 07:21:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

教你寫一個(gè)炫酷的Material Design 風(fēng)格的登錄和注冊(cè)頁(yè)面：每個(gè)人都會(huì)喜歡漂亮的登錄界面，一個(gè)App 給人們的第一印象是非常重要的。


這篇文章將教你使用谷歌材料設(shè)計(jì)規(guī)范（Material design spec ）和谷歌的新的設(shè)計(jì)支持庫(kù)（ design support library）來(lái)創(chuàng)建一個(gè)炫酷的登錄和注冊(cè)界面。設(shè)計(jì)支持庫(kù)實(shí)現(xiàn)了材料設(shè)計(jì)規(guī)范的一部分，它包含了一部分炫酷的UI 部件，讓你的Android 應(yīng)用給人一種優(yōu)雅的感覺(jué)。


對(duì)事物的設(shè)計(jì)和布局方面，如何做到讓人感覺(jué)到屏幕上的內(nèi)容是賞心悅目的，這里是我們要權(quán)衡的重點(diǎn)，我們會(huì)在頂部狀態(tài)欄添加精細(xì)的觸摸事件，并使用設(shè)計(jì)支持庫(kù)的floating labels （實(shí)現(xiàn)自TextInputLayout）。


幾乎所有的事情都都已經(jīng)照顧到你。

• 完整的代碼和樣例托管在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)證邏輯。

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


登錄Activity

讓我們來(lái)設(shè)置登錄Activity，通常是開始你的應(yīng)用程序，會(huì)顯示給用戶的第一個(gè)要啟動(dòng)的Activity。


如果你想要添加社交登錄按鈕，請(qǐng)繼續(xù)，但是當(dāng)前在這個(gè)文章范圍內(nèi)，只給你基本的代碼，讓你有一個(gè)堅(jiān)固的起點(diǎn)去構(gòu)建你的驗(yàn)證流程。

需要注意的是 onBackPressed 方法將會(huì)被重寫，這樣將會(huì)防止用戶關(guān)閉登錄Activity。

LoginActivity.java

res/layout/activity_login.xml

注冊(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

res/layout/activity_signup.xml

配置

為了讓程序一切正常工作，我們?cè)谛枰?app 目錄下的 build.gradle 中添加一些依賴，ButterKnife 是可選的，當(dāng)然我們更喜歡用它讓我們的Java 代碼更加整潔一些。

還有一個(gè)我們必須要在AndroidManifest 中添加聲明Activity。我已經(jīng)把AndroidManifest 清晰完整的代碼貼了出來(lái)。

希望這篇文章對(duì)你是有幫助的，如果這篇文章真的節(jié)約你寶貴的開發(fā)時(shí)間，請(qǐng)給我留言。

本文作者：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
非商業(yè)轉(zhuǎn)載轉(zhuǎn)載請(qǐng)?jiān)陂_頭注明作者詳細(xì)信息和本文出處，以及本文所有內(nèi)容。

本文首發(fā)我的微信公眾號(hào)，分享Android 開發(fā)和互聯(lián)網(wǎng)內(nèi)容。
微信號(hào)：AndroidMate
公眾號(hào)：安卓同學(xué)