為你的APP設計漂亮的登入畫面

作者 | 2016-07-19

 

一個好的開發者是相當注重使用者經驗的,應用程式好用、順手之餘,倘若有個漂亮的UI,肯定會為你的APP加分不少。本篇就為各位介紹,如何初步拉出一個漂亮的登入畫面。

本範例版本:

  • Android studio 2.1.2
  • Android 6.0
  • JDK 1.8.0

簡介:

Material Design

「Material Design」官方稱為「實感設計」是Google所公佈一套適用於Android、iOS、網頁、平版或電視等平台的設計規則。

Google 推出的跨裝置適用的設計指南就是以實感設計為基礎,並在 Android 5.0(Lollipop)中落實,以扁平化的介面設計為基礎,加上材質分層級的概念的一個整體使用經驗的設計。

(以上節取自【Android高效入門>>深度學習】第六章)

準備工作:

  • 準備一張放置於登入頁的Logo圖檔。

litotom

  • 更新 Android Support Library 至 22.2以上。

mag_prettylogin_01

  • 開啟新專案 MDExample,選取Basic Acitvity。

設計畫面

新增一Empty Activity 名為LoginAcitvity,在畫面中加入元件 TextInputLayout、TextInputEditText、AppCompatButton。

點選 [CustomView]
mag_md_login_11

因選單內元件眾多,可鍵入關鍵字快速查詢。
mag_md_login_12

除了imageView外,按此方式依次選取TextInputLayout、TextInputEditText、AppCompatButton,並更改margin、id、hint等屬性。TextInputEditText的hint屬性有特殊作用,設定在此的文字為輸入欄位的提示文字,當游標移到輸入欄位,此文字將會字體縮小並移至上方。

將元件寛度調整為match_parent。選取多個元件,可一次更改不同元件的共同屬性。Component Tree 展開如下:
mag_md_login_14

切換為文字顯示模示,可看到方才拉進去的兩組TextInputLayout、TextInputEditText分別獨立存在,如下:

mag_md_login_22

TextInputLayout 為2015 Google I/O 發表的新元件,繼承LinearLayout,是個可放置元件的容器,須和TextInputEditText配對使用,目前尚無法透過開發者工具將TextInputEditText拖拉至TextInputLayout內,僅能手動調整。切換到Text顯示,手動修改TextInputLayout包覆TextInputEditText,修改完按下快速鍵[Ctrl]+[Alt]+[L]重新排版,activity_login.xml 完整內容如下:

畫面設計完成後,在MainActivity.java 加入以下程式碼,以便啟動APP時開啟登入畫面。

初次執行APP,畫面如下:
mag_md_login_21

目前畫面尚稱不上美觀,下一回,將為大家介紹如何微調畫面,讓整體畫面更順眼。

相關文章:

使用Facebook直接回應

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *