打鐵趁熱,使用ConstraintLayout設計登入畫面

作者 | 2016-09-25

在上一篇 Layout新成員ConstraintLayout,終於向iOS的AutoLayout看齊 中加入了一個TextView後,在本篇將以這些知識為基礎,設計一個以ConstraintLayout為面版的登入畫面,這個畫面並不複雜,不一定要使用ConstraintLayout,但可以透過這個常見的範例,熟悉其使用方式。

使用ConstraintLayout設計登入畫面

承上一篇,目前畫面中已經有了一個TextView元件如下圖:

a7473

加入一個EditText元件

接著要在其下方加入一個輸入方塊,請到左方拖拉一個EditText元件到畫面中放下,如下圖:

a7474

放好元件後,它並無所規定的至少擁有水平與垂直的Constraints,再拖拉元件左方的圓點至上面TextView元件的左方,如下圖:

a7475

這個動作可以為EditText元件建立一個左限制條件(Left Constraint),讓它的左邊界對齊上面的TextView左邊,建立完成後如下圖:

a7476

Left Constraint的屬性原始碼如下:

a7477

接著,請再設定EditText元件的上限制(Top Constraint),讓它對齊上面的TextView的下方,完成如下:

a7479

若想要調查這兩個Constraints中的間距(Margin),可選擇元件後,在新版的屬性視窗中(Properties)調整,如下圖箭頭處:

a7480

Margin的值預設使用dp單位,若在上方改為15後,元件設定的原始碼如下:

a7481

加入其他元件

依上述方法,加入登入畫面的密碼提示TextView與輸入密碼的文字方塊,如下圖:

a7482

再加入登入按鈕,如下圖:

a7483

在登入按鈕右方加入一個離開按鈕,先不用管是否水平對齊,先放下去再說:

a7484

兩個水平元件的對齊,可使用元件下方的Constraint,讓它對齊左方的按鈕下緣,再加入左方的Constraint即可,如下:

a7485

最後完成的畫面預覽如下:

a7486

更改元件id值

未來要在Activity中取得的兩個EditText元件,目前都未更改為可讀性較高的id值,請點擊帳號EditText元件,其ID值在屬性視窗的最上方,如下:

a7489

請將ID值改為userid後,按下Enter鍵,Android Studio會出現對話框,確認在這個XML檔中使用到這個元件的ID值都將幫你一併修改為userid,請按下Yes,可先勾選日後不要再詢問這個問題,一律是Yes。

a7488

版面在模擬器中的執行結果如下圖:

a7490

相關文章:

Category: Android 標籤:, ,

關於 Hank Tom

專長為程式語言、雲端服務開發,Linux系統管理, 任職:利拓科技 技術長,海林行動科技 技術總監 輔仁大學 兼任助理教授 ,為 Android高效入門>深度學習、CentOS 7建置、管理與伺服器架設實戰、Java網路程式設計、雲端網頁程式設計-Google App Engine應用實作 等書作者

使用Facebook直接回應

發表迴響

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