作為一個在產(chǎn)品路上摸索的小白,記錄下自己的學(xué)習(xí)歷程僵腺。
希望這篇能幫到那些還在糾結(jié)動態(tài)面板/做TAB切換效果的同學(xué)們渗柿。
1.先設(shè)計好登錄界面和注冊界面:
2. 在注冊界面,選中“手機(jī)號”“密碼”“驗證碼”“注冊按鈕”這些文字、輸入框注冊控件隧出,點擊右鍵踏志,選擇“轉(zhuǎn)換為動態(tài)面板”
此時可見到一個半透明的動態(tài)面板出現(xiàn)在界面中,右鍵點擊該動態(tài)面板胀瞪,選擇“管理面板狀態(tài)”選項针余,會彈出如下彈窗:
3.選中“state 1”,右鍵點擊“state1”可以給state 1 動態(tài)面板起名凄诞,此處命名state 1 動態(tài)面板為“注冊界面”(動態(tài)面板“注冊界面”即是我們將見到的注冊界面)
?-> 然后點擊 ”+” 圖標(biāo)添加一個動態(tài)面板圆雁,此時可見多了一個動態(tài)面板叫 “state 2” 。選中state 2帆谍,右鍵點擊state 2進(jìn)行更名:“登錄界面”
4. 選中“登錄界面”伪朽,點擊“編輯”
圖標(biāo),此時進(jìn)入編輯動態(tài)面板“登錄界面”的界面(即在此處可以編輯登錄界面的內(nèi)容
(登錄界面包含:手機(jī)號文本汛蝙、密碼文本烈涮,手機(jī)號和密碼的輸入?yún)^(qū)域,以及登錄按鈕這些控件)
至此窖剑,界面布局基本完成坚洽。
在界面右下角可以管理剛剛創(chuàng)建的兩個動態(tài)面板:登錄界面,注冊界面西土。
現(xiàn)在讶舰,我們要實現(xiàn)一些交互功能:點擊“登錄”按鈕,界面跳轉(zhuǎn)到登錄界面需了,點擊“注冊”按鈕跳昼,界面跳轉(zhuǎn)到注冊界面。
6. 在主界面(非動態(tài)面板界面)中選擇“登錄”字樣 –> 點擊“鼠標(biāo)單擊時” -> 點擊“添加用例”
?? -> 選擇“設(shè)置面板狀態(tài)”-> 勾選“set(動態(tài)面板)status to 登錄界面”-> 將“選擇狀態(tài)”調(diào)至“登錄界面”
至此便實現(xiàn)了:在登錄界面點擊“登錄”二字時肋乍,界面顯示的是登錄界面庐舟。
同理,請按照同樣的方法實現(xiàn):點擊“注冊”字樣住拭,界面跳轉(zhuǎn)到注冊界面挪略。
至此历帚,TAB切換登錄/注冊界面的功能就做好了。
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
PLUS: 實現(xiàn)點擊“登錄” 杠娱、“注冊”時挽牢,被鼠標(biāo)懸浮 / 點擊 / 選中 的文字有變色/下劃線等效果出現(xiàn)的功能:
1.選中主界面中的“注冊”, 在“交互樣式設(shè)置”中點擊“鼠標(biāo)懸吞螅”禽拔,選擇想要的字體突出效果,點確定室叉。 同理睹栖,依次還要設(shè)置“鼠標(biāo)按下”“選中”事件,設(shè)置想要的突出字體的效果茧痕。
2. 注意野来,“選中”事件需要多一步操作,指定哪個控件是當(dāng)前被選中的控件:
在主界面(非動態(tài)面板界面)中選擇“注冊”字樣 –> 點擊“鼠標(biāo)單擊時” -> 點擊“添加用例”
?? -> 選擇“設(shè)置選中”-> 勾選“當(dāng)前元件to True”
3. 重復(fù)第1~2個步驟踪旷,將“登錄”也進(jìn)行同樣的設(shè)置曼氛。
4. 將主界面的“登錄”“注冊”捆綁成一組:
同時選中“登錄”“注冊”字樣 -> 在“設(shè)置選項組名稱中”給這個組起個名字,此時即可將這兩個詞捆綁令野。