App Inventor學習記錄146-把switch開關元件變成可愛笑臉的外掛~HappyToogle

HappyToogle這個外掛的用法跟內建的 switch元件是相同的,只是把開關元件變成可愛笑臉的樣子。

可以調整顏色、動畫時間、拖拉效果。


這次範例的完成品如下。

用法跟 switch元件是相同的,只是名稱上有些許的落差。
這裡放一個 switch元件跟這次的外掛效果一起做比較。


畫面編排的部份如下。

1個標籤元件用來顯示,開關目前是開還是關。
1個 switch開關元件,用來做比較。
1個 vertical arrangement垂直配置,用來套用這個外掛的效果。


全部的程式方塊如下。


第 1部份用到的方塊說明。

when screen 1.initialize,當程式初始化的時候。
callhappy toogle1.create button,呼叫外掛中設定的程式。
layout參數,這裡放要套用外掛效果的垂直配置。

set happy toogle 1.background colour,設定背景顏色
set happy toogle 1.checked,設定開或關,true是開。
set happy toogle 1.draggable,設定笑臉的圖示,能不能被拖拉。
set happy toogle 1.duration,設定笑臉開關動畫的持續時間。
set happy toogle 1.face margin,設定笑臉離邊框的距離。
set happy toogle 1.face radius,設定笑臉的大小。
set happy toogle 1.left bg color,設定笑臉移到左邊時的背景色。
set happy toogle 1.left eye color,設定笑臉移到左邊時,眼睛的顏色。
set happy toogle 1.left face color,設定笑臉移到左邊時,笑臉的顏色。
set happy toogle 1.left mouth color,設定笑臉移到左邊時,嘴巴的顏色。
set happy toogle 1.ritht bg color,設定笑臉移到右邊時的背景色
set happy toogle 1.right eye color,設定笑臉移到右邊時,眼睛的顏色。
set happy toogle 1.right face color,設定笑臉移到右邊時,笑臉的顏色。
set happy toogle 1.right mouth color,設定笑臉移到右邊時,嘴巴的顏色。


第 2部份使用到的方塊說明。

when switch 1.changed,當開關的狀態改變的時候。
if switch.ontrue,如果開關的最終狀態是開的話。
then
set label 2.text to true,把標籤 2的文字,設定為 true。
set happy toogle 1.checked to true,把外掛笑臉開關的狀態,設定為開。

else,不然的話。
set.label 2.text to wrong,把標籤 2的文字,設定為 worng。
set happy toogle 1.checked to false,把外掛笑臉開關的狀態,設定為關。


第 3部份使用到的方塊說明。

when happy toogle 1.on state change,當外掛笑臉開關狀態改變的時候。
if get is checkedtrue,如果外掛開關的最終狀態是開的話。
then
set label 2.text to true,把標籤 2的文字,設定為 true。
set switch 1.on to true,把 switch開關的狀態,設定為開。

else,不然的話。
set.label 2.text to wrong,把標籤 2的文字,設定為 worng。
set switch 1.on to false,把switch開關的狀態,設定為關。


這兩個元件的用法都是差不多的。
只是 switch開關元件用 switch.on來確認開關的狀態,而外掛開關在狀態變化的時候,多了一個 is checked的參數可以用。如果不用 is checked的話,直接用 happy toogle.checked也是可以的。

這次的 aia檔的下載連結如下:
NO_146_Smile_face_color.aia

APP INVENTOR外掛
名稱:HappyToogle
外掛來源:
外掛載點:extensions.warelabs.in
http://extensions.warelabs.in/happy-toogle-button-extension/index.html

參考書籍請見博客來書籍介紹頁面:
手機應用程式設計超簡單 App Inventor 2零基礎入門班
TQC+ 創意App程式設計認證指南
TQC+創意App程式設計認證指南解題秘笈
手機應用程式設計超簡單:App Inventor 2初學特訓班
手機應用程式設計超簡單:App Inventor 2小專題特訓班
手機應用程式設計超簡單:App Inventor 2資料庫專題特訓班

之前介紹過的一些 appinventor的使用記錄,都整理在下面這個頁面上了。
APP INVENTOR學習記錄及資源整理頁面

發表迴響