App Inventor學習記錄95-用手指水平滑動,來切換不同的畫面

這次是利用 Scroll Arrangement Handlers這一個外掛,搭配計時器、水平捲動配置,來達成用手指水平滑動,切換不同畫面的效果
記錄一下:
App Inventor學習記錄95-用手指水平滑動,來切換不同的畫面


這次的外掛下載點如下:
Scroll Arrangement Handlers下載點

實際執行效果如下:


畫面編排如下。

這裡由於我們要水平滑動來切換畫面,所以我們拉一個水平捲動配置
在水平捲動配置裡頭,放入 6個垂直配置。垂直配置的寬度,都設定為 100%
是的,不是設定成填滿,而是要設定成 100%。如果設定成填滿的話,這 6個垂直配置,會把水平捲動配置給填滿。就不會達到我們希望的效果。

然後,計時器的計時間隔,設定成 100ms。
匯入外掛,匯入外掛的方法請參考:怎麼匯入 app inventor的外掛(extension)到程式中
HorizontalScrollHandler元件拉進來。


全部的程式碼如下:


第 1部份的程式碼說明:

建立一個叫左上的 x位置的變數,它的初始值是 0。
為什麼要取這個名字,因為這個的外掛就是取的值,就是螢幕左上角的 x位置的值,我們在用這個取得值下去做判斷,來做畫面的切換。


第 2部份的程式碼說明:

當螢幕初始化的時候。
呼叫 HorizontalScrollHander 1.RegisterScrollView的功能。
horizontalScrollArrangement這一欄,放進要作用的水平捲動配置。

這個步驟主要就是要確認要產生效果的水平捲動配置是那一個。


第 3部份的程式碼說明:

當 HorizontalScrollHandler1.ScrollChanged水平捲動狀態變動的時候。
左上的 x位置這個變數,設定成取 scrollX
這個值就是螢幕左上角移動的值。這個部份,大家可以拉一個標籤,來顯示這個 X值。
再對照螢幕移動的情形,會比較清楚的知道指的是那一個點,這裡就不另外說明。


第 4部份的程式碼說明:

當 HorizontalScrollHandler 1.被鬆開的時候
把計時器 1.啟用計時,設定為真。

這裡要啟動計時器 1的原因,就是要利用計時器的作用,可以啟動判斷的功能。


第 5部份的程式碼說明:

當計時器 1開始計時的時候:
就把計時器 1.啟用計時,設定為假。
然後依據左上角的 x位置,來做流程判斷。


不得不說,這個外掛真的很強大。
這個畫面的切換功能,真的很棒。

這次的 aia檔的下載連結如下:
點我下載 NO_95_Slide_change_screen.aia

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

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

發表迴響