App Inventor學習記錄152-左右滑動切換不同的水平或垂直配置~HorizontalViewPager

HorizontalViewPager這個外掛挺棒的,不只可以左右滑動切換不同的水平或垂直配置,應該還可以做出更棒的頁面配置,很值得深挖它的潛力。


這次範例的完成品如下。

左右滑動螢幕,就會切換不同的畫面配置。
而且這幾個看起來像是不是螢幕的效果,其實都是在 screen 1下


畫面編排的部份如下。

在這裡大家就可以看到的,全部的東西都是在 screen 1下面。
在 screen1下,放入了好幾個垂直和水平配置。這幾個配置中,都放入一些元件。像是標籤、按鈕、瀏覽器等等的,只是為了要區別是不同畫面下的東西。


全部的程式碼如下。

when screen 1.initialize,當螢幕初始化的時候。
call horizontal view pager 1.initialize,呼叫外掛程式中的這個方塊,來決定要套用在那一個配置上。
id,這裡因為只有設定 1個畫面,所以 id就設定為 1。
container,這裡就放入我們決定要套用效果的垂直或是水平配置。
這樣設定好之後,vertical arrangement 1這個配置,就會是第 1個畫面。

接著,我們要把其它的水平或是垂直配置,加入我們剛剛設定的 container中。
call horizontal view pager 1.add component,呼叫外掛中的這個方塊。
id放跟 container相同的 id數字
component,放要加到 container中的垂直或水平配置。


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

APP INVENTOR外掛
名稱:HorizontalViewPager 
外掛來源:community.appinventor.mit.edu
外掛載點:
https://community.appinventor.mit.edu/t/free-popup-extension-an-extension-to-create-popup-menu/39163/28

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

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

發表迴響