App Inventor學習記錄140-5步驟的下一步進度條動畫外掛~StepProgress

5步驟的下一步進度條動畫,就是常常在結帳頁面上看到的那一種,有一個進度條會提示還有幾個步驟的那一種。


這次範例的完成品如下。

點擊下一步的時候,會有挺多選項可以設定的,比如說顏色,動畫效果,文字大小,出現的文字等等的,能設定的東西還挺細的。


畫面編排的部份如下。

horizontal arrangement 2放的是上一步和下一步的按鈕。
horizontal arrangement 1是用來設定這個外掛用的。


全部的程式碼如下。


少了一個變數的建立沒截到圖。

建立變數_第幾步,它的初始值是 1。


程式初始化的時候。

stepprogress 1.animation duration,設定動畫的時間。
stepprogress 1.animation type,設定動畫的種類,可以填入 0,1,2,3。
stepprogress 1.isticked progress,這個我分不出來差別,先設定成 true。
stepprogress 1.next step line color,設定下一步線條的顏色。
stepprogress 1.next step text color,設定下一步文字的顏色。
stepprogress 1.selected circle color,設定下一步圓圈的顏色。
stepprogress 1.selected circle radius,設定下一步圖圈的半徑大小。
stepprogress 1.selected step number color,下一步的數字的顏色。
stepprogress 1.selected text color,設定下一步文字的顏色
stepprogress 1.selected line width,設定線條寬度。
stepprogress 1.selected number textsize,設定文字大小
stepprogress 1.step padding,設定間隔。
stepprogress 1.step frome string,設定顯示的文字。
stepprogress 1.text padding,設定文字的間隔。
stepprogress 1.text size,設定文字大小。
stepprogress 1.tick circle color,設定確定後的圓圈顏色。
stepprogress 1.tick circle radius,設定確定後的圓圈半徑。
stepprogress 1.tick mark color,設定打勾符號的顏色。
stepprogress 1.tick step line color,設定確定後的線條顏色。
stepprogress 1.tick tex tcolor,設定確認後的顏色。

有這一大堆可以設定,相信可以設定出大家相要的顏色。只是那個打勾的符號我找不到地方改。

call step progress 1.horizontal animated step,呼叫設定動畫的程式。
container,這個要放水平配置。
step number,這個要放的是幾步驟。


when step progress 1.stepclicked當點擊我們這個動畫所在的水平配置的時候。
call stepprogress 1.horizontalstepnext呼叫水平移動程式。
stepclickedstep,把步驟移動到我們點擊到的位置上。


下一步按鈕按下之後,用變數_第幾步來做判斷。如果變數_第幾步的值等於 5的話,就 call stepprogress 1.horizontalstepnest呼叫外掛水平移動程式,移動到第 5步的步驟。
如果變數_第幾步的值不等於 5的話,就把變數_第幾步的值加 1,再呼叫外掛水平移動程式,移動到變數_第幾步的步驟上。


上一步按鈕的做法也是相同的,這裡就不多說明。


除了勾勾找不到地方改之後,這個外掛真的挺不錯的。
只是因為用的動畫效果挺多的,很容易和其它的外掛衝突到。

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

APP INVENTOR外掛
名稱:Step_progress
外掛來源:community.thunkable.com
外掛載點:
https://community.thunkable.com/t/free-extension-stepprogress-horizontal-stepview/43760

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

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

發佈留言