iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 15
0
自我挑戰組

從積木開始學程式系列 第 15

[DAY>15<]製作一個登入系統_3(登入介面設定)

我們今天要設計的是登入系統的介面,
https://ithelp.ithome.com.tw/upload/images/20181030/20108017SeOZpiTcsK.png

首先我們要先準備好
三個label
兩個InputText
一個Alert
然後ROW主要是讓我的元件能夠併排在一起,這就是ROW的主要功能,
如果想跟我的設計不一樣的話可以不用加上沒關係。
https://ithelp.ithome.com.tw/upload/images/20181030/20108017dGsHVVuzKE.png

  • Label1元件屬性設定:
    Text:我的登入系統
    FontSize:20
    Color:選紅色
    Height & Width:請改成fit contents

  • Label2 元件屬性設定:
    Text: 帳號:
    Height & Width:請改成fit contents

  • Label3 元件屬性設定:
    Text: 密碼:
    Height & Width:請改成fit contents

其中帳號輸入的InputText請更名為"帳號輸入"
並且將 Height & Width:請改成fit contents
https://ithelp.ithome.com.tw/upload/images/20181030/20108017JZt3jKLMI9.png

還有密碼輸入的InputText也請更名為"密碼輸入"
並且將 Height & Width:請改成fit contents
https://ithelp.ithome.com.tw/upload/images/20181030/20108017BRUiPjTRh0.png

接著Button請將元件屬性Text改名為"登入"
https://ithelp.ithome.com.tw/upload/images/20181030/20108017KitxSv8YrR.png

這次比較特別的是要將Alert放入Login螢幕當中
元件放上去不會造成螢幕畫面的更動。
https://ithelp.ithome.com.tw/upload/images/20181030/20108017mSYsIhSd9E.png

因為Alert是屬於非可見性元件,只會發現在螢幕下方多了一個Alert的小按鈕!!!
https://ithelp.ithome.com.tw/upload/images/20181030/20108017s9rxzFncMG.png

這樣就完成了我們的登入介面設計囉!
然後各位可以先另行新增一個新的Screen,明天要做註冊頁面喔!!


上一篇
[DAY>14<]製作一個登入系統_2(Firebase資料結構建置)
下一篇
[DAY>16<]製作一個登入系統_4(註冊介面設定)
系列文
從積木開始學程式30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言